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

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

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

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

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

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

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

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

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

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

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

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

Вручную с помощью редакторов

Для этого понадобится графический редактор (Photoshop или его аналоги):

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

С помощью готовых сервисов

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

Попробуйте и вы удивитесь, сколько можно сэкономить объема, при этом визуально вы практически не заметите разницы.

CDN

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

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

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

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

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

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

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

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

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

  • Если объем изображений небольшой, сжать изображения с использованием сервисов, если картинок много и есть техническая возможность, сжать изображения с помощью автоматических скриптов и плагинов

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

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

  • Подобрать и настроить CDN для загрузки изображений через сеть быстрой доставки контента

  • Настроить хостинг / сервер для эффективного кэширования

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



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