Оптимизация изображений: сжатие PNG, JPG, GIF
Опубликовано: 01.09.2018
Рассмотрим инструменты для оптимизации и сжатия изображений PNG, JPG, GIF и генераторы css-спрайтов. Предыдущие меры по увеличению скорости загрузки сайта : сокращение кода, сжатие gzip, включение кэша для браузеров принесли плоды, что показала проверка в PageSpeed. Оптимизация изображений принесла ещё один бал в общую копилочку:
Не исправленными остались только внешние ресурсы. Итак, программа FileOptimizer 6.50.302, кроме оптимизации изображений без потери качества , позволит сжать файлы html, css и др. форматов. Это бесплатная программа, с чрезвычайно простым и понятным интерфейсом. Она используется для пакетного сжатия изображений, и показала отличные результаты.
Сжатие картинок #jpg для #оптимизации загрузки стартовой страницы
Для её использования требуется знать всего две кнопки: открыть файлы (1) и начать оптимизацию (2). Причём добавлять файлы можно не по одному, а сразу много, выделив их в окошке открытия, есть поддержка перетаскивания. Кнопка (3) ведёт к настройкам: можно задать, например, степень сжатия css-файла.
Как уменьшить вес картинки Сжатие картинок
Программа заменяет оригинальные файлы на оптимизированные, а оригиналы отправляет в Корзину - позаботьтесь о копиях, если нужно. Многие подобные инструменты, которые должны производить сжатие без потери качества, на практике таковыми не оказываются. Убедился в этом, апробировав несколько аналогичных программ, но к FileOptimizer это никак не относится.
Я вообще сделал копию локального сайта и использовал её в качестве полигона. Вначале оптимизировал 10 изображений PNG и получил средний показатель сжатия 33%. Затем тщательно сравнил в браузере страницы с оптимизированной графикой и оригинальные. Результатами остался вполне доволен: визуального отличия не заметил вовсе.
Далее действовал смелее, и выяснилось, что маленькие по размеру PNG сжимаются ещё больше. Для эксперимента оптимизировал несколько JPG и получил результат 8%, а для GIF - 45%, правда, последние были все крохотными. После этого, оптимизацию оставшихся изображений выполнил за один раз. Результирующий итог для всей графики сайта: в оригинале было 4.71 Мб - стало 3.27 Мб, сжатие составило 31% - весьма впечатляющие цифры.
Удобно в программе ещё и то, что для каждой позиции выводится процент предполагаемого сжатия, а результирующая разница для всего пакета - внизу, слева от индикатора процесса. Скачать FileOptimizer 6.50.302 можно по ссылке - если она, со временем, будет битая, то воспользовавшись поиском, найти программу не составит труда.
Я сознательно не рассматриваю инструменты с командной строкой, выбрав только те, у которых современный интерфейс. Приведу, на всякий случай, онлайн сервисы для оптимизации изображений с высокими показателями сжатия: TinyPNG.org и PunyPNG.com, но у них лимиты на количество и размер картинок, если пользоваться бесплатно. Перейдём ко второму этапу оптимизации графики - генерации css-спрайтов.
1. Первым будет генератор css-спрайтов SpriteMe.org - очень мощная и удобная онлайн штука. Генератор автоматически определяет фоновые изображения, которые стоит объединить в css-спрайты. Отмеченную на скриншоте ссылку нужно перетащить на панель закладок браузера, а затем задействовать на вкладке с нужным сайтом:
Работоспособность генератора опробовал в двух браузерах. В IE 8 нет поддержки перетаскивания: в этом случае, просто скопируйте ссылку (клик правой кнопкой мыши - «Копировать ярлык») и вставьте в папку «Панель избранного» (через меню «Избранное»). С Chrome всё гораздо проще, - должно работать и в других «нормальных» браузерах, - как сказано в справке сервиса.
Перейдём к рабочей панели инструмента. Под указателем (1) на следующем скриншоте находятся два окошка: генератор предложил сделать два спрайта - далее об этом подробно. Нижнее окно (2) содержит список фоновых изображений, которые не могут быть объединены в спрайт. При наведении курсора мыши на любую строчку, видим окошко визуализации (3):
Чтобы сделать спрайт нужно нажать ярлычок (4): в окне останется одна строчка - объединённое изображение, которое можно будет посмотреть в окне визуализации. А скачать готовый спрайт можно через ярлычок (5): само изображение и txt-файл с кодом css. Если в списке окошек (1) присутствуют лишние img - перетащите их в окно (2). Это могут быть img внешних ресурсов: счётчиков посещаемости, кнопок соцсетей.
Гипотетически все фоновые картинки могут быть объединены в один единственный css-спрайт, на практике их, как правило, будет больше. Тут играет роль значение свойства background-repeat для конкретных элементов. Если все значения no-repeat, т.е. фоновые картинки не повторяются по горизонтали и вертикали, например: иконки, то их собрать в один спрайт проще.
Исходной точкой координат для background-position служит левый верхний угол. Если спрайт (вертикальный) состоит из иконок 16 на 16 px, то код css будет следующим, при условии, что между иконками нет промежутков, тогда нужно учитывать и их:
элемент1{background:url(../images/sprites.png) 0 0 no-repeat} элемент2{background:url(../images/sprites.png) 0 -16px no-repeat} элемент3{background:url(../images/sprites.png) 0 -32px no-repeat} ...Вам необходимо будет изменить первоначальный css-код, скорее всего, это будет касаться только имя файла и координат. Если фоновые изображения имеют значения repeat-x, repeat-y или repeat, то количество спрайтов увеличится - у меня их получилось два. Для оперативной оптимизации сервис SpriteMe подходит как нельзя лучше.
Исходные файлы для css-спрайта были в формате PNG и GIF, а объединённое изображение - в PNG. Если по каким-нибудь причинам вам не удалось решить эту задачу, то коротенько представлю ещё пару генераторов. Выбрал я их из десятка похожих за более-менее простой интерфейс и отсутствие заморочек. Хотя они англоязычные, но разобраться с их инструментарием несложно.
2. Spritepad (wearekiss.com/spritepad) - автоматики здесь нет, кроме генерации самого спрайта. Добавлять изображения надо вручную, есть поддержка перетаскивания. Сетка поможет разместить img, а координаты в коде меняются в реальном времени, не пугайтесь длинных дробей - их потом нужно округлить до целых чисел:
3. Stitches (draeton.github.io/stitches/) - пользоваться этим генератором ещё проще. «Open» - открыть, можно сразу много файлов, или перетащить. «Clear» - очистка рабочего поля генератора. «Settings» - настройки во вкладке справа, там же можно будет загрузить готовый спрайт и код, если нажать «Downloads».
Объединённые изображения, полученные спрайты, тоже желательно оптимизировать (сжать).