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

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

С чего начать?

Выявить проблемы на сайте помогут:

• PageSpeed — специальный сервис от компании Google, с помощью которого можно провести полную диагностику  ресурса как для ПК, так и для мобильных устройств. 
• WebPageTest - профессиональный сервис для глубокого анализа сайта для выявления проблем и  последующей оптимизации

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

1. Формат изображений 
2. Размер изображений 

Устранение данных проблем значительно повысит оценку производительности (на 20 и более пунктов для сервиса PageSpeed), поэтому разберем их подробно.

Размер изображений

Размер изображения в объяснении не нуждается: чем больше вес, тем дольше время загрузки. Как можно уменьшить вес изображения?

Вручную с помощью редакторов
Для этого понадобится графический редактор (Photoshop или его аналоги): 
• Уменьшить его разрешение 
• Уменьшить качество изображения при сохранении 
• Стараться использовать формат JPG с качеством 75 
• Для иконок и логотипов использовать векторный формат хранения 
• Минимизировать насколько это возможно использование PNG, так как они меньше всего поддаются сжатию 

С помощью готовых сервисов
Мы подобрали несколько проверенных онлайн сервисов, которые качественно сжимают изображения без ощутимой потери качества: 
• https://compresspng.com/ru/ 
• https://www.jpeg.io/ 
• https://tinypng.com/ 
Попробуйте и вы удивитесь, сколько можно сэкономить объема, при этом визуально вы практически не заметите разницы. 

CDN
Еще один хороший вариант ускорения - перенаправить загрузку изображений через CDN - систему быстрой доставки контента.  Входящие в состав CDN cерверы географически располагаются таким образом, чтобы сделать время ответа для пользователей сайта/сервиса минимальным. 
• Akamai 
• G-Core Labs 
• CloudFront 
• Cloudflare

Формат изображений

Сокращение размера важно, но также сервисы рекомендуют использовать современные форматы изображений для сайтов.

Что такое современный формат? Под современным форматом изображения подразумевается формат WebP - специальный формат, разработанный компаний Google. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки до 20-35% без видимых потерь в качестве.

Есть множество сервисов, офлайн и онлайн, которые помогут вам конвертировать изображения из одного формата в другой, но при этом нужно иметь в виду следующие моменты:

• Не все браузеры поддерживают данный формат и перед выводом изображения в формате WebP необходимо сделать проверку, то есть придется хранить 2 копии одной и той же картинки
• Огромный объем работы с уже существующими сайтами, особенно новостными, на перебор которых уйдет целая вечность.

Как правильно оптимизировать изображения

Под понятием «правильно» мы понимаем оптимальное соотношение затраченных времени и средств с достигнутым результатом. Наши рекомендации: 

• Если объем изображений небольшой, сжать изображения с использованием сервисов, если картинок много и есть техническая возможность, сжать изображения с помощью автоматических скриптов и плагинов
• Если места мало, чтобы не хранить 2 варианта одного и того же изображения, использовать плагины или скрипты для автоматического определения возможности использования WebP и конвертации изображений “на лету” без их хранения.  Минус такого метода: виртуальные изображения не кэшируются браузером.
• Если места на хостинге достаточно, использовать скрипты для автоматической генерации и сохранения копии изображения в правильном формате. Плюс метода в том, что сохраненные изображения кешируются браузером (то есть загружаются только один раз и сохраняются в хранилище браузера), а это еще один плюс к быстрой загрузке.
• Подобрать и настроить CDN для загрузки изображений через сеть быстрой доставки контента
• Настроить хостинг / сервер для эффективного кэширования 

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