×
Россия +7 (909) 261-97-71

Прикладные техники оптимизации JPEG

Россия +7 (909) 261-97-71
Шрифт:
4 38346
Подпишитесь на нас в Telegram

Существует не так много базовых советов по оптимизации JPEG, которые реально дают эффект без ухудшения качества. В этой статье я расскажу обо всех этих методах и их эффективности, а также предложу несколько продвинутых техник, которые позволят сократить ваши изображения в размере еще сильнее.

Сразу оговорюсь, что формат JPEG (в силу DCT-кодирования и таблиц Хаффмана) изначально подразумевает потерю качества. И даже сохранение в режиме "100%" не устранит потерь. Но эти потери можно сделать незаметными для глаза или допустимыми в конкретном случае использования. Или использовать некоторые особенности формата, чтобы кодировать JPEG совсем без потерь.

1. Оптимизация для Web


Ch16-Figure-20-Save-for-Web-1.jpg

Базовый совет: при сохранении в любом редакторе (Photoshop, Gimp и др.) используйте отдельную опцию «Сохранить для Web». Это сделает изображение совместимым по цветовой палитре со всеми браузерами. А также удалит из него некоторую дополнительную информацию (например, превью-изображения), которая необходима обычным редакторам для быстрого просмотра множества изображений, но совершенно не подходит браузерам (которые не используют превью в JPEG-изображениях ни в каком виде).

Естественно, что фактические размеры изображения должны соответствовать максимальным размерам, используемым на сайте. Наиболее частая ошибка в работе с картинками на сайте: взять их в исходном виде, без приведения к нужным размерам. Это многократно увеличивает размер сайта и существенно замедляет его загрузку.

2. Удаление мета-информации


v32_10_exiftool_en.jpg

В качестве дальнейшей оптимизации JPEG без воздействия на цветовые данные можно и стоит рассмотреть различные утилиты для удаления EXIF-чанков и комментариев.

Лучшей в данном классе утилит будет ExifTool, которая доступна для всех платформ. ExifTool распознает дополнительные теги (EXIF чанки) почти всех устройств и прикладных программ и позволяет безболезненно для качества изображения их убрать (или извлечь или заменить).

Удаление мета-информации и EXIF-чанков производится вне основных данных изображения (DCT-преобразования и таблиц Хаффмана) и гарантирует сохранение качества.

3. «Последовательная» оптимизация


01-02_baseline_vs_progressive.jpg

Формат JPEG содержит еще одну интересную особенность — возможность делать несколько кадров изображения, отрисовывая их последовательно (от этого и происходит термин «последовательные» (progressive) JPEG). Возможно, первоначально эту возможность хотели использовать для JPEG-анимации, но в конкретной реализации она нашла лучшее применение.

«Последовательные» JPEG улучшают пользовательское восприятие при загрузке больших файлов (сначала показывается смазанная копия, затем она улучшается в поступлением данных) и обладают меньшим размером (в среднем, если JPEG изображение больше 10 Кб).

Сейчас «последовательные» JPEG файлы поддерживаются всеми браузерами, и нет никаких причин их не использовать. Не всегда такие файлы будут меньше обычных, но проверку на размер обычной и «последовательной» версии необходимо выполнять при сохранении или оптимизации файлов.

Выигрыш в размере «последовательных» JPEG обычно не больше 20% от исходного размера файла.

4. Сохранение не в 100% качестве


ParrotsJPGSize.gif

100% качество (максимальный уровень качества в графическом редакторе) при сохранении JPEG-файлов не подразумевает отсутствие потерь. В силу ограничений формата каждый JPEG файл представляет информацию с потерями. Но можно уменьшить размер файла и, практически, не увеличить чисто потерь.

Для этого необходимо в используемом графическом редакторе (или консольной утилите) задать степень сжатия на 5-10% меньше максимального. Например, при шкале от 0 до 100 оптимальным будет уровень 90-95. При шкале от 1 до 12, оптимальным будет 11.

Как видно из графика выше, даже использование качества 95 вместо 100 обычно позволяет сократить размер в 1,5-2 раза.

5. Использование другого формата


gif-vs-png-vs-jpg.png

Не всегда изображения в JPEG-формате будут занимать меньше места. Иногда правильнее сохранять их в SVG (логотипы), PNG (при небольшой цветовой палитре) или даже в WebP (если все браузеры ваших пользователей это поддерживают).

Даже если формат WebP не полностью поддерживается в браузерах (на текущих момент покрытие составляет в районе 70%), можно сохранять изображение в двух форматах — лучшем из стандартных (например, JPEG) и альтернативном (WebP) и отправлять пользователям те изображения, которые поддерживает их браузер (определяя это по HTTP заголовку Accept).

Правильное определение формата изображение может сократить размер в 2-3 раза.

6. Оптимизация для Retina-устройств


jpeg-example.jpg

При использовании изображений двойного разрешения для соответствующих устройств (с Retina) можно применять следующую хитрость. Поскольку физически большее изображение отобразится в меньшую площадь, то исходное изображение можно сохранить с существенно меньшим качеством (при этом потери качества не будут заметны при попиксельном сравнении).

На примере выше более высокая степень сжатия для изображения с двойной плотностью пикселей дало 30% выигрыша в размере без видимой потери качества.

Описанные методики позволяют существенно (иногда в несколько раз) сократить размер JPEG-изображения и применить к ним другие, продвинутые техники оптимизации.

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Виталий Мельничук
    1
    комментарий
    0
    читателей
    Виталий Мельничук
    больше года назад
    Самый базовый и быстрый способ, которым пользуюсь уже надцать лет, это открыть изображение в Microsoft Office Picture Manager, Открыть пункт меню Рисунок -> Сжать рисунки, справа выбрать галочку для документов, и нажать на кнопку ОК там же справа внизу. И тут же видно результат насколько сжался фай, затем при закрытии файла нажать кнопку сохранить, ну или не сохранять, если результат неудовлетворительный. При определенной сноровке вся операция занимает отсилы 30 сек - минута.
    -
    0
    +
    Ответить
  • Гость
    больше года назад
    Подскажите как делать "последовательные" jpeg файлы? :-)
    -
    0
    +
    Ответить
  • Гость
    больше года назад
    А как делать последовательные jpeg файлы?
    -
    1
    +
    Ответить
    • Nikolay Matsievsky
      1
      комментарий
      0
      читателей
      Nikolay Matsievsky
      Гость
      больше года назад
      Обычно в редакторе при сохранении можно выбрать - baseline или progressive. Также все сервисы по оптимизации изображений и ускорению сайтов - например, Айри.рф - автоматически переводят JPEG изображения в последовательные, если есть выигрыш в размере.
      -
      1
      +
      Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Роскомнадзор начал требовать от владельцев сайтов уведомлять об использовании Google Analytics. Опыт SEOnews
Денис Добрынин
1
комментарий
0
читателей
Полный профиль
Денис Добрынин - Что-то я как-то пропустил момент, с которого например госномер автомобиля или разрешение монитора и версия установленного на ПК ОС стала перс.данными... Но сегодня тоже получили бумажку с ай-яй-яем. Пойдем на прием в теруправление.
В Почте и Облаке Mail появился новый тариф – «Семейный»
Анна Макарова
393
комментария
0
читателей
Полный профиль
Анна Макарова - Да, конечно, владелец видит все файлы. А про других пользователей так написано: подключившие этот тариф, могут добавлять в подписку до 4 пользователей. Всем, кого пригласили в подписку, предоставляется доступ к терабайту облачного пространства для общих дел.
Тренды SEO в 2025 году
Борис
4
комментария
0
читателей
Полный профиль
Борис - 50/50 Описанная тобой ситуация (надеюсь, не против, что сразу на "ты") — типичная и вообще не требует какого-то глубинного опыта. Достаточно немного логики и наблюдательности. Разобью на пункты для читабельности: 1) Каннибализацию очень просто распознать. Достаточно загрузить СЯ в систему съёма позиций и мониторить источники. Если происходит некое «мигание» — идём (повторно) в топ, смотрим, подтверждаем гипотезу — склеиваем. 2) Но чаще всего эту проблему можно решить на уровне качественной группировки СЯ. А некоторые кластеры со знаком вопроса, которые мы решили разделить на несколько, достаточно держать под контролем. И снова получается, что внимательность и логика здесь могут помочь. И никакого серьёзного опыта не требуется. 3) Соглашусь, что в Яндексе правило "Интент = одна страница" — очень важно, но не всегда. Например, есть кластер, связанный с установкой сантехники, который включает запросы: "установка сантехники", "цена на установку сантехники". Вот здесь, как раз, для многих может быть неочевидно, что кластер лучше разделить на два: "Установка сантехники" и "Цена на установку сантехники". 4) Продолжая мысль из п.3 — в такой ситуации в Яндексе (скорее всего) всё будет ок. И никакой каннибализации не произойдёт. 5) Если говорить про Google (тот же п.3), то здесь, вероятно, возникнут проблемы (всё зависит от оптимизации страниц). Эти два кластера могут не дотянуть до топа из-за своей релевантности. Мы все знаем, что Google может «съесть» страницу с несколькими интентами, и всё будет ок. (в этом предложении пасхалка, что нужно сделать ;)) А если ещё поработать над ссылочным — вообще сказка. Конечно, эту проблему можно решить, но если переборщить, то каннибализация может уже произойти в Яндексе. Вот как раз чтобы уловить эту тонкую грань, и нужен хоть какой-то опыт, которого часто нет у джунов.
Россиянам могут запретить рекламу в Instagram* и Facebook*
Марина Ибушева
66
комментариев
0
читателей
Полный профиль
Марина Ибушева - Окончательное как раз и означает третье. Любой законопроект перед тем, как отправиться в Совет Федерации и на подпись прзиденту, проходит в России три обязательные стадии рассмотрения в Государственной Думе: Первое чтение - обсуждается общая концепция законопроекта. Второе чтение - более детальное обсуждение проекта, поправки и дополнения. Третье чтение (окончательное) - голосование за проект. Так что ожидается 25 марта второе и третье, окончательное чтение.
Фиды, фильтры, внутренний поиск: как выжать максимум при технических ограничениях и увеличить трафик более чем в 5 раз
i-Media интернет-агентство
2
комментария
0
читателей
Полный профиль
i-Media интернет-агентство - Google Merchant работает, товары показываются - в кейсе есть скриншот с примером.
Целевая аудитория: как найти и встроиться в ее вселенную
Александра
2
комментария
0
читателей
Полный профиль
Александра - Здравствуйте! Благодарю Вас за отличную статью! Много полезной информации, написано доступным языком.
Количество пользователей ИИ в сервисах Mail превысило 5 млн человек
Сергей Карененко
1
комментарий
0
читателей
Полный профиль
Сергей Карененко - Поздравление еще худо бедно написать можно. А когда в почте больше 10к писем, вот тут хорошо, что ии есть)
Главные апдейты Google 2024: что изменилось и как продвигать сайты в 2025 году
Старый сеошник
5
комментариев
0
читателей
Полный профиль
Старый сеошник - Ребята, ну серьёзно? Это исследование и итоги?) Просто везде: усиливает борьбу, улучшение контента, улучшение ссылок и т.д. А что нового? А где конкретика, цифры, динамика? Или итог: В 2025 году продвижение сайтов должно опираться на качество контента и улучшение пользовательского опыта. Браво, ради этого стоило писать статью) Информативность 0. Возразите мне?
Сравнительный анализ сервисов для оценки трафика российских сайтов
Константин Булгаков
1
комментарий
0
читателей
Полный профиль
Константин Булгаков - Коллеги, очень большая работа проведена. Спасибо за исследование
В феврале объем данных, хранящихся в Облаке Mail, достигло 335 петабайт
Николай
1
комментарий
0
читателей
Полный профиль
Николай - Не удивительно, все меньше используют внешние носители. Да и зачем, если облако реально удобнее
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
393
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
124
Комментариев
121
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
66
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!