Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Ускорение и защита сайта
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
29
Эбиа

Эбиа

www.ebia.ru

24
Enlite

Enlite

enlited.ru

21
YAGLA

YAGLA

yagla.ru

15
Cookiezz

Cookiezz

cookiezz.com.ua

15
likearea

likearea

smm.li

15
SE Ranking

SE Ranking

seranking.ru

11
Relap

Relap

relap.io

11
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Venyoo

Venyoo

venyoo.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

6 секретных техник оптимизации JPEG-изображений

592 1 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Продолжаем с оптимизацией JPEG изображений. Сегодня - более продвинутые методы, которые могут быть частично автоматизированы утилитами.

Оптимизация изображений на сегодняшний день занимает ключевое место, когда речь идет о скорости сайта. Хотя все изображения запрашиваются на этапе полной загрузки (уже после отрисовки страницы в браузере), но от 50% до 90% размера страниц сайта — это именно изображения. И грамотная работа с ними (а не только Save for Web в Photoshop) позволяет существенно уменьшить размер сайта и сделать его быстрее для пользователей.

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

Я предполагаю, что вы уже умеете сохранять изображение без избыточной мета-информации в нужном на страницах сайте размере. И даже знаете, чем отличается последовательные (progressive) JPEG-изображения от обычных. Далее будут разобраны дополнительные инструменты и техники, которыми можно дополнить ваш арсенал работы с изображениями.

1. Оптимизация для решетки 8×8

b_57c537bf08b2f.jpg

Достаточно известный прием (автор метода — Сергей Чикуёнок), использующий особенность JPEG сжимать изображение квадратами 8×8 (из-за DCT преобразования). Для оптимальной четкости изображения (и понижения его качества без видимого ущерба для картинки) нужно выровнять границы элементов изображения по решетке 8×8.

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

Выигрыш от такой техники обычно составляет 5-10%.

Для автоматизации техники возможно настроить смещение границ изображения на 1-4 пикселя по обоим осям с тем же качеством (и сохранение среди результирующих изображений). Изображения меньшего размера будет лучше оптимизировано под решетку 8×8.

2. Селективная оптимизация

b_57c537bf36e7e.jpg

Логичным продолжением оптимизации для решетки 8×8 будет выборочное качество изображения (количество деталей) для разных зон изображения. Техника называется Selective optimization и доступна в нескольких инструментах.

В частности, в Adobe Photoshop необходимо создать одну или несколько масок изображений для лучшего качества (остальное изображение будет сжато сильнее) и применить ее при сохранении JPEG изображения (подробная инструкция). В результате — при том же качестве отображения деталей размер изображения будет меньше.

Эта техника дает выигрыш в 3-20% относительно исходного изображения.

3. Оптимизация цвета и яркости

b_57c537bf5ba8a.jpg

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

Прием достаточно сложен в освоении: нужно переключиться в режим Lab Color, затем в Channels выбрать цвета, у которых уменьшить детализацию (смазать фон), затем меняем Levels, чтобы цвет изображения остался прежним. (Полная версия руководства доступна здесь).

Выигрыш от таких манипуляций с изображением может достигать еще 10-15%.

4. Оптимизация субвыборки

b_57c537bfb32dc.jpg

В качестве более автоматизируемой альтернативы уменьшению цветовой информации с сохранением яркости изображения можно рассмотреть технику Chroma subsampling (субвыборка яркости). Если кратко, то при сохранении канала яркости в YCbCr-представлении изображения (Y — яркость, Cb — один цвет (синий), Cr — второй цвет (красный)) уменьшаются различия в цветах соседних пикселей. 1×1 subsampling означает отсутствие каких-либо изменений в цвете, 2×1 и 1×2 усредняют информацию только по одному измерению (горизонтали или вертикали, соответственно). 2×2 subsampling усредняет информацию сразу в 4 пикселях.

В другом представлении схемы — J:a:b (например, 4:2:2) — первая цифра означает ширину области усреднения (в данном случае 4 пикселя), вторая цифра — число результирующих значений цветов в первой строке, третья цифра — число результирующих цветов во второй строке. Всего строк 2 (высота области — 4 пикселя). Таким образом, схема 4:2:2 соответствует 2×1 subsampling, 4:4:4 — 1×1 subsampling, 4:2:0 — 2×2 subsampling, 4:4:0 — 1×2 subsampling.

Последнюю схему subsampling поддерживает большое количество оборудования и прикладных программ. В частности, ImageMagick (через опцию -sampling-factor) и GIMP. По результативности схема 4:2:0 позволяет выиграть 17%.

5. Качество меньше 100%

b_57c537bfda3aa.jpg

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

Оптимальным будет использование 90-95% максимального качества (в зависимости от вашего редактора или консольной утилиты): это либо 90-95% при максимуме 100%, либо 10-11 при максимуме в 12. В этом случае размер изображения будет меньше при том же визуальном качестве. И из изображения не будут удалены небольшие детали (что может произойти при дополнительных оптимизациях, включаемых в вашем редакторе, по умолчанию, при качестве меньше 90).

6. Оптимизация таблиц Хаффмана

b_57c537c002e02.jpg

Кодирование Хаффмана позволяет представить цветовую информацию (по разным каналам) в качестве сжимаемой таблицы (с потерей информации). JPEG-файлы используют именно эти таблицы. Оптимальный выбор порядка расположения коэффициентов в такой таблице позволяет существенно сократить ее размер. Этим и пользуются различные варианты утилит для оптимизации таблиц Хаффмана.

Наиболее известной является jpegtran, которая входит в набор libjpeg-progs и во множество утилит редактирования и оптимизации изображения. Менее известным вариантом оптимизатора является набор библиотек libjpeg-turbo, который содержит улучшенные инструкции и дополнительную оптимизацию для таблиц Хаффмана.

И совсем малоизвестным будет пакет mozjpeg, который реализует все наработки libjpeg-turbo и некоторые дополнительные улучшения по производительности. Каждая из описанных библиотек обратно совместима с jpegtran (и может использоваться как полноценная замена этой утилите).

Выигрыш от оптимизированных таблиц Хаффмана составляет 5-20% на изображение.

Описанные 6 методик, без всякого сомнения, дополнят ваш инструментарий и позволят получить меньшие по размеру JPEG изображения с тем же качеством.

Источник: searchengines.ru

+4
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
GreenRed brand studio
разработка логотипа за 99$
Панченко Андрей
Реально продвинутые методы ...
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать