Эльмира
14 июня 2012

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



Существует множеcтво библиотек, оптимизирующих картинки — Imagemagick, Pngout, Optipng, Pngrewrite, Exiftool, Advpng, Jpegtran, Gifsicle, Pngnq, Defluff, Pngcrush, Jpegoptim, Jpegrescan. А у каждой библиотеки множество параметров и алгоритмов для разных случаев: этой картинке почистить прозрачные области и понизить количество цветов, той — изменить битность каналов и включить чёрно-белый режим...

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

Меня выручает программа Имиджоптим, она сама анализирует картинки и выбирает лучший способ оптимизации. Под капотом всё те же открытые библиотеки, перечисленные выше:

После всех преобразований изображение на выходе визуально не отличается от исходного. Тут важно понимать, что за исходник отвечаете вы — большой многоцветный ПНГ не превратится в джипег, а у джипега качество не понизится со 100 до 85.

Какими будут начальные изображения, решать вам. Если вы блогер и у вас куча фоток по 1000 пикселей в ширину, берите 51-й джипег. Продаёте дорогую технику и хотите «вау-эффекта» — берите ПНГ, какого бы размера и цветности он ни был. Эпл же не стесняется выкладывать картинки по полмегабайта:

Отечественная альтернатива без графического интерфейса — Имго

Чем дальше, тем меньше нужно бояться больших картинок. Интернет-каналы толстеют, а более чем 5-мегапиксельные экраны уже реальность. Но это не значит, что можно совсем забыть о пользователях с медленным интернетом. И в любом случае нельзя отдавать посетителям «грязные» файлы с ненужной метаинформацией и цветовыми профилями.

Кстати, после Имиджоптима эта картинка похудеет на 35 килобайт.

А в отдельных случаях стоит побороться за байты и в ручном режиме.

Приглашаю уважаемых советчиков поделиться своими способами сжатия картинок.

Канвас как способ оптимизации графики


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться

Комментарии

Михаил Васильев
14 июня 2012

Я при верстке всегда стараюсь «сэкономить» каждый байт. Джипеги, как писал выше Артём, начинаю смотреть с качества в 51 пункт и двигаю либо выше, либо ниже, смотря на сколько критичны потери. Если в изображении нет прозрачных областей и мало цветов(не больше 256), пробую сохранять в GIF или же PNG-8 — порой это дает ощутимый эффект. Иногда, (особенно в шапках или подвалах сайтов с большим количеством графики) вместо разделения изображений на слои с прозрачными областями, предпочитаю вырезать большой (по ширине и высоте) джипег — он все равно будет весить меньше, чем несколько ПНГ.

Антон Кричевский
14 июня 2012

А для Виндоуса аналог есть?

Артём Сапегин
14 июня 2012

Несчастных пользователей Виндоуса может спасти Пикчербивер: https://github.com/sapegin/picturebeaver Делает всё то же самое, но без красивого интерфейса.

Евгений Неверов
14 июня 2012

Собственно, отвечая на желание автора: «чтобы много красивых картинок на сайте быстро загружались», хочу заметить, что размер — это ещё не всё.

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

Например, я на своём сайте с очень большим количеством картинок добавил четыре поддомена: cs1.site.ru, cs2.site.ru, cs3.site.ru и cs4.site.ru, и сделал маленький скрипт, который адресу каждой картинки на сайте приставляет один из этих четырёх доменов. Благодаря этому теперь браузер клиента может грузить картинки сразу в восемь (четыре разных домена по два соединения) потоков одновременно.

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

В целом же, рекомендую обратиться к книге Николая Мациевского «Разгони свой сайт. Методы клиентской оптимизации веб-страниц» (http://www.ozon.ru/context/detail/id/4400714/) или (его же, в соавторстве) «Реактивные веб-сайты. Клиентская оптимизация в алгоритмах и примерах» (http://www.ozon.ru/context/detail/id/5322041/) — в обеих книгах описано множество методик и примеров оптимизации скорости загрузки сайтов.

Первую книгу совершенно свободно можно взять тут: http://speedupyourwebsite.ru/books/speed-up-your-website/

Денис Братчук
14 июня 2012

Совершенно согласен с тем, что размер изображений — это ещё далеко не всё. Важны и размер, и количество (а мелкие картинки можно объединять в спрайты), и место их размещения, и даже веб-сервер, который эти картинки отдаёт (почему бы не использовать для статики Нджинкс вместо Апача?). На скорость влияет также то, изменяется ли размер картинки в ХТМЛ-коде, и вообще — указан ли он в теге IMG.

Рекомендую использовать GTmetrix (http://gtmetrix.com/). Он проверит вашу страницу, даст рекомендации с приоритетами. Для ленивых даже предоставит уже оптимизированные изображения.

Константин Барабанов
14 июня 2012

ImageOptim — отличный. Только совет: прогоняйте его по несколько раз — часто это помогает победить ещё некоторое количество байт.

Максим Козаченко
14 июня 2012

Для оптимизации изображений иногда пользуюсь сервисом http://punypng.com/

Илья Страйков
14 июня 2012

Тем не менее о пользователях с медленным интернетом надо бы уже начать забывать. Время, потраченное на оптимизацию картинок, можно тратить на более нужные вещи.

Глеб Великанов
14 июня 2012

Чем плоха веб-сохранялка Фотошопа?

Антон Анисимов
14 июня 2012

Для оптимизации изображений на Виндоус использую Риот: http://luci.criosweb.ro/riot/

Среди всех оптимизаторов самый лучший.

Денис Талала
14 июня 2012

Есть консольный скрипт ImageCatalyst (http://habrahabr.ru/post/137725/), он оптимизирует картинки сильнее, чем ImageOptim, вот только приходится специально для него держать виртуальную машину с Виндоус.

Евгений Неверов
15 июня 2012

Кстати, по оптимизации джипега есть интересная серия статей на сайте студии под авторством Сергея Чикуёнка: http://www.artlebedev.ru/tools/technogrette/img/jpeg-1/

Арсений Форштретер
16 июня 2012

Для png под Windows есть, например, простой и удобный PNGGauntlet: http://pnggauntlet.com/

Роман
15 июля 2012

Недавно наткнулся на это сервис: http://tinypng.org/ (после которого картинка с макбуком похудела до 125 килобайт)


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1




Недавно всплыло

Как написать заказчику, что я установлю модуль на его сайт после окончательной оплаты, и при этом не обидеть его? 2 Собеседница психует и кидает трубку. Причём до этого дама была вполне адекватной, и мы нормально работали 1 Как флексить. Отступить от идеала 2 Расскажите об управляемости. Домашнее задание 4