Базовая оптимизация JPEG для веб

Подготовил: Евгений Рыжков Дата публикации: 17.09.2010

JPEG это лучший формат для фотографий в веб. Так же хорошо походит для изображений, где присутствует плавная смена цветов: градиентов, свечений, теней и т.п. Формат способен отобразить максимальное число цветов, которое может передать монитор — 16,8 миллиона. Сама же аббревиатура JPEG (Joint Photographics Experts Group) означает группу специалистов, разработавших стандарт сжатия JPEG.

Метод сжатия JPEG является сжатием с потерями, вследствие выборочного удаления данных. В итоге получаем более легковесный файл, но с худшим качеством.

Имеем к примеру вот такое исходное фото:

начальное фото

С ним и будем эксперементировать. Открываем окно оптимизации изображения для веб (Файл -> Сохранить для Веб) и выбираем формат JPEG:

настройки оптимизации JPEG

Опции предопределенная степень сжатия и качество управляют степенью сжатия файла: чем выше степень сжатия, тем больше потерь в изображении (хуже качество), тем меньше весит файл. Эти опции имеют наибольшее влияние на размер файла. Предопредленная степень — это варианты сжатия, установленные разработчиками photoshop. Для более точной настройки лучше использовать ползунок:

точная настройка степени сжатия

Обычно степень сжатия применяется в пределах 45-65.

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

Теория: базовые JPEG и построчная развертка

Базовые JPEG загружаются на последовательно, пользователь увидит картинку полностью, только когда она целиком загрузится:

последовательная загрузка изображения

Такой способ загрузки изображения является «базовым» и поддерживается всеми браузерами и устройствами для просмотра веб страниц.

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

построчная развертка

Построчная развертка не поддерживается старыми браузерами и некоторыми устройствами (они отобразят изображение последовательно).

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

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

Размытие (blur) задает эффект размытия, увеличивая степень сжатия файла. Можно использовать для незначительного уменьшения объема файла. Обычно применяют в пределах от 0,1 до 0,5.

Вернемся к нашей подопытной картинке. Чтобы поучить коэффициент пользы от оптимизации JPEG в photoshop, сохраню сначала картинку просто в JPEG (Файл-> Сохранить как..). Качество при сохранении установлю Medium, получаем:

изображение сохраненное без ручной оптимизации 36,8Kb

Теперь возьму исходную картинку и сохраню ее, используя ручные настройки, при этом качество должно остаться приемлемым. Открываю окно оптимизации (Файл -> Сохранить для веб...). После сравнений различных вариантов, остановился на такой комбинации: качество 55, не использовать progressive, blur = 0,2

изображение сохраненное с ручной оптимизацией 21,3Kb

Результат получился приятным: качество вышло лучше, а вес файла 57.8% меньше. Правда изображение немного потеряло цвета.

Советы

  • всегда сохраняй оригинал изображения, т.к. каждое сохранение в формате JPEG приводит к потерям качества, даже если оно сохраняется в качестве 100;
  • никогда не сохраняй изображение с качеством 100. Это не максимальное качество, а математический предел оптимизации, при котором изображение будет весить неоправданно много. Качества 95 вполне хватит, чтобы сохранить изображение практически без потерь;
  • помни, что в photoshop при качестве ниже 50 включается дополнительный алгоритм оптимизации — color downsampling, который дополнительно усредняет цвет в соседних восьмипиксельных блока:
    качество 50 качество 50
    качество 51 качество 51
    Поэтому если на изображении присутствуют очень мелкие контрастные детали, не следует выставлять качество ниже 51.
  • если при загрузке страницы используются анимации и присутствуют JPEG-изображения, для них лучше не использовать progressive (помнишь, что это требует дополнительных ресурсов?).

Материалы

Показать комментарии