14 Июня 2016 в 11:41

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

4 21696
Николай Мациевский
Технический директор,
Айри.рф

Существует не так много базовых советов по оптимизации 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-изображения и применить к ним другие, продвинутые техники оптимизации.

4 комментария
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
  • Виталий Мельничук
    1
    комментарий
    0
    читателей
    Виталий Мельничук
    1 месяц назад
    Самый базовый и быстрый способ, которым пользуюсь уже надцать лет, это открыть изображение в Microsoft Office Picture Manager, Открыть пункт меню Рисунок -> Сжать рисунки, справа выбрать галочку для документов, и нажать на кнопку ОК там же справа внизу. И тут же видно результат насколько сжался фай, затем при закрытии файла нажать кнопку сохранить, ну или не сохранять, если результат неудовлетворительный. При определенной сноровке вся операция занимает отсилы 30 сек - минута.
    -
    0
    +
    Ответить
    Поделиться
  • Гость
    4 месяца назад
    Подскажите как делать "последовательные" jpeg файлы? :-)
    -
    0
    +
    Ответить
    Поделиться
  • Гость
    4 месяца назад
    А как делать последовательные jpeg файлы?
    -
    1
    +
    Ответить
    Поделиться
    • Nikolay Matsievsky
      1
      комментарий
      0
      читателей
      Nikolay Matsievsky
      Гость
      2 месяца назад
      Обычно в редакторе при сохранении можно выбрать - baseline или progressive. Также все сервисы по оптимизации изображений и ускорению сайтов - например, Айри.рф - автоматически переводят JPEG изображения в последовательные, если есть выигрыш в размере.
      -
      1
      +
      Ответить
      Поделиться

Отправьте отзыв!
X | Закрыть