Оптимизация картинок на сайте

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

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

Перед тем, как начинать процесс «сжимания» картинок, оцениваем скорость загрузки web-страниц и разбираемся в том, какие показатели мешают улучшать результаты. Поможет в этом сервис PageSpeed Insights. Если страница наберет более 85 из 100 баллов – это хороший результат и именно к такой цифре нужно стремиться.

Например, сейчас результат такой:

А после оптимизации:

Такой результат стал возможен благодаря использованию рекомендаций Google:

Формат PNG

Как оптимизировать картинки, если для их сохранения использован формат PNG? Для этого можно воспользоваться рекомендациями Google:

Если планируется только базовая оптимизация изображений, можно использовать любую программу для редактирования картинок: GIMP, Photoshop и т.д. Но, какая из них лучше? Узнать это поможет небольшой эксперимент. Берем неоптимизированное изображение в формате PNG весом 293 КБ:

Создаем две папки: «GIMP» и «Photoshop» и помещаем в них одну и ту же картинку.

Как выполняется сжатие рисунка, без потери качества, при помощи редакторов GIMP и Photoshop?

Результат получается таким:

Итог: Photoshop выполнил оптимизацию изображения лучше, чем GIMP.

Но, это не значит, что можно пользоваться только этими вариантами. Есть другие, не менее эффективные утилиты для сжатия картинок в формате PNG. Например, OptiPNG и PNGOUT. Результат их работы следующий:

Несмотря на то, что OptiPNG на 1 КБ проиграла Photoshop, весит сама программа всего 96 КБ, а это большой плюс. А вот PNGOUT превзошла своих «конкурентов» по всем параметрам:

Работа с программами

В первую очередь, нужно скачать утилиту OptiPNG или PNGOUT (а может и обе) с официальных сайтов. Затем скопируйте файлы .exe в папку: C:\Windows.

Чтобы «упростить» задачу, достаточно просто скопировать эти файлы из папки Windowsи разместить их ярлыки на рабочем столе. Для удобства ярлык OptiPNG можно сразу назвать opting-o7 (параметр максимального сжатия при котором сохраняется качество). Остается просто перенести нужные картинки на ярлык и подождать, пока программа их оптимизирует.

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

Поэтому, есть еще один вариант работы с утилитами. Создаем тестовый документ, открываем и прописываем туда код (корректно работает только на ОС Windows):

Сохраняем файл в формате .reg и в кодировке ANSI, запускаем его, соглашаемся со всеми действиями и готово. Утилиты интегрированы в оболочку Windows.

Как же осуществляется оптимизация картинок? Процесс происходит так: правой кнопкой мыши нажимаем на папке, в которой находятся не оптимизированные изображения в формате PNG (файлы другого расширения утилита не изменяет) и выбираем программу, при помощи которой будем сжимать картинки. Можно делать это двумя утилитами по очереди.

Затем открывается командная строка, в которой демонстрируется процесс оптимизации:

Формат JPEG

Чтобы сжать изображение формата JPEG, нужны инструменты Jpegtran или Jpegoptim. Конечно, можно использовать редакторы GIMP и Photoshop. Однако Jpegtran или Jpegoptim эффективнее справляются с задачей оптимизации, поэтому скачиваем и устанавливаем обе программы.

Настройка утилиты Jpegtran

Активирование программы Jpegtran методом внедрения в оболочку Windows– не совсем подходящий вариант для утилиты. Она не будет корректно функционировать, так как код (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) предназначен для сжатия веса только одной картинки, а не всех файлов в папке.

Это значит, что нужно использовать другой способ активирования утилиты. Jpegtran не обязательно размещать в папкеС:\Windows, а вот копию ее можно здесь сохранить. Размещаем программу jpegtran.exe в любой папке и переименовываем (для удобства) в !jpegtran.

Затем при помощи Notepad++ создаем файл в кодировке UTF-8 (без BOM) с расширением .bat и названием !start. В него помещаем этот код:

Чтобы оптимизировать картинки, необходимо оба файла jpegtran.exe и!start.bat закинуть в одну папке и запустить процесс сжатия, используя файл !start.bat:

Настройка программы Jpegoptim

Утилита Jpegoptim без проблем внедряется в оболочку Windows. Для ее активации необходимо дописать код в конце файла PMGoptim.reg (он уже создан ранее для утилит для картинок формата PNG):

Процесс оптимизации картинок при помощи данной программы прост: нажимаем левой кнопкой мыши на папку с изображениями и выбираем «Run jpegoptim».

Результат работы Jpegtran и Jpegoptim:

Online-сервисы

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

Однако online-сервисы при сжимании изображения ухудшают качество. Иногда всего на несколько пикселей, но искажения все же заметны. То есть размер изображений нас вполне может устраивать, а вот качество оставляет желать лучшего.