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

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

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

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

Выявить проблемы на сайте помогут:
  • 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 лет опыта работы в сфере Веб, мы поможем сделать анализ вашего сайта, составить список работ и разбить его на удобные для вас этапы.  Мы качественно и профессионально ускорим ваш сайт и дадим гарантию на выполненные работы. 

Так же может быть интересно