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

О том, что на сайт должны загружаться только сжатые изображения и вообще их необходимо специально готовить для размещения на веб-странице, приходится говорить очень часто. В статье, посвященной скорости загрузки, тоже касалась этого вопроса, потому что оптимизация изображений очень влияет на важнейший показатель для сайта – скорость его загрузки, и иногда даже больше, чем скрипты и стили. Но если не подготовленный технически человек будет испытывать трудности с оптимизацией JS и CSS, то уменьшить объем картинок может даже ребенок. Можно сжать изображения онлайн без потери качества на множестве ресурсов. Мне привычен Tinypng, который оптимизирует изображения с расширением и png, и img. На их качество на выходе скорее может повлиять изменение размеров.

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

Нужный размер в формате png весил 107 килобайт, при сохранении его с расширением img вес стал 45 килобайт.

Теперь отправляем оба файла (для сравнения степени компрессии) в Tinypng и вот что получаем:

• Файл с расширением png весом 107 kb сжат на 69% и стал в результате весить 33,1 kb.
• Файл с расширением img весом 45 kb сжат всего на 44% и стал весить 26,9 kb.

Загружаем оптимизированные изображения на компьютер и публикуем на сайте.

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

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

Плагин WP Smush для оптимизации изображений

Палочкой-выручалочкой для меня на Вордпресс стал плагин WP Smush, который умудряется дожать и сжатые картинки (верхнюю сократил еще на 13%). Устанавливается обычным способом через добавление и поиск плагинов в административной панели. После активации можно сразу запустить оптимизацию всех имеющихся изображений. В зависимости от объема накопившейся для плагина работы, процесс может занять несколько часов.

Как заменить изображения на сайте

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

И еще один момент, касающийся ширины и высоты изображений: если такой движок, как WordPress, позволяет форматировать уже загруженный снимок (из 3000*2000 px получать, например, требуемые 600*400), делать этого не стоит. Все варианты допустимых форматов замусоривают сайт. Удалять потом лишнее, чтобы очистить место на диске, куда сложнее и рискованнее, нежели подготовить сразу нужный размер.

Как заменить изображения на хостинге

Если мы скачиваем архив оптимизированных файлов, предложенный developers по окончании проверки, открываем его и обнаруживаем папку с image.

Ее нужно извлечь и перенести в удобное место на компьютере. На хостинге находим папку с загруженными изображениями и по одному заменяем на сжатые (тем, у кого опыта нет, поступать иначе не советую). Для элементов, используемых в оформлении сайта, путь указан в результатах проверки на developers. Показывается при наведении курсора на выбранную строку.