Оптимизация изображений для сайта

Довольно актуальная тема как для веб-мастера, так и для верстальщика, или даже контент-менеджера.

Для сайтов это вообще критически важно. Почему? Ну во-первых страницы загружаются и отображаются в разы быстрее, так как изображения и вообще медиа в целом (видео и музыка) — это самые тяжелые элементы контента.

Пусть музыка и видео встречаются не на каждой странице, а вот без изображений в веб 2.0 страницу представить сложно. К тому же никто не отменял использование изображений в качестве фона. Так что иногда приходится использовать картинки с расширением FullHD. Ну и наконец второе — вы экономите место на хостинге!

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

Оказывается есть куда. Теперь подробнее.

Photoshop

Что касается самых популярных графических редакторов, то на примере Photoshop  можно сказать, что далеко не все пользуются пунктом «Сохранить для WEB».

По ходу написания самой статьи, мне самому стало интересно как же можно ужать изображение. Для примера взята всеми любимая коала из образцов изображений ОС Windows.

Что у нас с параметрами? Изображение имеет разрешение 1024 на 768, в формате .jpg и занимает 762 КБ (780 831 байт). Довольно много, неправда ли? Никаких правок в картинку не вносилось, я просто сохранил эту картинку с разными параметрами, и вот что получилось:

JPG Качество 30 (среднее)
Оптимизация, НЕ прогрессивный, 106 КБ (109 057 байт);

JPG Качество 60 (высокое)
Оптимизация, НЕ прогрессивный, 213 КБ (218 409 байт);

JPG Качество 100 (наивысшее)
Оптимизация, НЕ прогрессивный, 760 КБ (779 224 байт);

PNG 1,48 МБ (1 556 218 байт);

Упс, с PNG вышла засада, но собственно удивительного ничего нет. Получили картинку размеров в 2 раза больше исходной.

Ну ок. Итоги такие, что среднее качество вполне показало себя с хорошей стороны. Оригинальную картинку ужали более чем в 7 раз, но качество не самое лучшее. Хотя конечно все зависит от изображения, при масштабе 1:1 на fullHD мониторе разницы я не увидел по крайней мере между средним и высоким.

Но это еще не предел! Несмотря на то, что мы сохраняли изображение для web, тем не менее Photoshop оставил в файле много мусора, который только занимает лишнее место. А именно мета-данные. Но есть варианты, как от них избавиться.

JpegOptim

Крохотная программа (для ОС Windows так вообще 386Кб) без GUI, которая может очень многое. Разницы в её использовании на Linux подобных системах и Windows нет абсолютно никакой, работает она из командной строки.

Для Linux установить программу можно простой командой:

apt-get install jpegoptim

Ну а для Windows просто скачать.

И так, её использование и посмотрим, что она сможет сделать с теми тремя изображениями панды, которые есть.

Для оптимизации изображения необходимо выполнить команду:

jpegoptim koala.jpg

Соответственно, вместо koala.jpg должно быть нужное изображение.

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

jpegoptim *.jpg --strip-all

Эта команда оптимизирует все файлы в текущей папке, которые имеют расширение .jpg, и принудительно вырежет все мета-теги, которые только можно!

Оптимизируем коал, посмотрим что получится:

JPG Качество 30 (среднее) 
jpegoptim [OK] 109057 --> 107789 bytes (1.16%), optimized;
--strip-all [OK] 107789 --> 107607 bytes (0.17%), optimized;

JPG Качество 60 (высокое)
jpegoptim [OK] 218409 --> 217047 bytes (0.62%), optimized;
--strip-all [OK] 217047 --> 216865 bytes (0.08%), optimized;

JPG Качество 100 (наивысшее)
jpegoptim [OK] 779224 --> 778153 bytes (0.14%), optimized;
--strip-all [OK] 778153 --> 777971 bytes (0.02%), optimized;

Не стоит смотреть на проценты, так как это от общего веса картинки, соответственно размер вырезанного примерно одинаковый.

Это очень мало, скажете вы? На примере изображения разрешением 1024 на 768 это действительно слабо, но много ли на сайте таких изображений? А вот для маленьких это будет существенно. А когда маленьких изображений на странице в районе 10, то по -2Кб с 10 — это 20Кб. Одно лишнее изображение. А то и два. Экономия есть экономия.

А что с PNG?

OptimPng

Да, не буду оригинальным, OptiPng сжимает также без потери качества файлы формата png.

Для Linux:

apt-get install optipng

Использование точно такое же, подробно углубляться в процесс я не буду, сразу к результатам:

PNG 1,48 МБ (1 556 218 байт) -> OptiPng 1,44 МБ (1 518 719 байт);

Ого! А вот это уже сильно! А одну иконку крохотную в 2Кб с разрешением 64 на 64 этот крохотным монстр уложил в… 106 байт! Включая прозрачность.

Итог: Хотите быстрый сайт и свободное место на хостинге? Тогда сжимайте изображения со всей силой, которую дают вам эти маленькие, но в то же время незаменимые помощники!