Img диета

Процедура с подготовкой материала для дизайнеров иногда становится мучением. А перейдя из дизайнеров в стан фронтэндеров и поработав немного с оптимизацией сайтов, я стал очень щепетильно относиться к этому вопросу.

Быстрые VPS на SSD хостинг от FastVps.ru

Зачастую дизайнеры, сохраняя материал, выкручивают максимальное качество — это не всегда хорошее решение. Чем меньше весят img — тем быстрее грузится сайт. Меньше img — меньше трафика, меньше нагрузка на сервер — все работает быстрее и посетители довольны. Я не буду вдаваться в глубокую теорию, приведу практические примеры из моего опыта подготовки:

  • в PS мой алгоритм быстр и прост: save for web → галка Progressive → поиграть ползунком качества с 50−70% → изменение разрешения до 500–1440px в зависимости от ситуации, куда будет поститься. Таким же принципом настраивается action с качеством 65-70 (беспроигрышный вариант), если материала много;
  • из онлайн сервисов мне дико полюбился Tinypng. Очень крутой инструмент оптимизации как JPEG, так и PNG с хорошим сжатием без заметных потерь в качестве. Если изображение достаточно крупное, оптимизация происходит до 70-80%. Иногда я впадаю в крайность и совмещаю PS и эту штуку, правда доиграться легко, можно попасть на качество. Из похожих проектов: Jpegmini, Сompressor. А для генерации baseurl смело открываем Duri;
  • для Альфреда есть плагин под простым названием Image Optimization от товарища ramiroaraujo. Честно говоря, серьезными результатами не блещет, но спасет, если необходимо быстро сжать кучу изображений и лень заморачиваться с action для PS;
  • для WordPress советовать не буду, но на Losko мы используем WP Smush, пробовали EWWW Image Optimizer — не подошел. За то, что плагин самостоятельно работает в фоновом режиме и не требует лишних действий, ставлю ему плюс. А вот результат оптимизации — не айс.

Нюансы

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

PNG хорошо подходит в случае рисунков с прозрачностью и полупрозрачностью, изображений с резкими переходами цвета, когда необходимо повышенная точность полноцветных изображений. PNG8/PNG24 выбираю опираясь только на размер.

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

Кто хочет серьезно вникнуть в этот вопрос, еще в далеком 2006 Сергей Чикуенок в студии Лебедева подробно расписал о работе с изображениями.