Давайте для начала разберемся, зачем вообще оптимизировать картинки на сайте:

  • помочь пользователям воспринимать контент
  • улучшить качество сайта "в глазах" поисковых систем
  • получить дополнительный трафик из картинок
  • ускорить скорость загрузки сайта

Теперь пройдемся подробнее по каждому из пунктов.

Контент сайта воспринимается не последовательно, а бегло, потому что пользователи в Инетернете сейчас вынуждены потреблять и фильтровать очень много информации. Внимание цепляется за акцентные места: картинки, заголовки, выделения.

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

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

При этом изображения должны соответствовать современным требованиям к формату и весу. Во-первых, это оценивается поисковыми системами, во-вторых, долгая загрузка изображений может негативно повлиять на пользовательский опыт.

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

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

Основные форматы изображений для сайтов:

  • JPEG
  • PNG
  • GIF
  • SVG
  • WEBp

JPEG, PNG, GIF и WEBp — это растровые форматы, а SVG — векторный.

Растровые изображения состоят из пикселей. Из-за этого при приближении картинки становятся заметны неровные края. Посмотрите, как это заметно при сильном приближении:

Край растрового изображения при увеличении

JPEG сжимает с потерями и не поддерживает прозрачность. PNG сжимает без потерь и поддерживает прозрачность.

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

Край векторного изображения при увеличении

WEBp — это прогрессивный формат от Google, который обеспечивает лучшее соотношение сжатия и качества по сравнению с JPEG и PNG, но поддерживается не всеми версиями браузеров, поэтому его желательно использовать только в формате альтернативного выбора (разберем позже). Проверить поддержку можно в сервисе caniuse.com.

В итоге — для обычных реалистичных изображений подойдет JPEG, для графики — PNG, для анимированных — GIF, для иконок — SVG.

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

Это имеет смысл делать в статьях, товарах, новостях, чтобы получить наилучшее качество картинок с наименьшим размером изображения. А если нужно просто добавить иконки, можно ограничиться SVG форматом.

Размер

В идеале картинка должна быть такого же размера, в каком она будет отображаться на сайте. Если изображение занимает по ширине в превью статьи 400px, а в самой статье 1200px — в превью нужно вывести ее уменьшенную версию. Проверить это можно прямо в браузере в инструментах разработчика:

Просматриваем информацию о картинке в инструментах разработчика

Большинство CMS позволяют настроить автоматическую оптимизацию размера, так как вручную это займет слишком много времени.

Также есть смысл выводить разные размеры для разных устройств: мобильных, планшетов, десктопов. Например, зачем пользователю с мобильного, где картинка займет 480px в ширину, загружать полную версию для десктопа шириной 1200px?

Еще нужно учитывать плотность пикселей экрана — на Retina и 4к картинка должна загружаться в лучшем качестве, чем на обычных FHD мониторах.

Чтобы реализовать это технически, используют атрибут picture или тег img с атрибутом srcset. Выглядит это примерно так:

<picture>
    <source 
        media="(max-width: 600px)"
        srcset="image-500.jpeg"
        type="image/jpeg">
    <img 
         src="image-1000.jpeg" 
         alt="Описание картинки"
         title="Заголовок">
</picture>

В теге picture указываем изображение по умолчанию — img, на случай если браузер не поддерживает заданные нами альтернативы. В тегах source добавляем несколько вариантов изображения с разными условиями, и браузер сам выбирает, какой лучше загрузить.

В примере выше браузер загрузит картинку шириной 500px для экранов до 600px, и 1000px для экранов свыше 600px. Таким образом, уменьшится трафик на мобильных устройствах, где скорость загрузки критичнее, чем на компьютерах.

Теперь давайте добавим формат WEBp и учтем экраны с большей плотностью пикселей:

<picture>
    <source 
        media="(max-width: 600px)"
        srcset="image-500.webp, image-1000.webp 2x"
        type="image/webp">
    <source 
        srcset="image-1000.webp, image-2000.webp 2x"
        type="image/webp">
    <source 
        media="(max-width: 600px)"
        srcset="image-500.jpeg, image-1000.jpeg 2x"
        type="image/jpeg">
    <img
         src="image-1000.jpeg" 
         srcset="image-2000.jpeg 2x"
         alt="Описание картинки"
         title="Заголовок">
</picture>

Если браузер поддерживает формат WEBp, он выведет один из вариантов в этом формате в зависимости от ширины окна просмотра и плотности экрана. Если WEBp не поддерживается — покажет адаптивный JPEG. Если не поддерживает адаптивность в принципе — возьмет файл из атрибута src тега img. Таким образом, мы учли почти все возможные варианты адаптации картинки под устройства.

Максимально можно подготовить такой набор:

  • для мобильных, планшетов и десктопов
  • WEBp и JPEG/PNG (на случай, если WEBp не поддерживается)
  • плотность обычная, 2x и 3x

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

Вес

Нужно найти баланс между качеством и весом. На мой взгляд, корректным является качество сжатия 90%, при том что картинка соответствует размеру занимаемого пространства на экране.

Вес картинки не должен превышать 200-300 килобайт для полноценной широкой иллюстрации в статье. Превью можно выводить в меньшем качестве, в пределах 30-50 килобайт.

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

Релевантность

Картинка должна соответствовать описанию, окружающему тексту и желательно в целом контенту страницы.

Это оценивается поисковыми системами и влияет на восприятие пользователя. Не надо вставлять картинку ради картинки.

Уникальность

Поисковые системы также оценивают уникальность картинок. Кроме того, нежелательно использовать изображения, защищенные авторским правом.

Хотя в СНГ за этим следят не очень активно, в последнее время активизируется контроль и целенаправленное вылавливание любителей халявы, потому что за использование чужих картинок можно предъявить иск на приличную сумму.

Чтобы проверить уникальность картинок, воспользуйтесь поиском по картинкам в Яндексе, Google или сервисе TinEye.

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

Подобрать картинки, не защищенные авторскими правами, можно в том же Google, выбрав в фильтре лицензию Creative Commons.

Названия файлов

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

Неправильно:

  • ❌ h13fdf9923.jpg
  • ❌ оптимизация картинок на сайте.jpg

Правильно:

  • ✅ optimisacia-kartinok-na-sayte.jpg

Для транслитерации можно использовать сервис be1.ru, либо установить плагин для конкретной CMS, который будет менять названия автоматически при загрузке файлов.

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

  • тест -> %D1%82%D0%B5%D1%81%D1%82

Title и Alt

Поисковые системы рекомендуют заполнять стандартные атрибуты тега img — alt и title.

Тег alt нужно заполнить описанием картинки — это также будет влиять на ранжирование картинок в поиске. Если картинка не загрузилась пользователю, текст тега alt отобразиться вместо картинки. Также он будет воспроизводиться программами чтения с экрана.

Тег title отображается при наведении курсора на картинку, поэтому в нем можно разместить полезную для пользователя информацию.

Сжатие на сервере

Для оптимизации доставки файлов с сервера на устройство пользователя можно настроить GZIP сжатие файлов на стороне сервера. Сервер сжимает картинку, отправляет сжатый файл, а браузер получает его, распаковывает и рендерит начальное изображение.

Настроить сжатие можно у некоторых хостеров прямо в панели управления, у некоторых — в настройках веб-сервера Apache через файл .htaccess.

Настройка сжатия в панели Webhost1.ru

Настройка сжатия в файле .htaccess

Сервисы для сжатия

Для оптимизации картинок можно использовать онлайн и десктопные приложения. Вот некоторые из них:

Онлайн-сервисы:

Приложения:

Sitemap

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

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

Lazy Load (ленивая загрузка)

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

Но мы можем загружать их по мере попадания в зону видимости пользователя. Такой метод называется Lazy load - ленивая загрузка.

Сначала источник картинки выводится в атрибуте data-src. Специальный скрипт отслеживает скролл, и если картинка близка к области видимости — подставляет ссылку из data-src в src. Современные браузеры понимают этот атрибут и индексируют файлы из него. Дополнительно можно указать ссылку на оригинальный файл в Schema.org микроразметке — это увеличит шансы корректной индексации.

В современных браузерах есть специальный атрибут loading=lazy, который работает аналогично ленивой загрузке на JS. Но он поддерживается не во всех браузерах.

Но обычно это реализуется специальными скриптами на JavaScript, например этот на github. Принцип работы простой — добавляем нужным изображениям класс lazyload и подключаем скрипт к странице.

Итого

Для оптимизации картинок на сайте следуйте следующим советам:

  • Используйте подходящие форматы
    • SVG — вектор, иконки
    • PNG — графика, прозрачность
    • JPEG — реалистичные
  • Используйте WEBp
  • "Страхуйте" WEBp альтернативным JPEG/PNG
  • Следите чтобы размер изображения соответствовал фактическому
  • Генерируйте отдельные картинки для превью
  • Для тяжелых картинок делайте превью и увеличение по клику
  • Заполняйте ALt и Title
  • Называйте файлы транслитерацией без пробелов
  • Добавляйте подписи к изображениям
  • Следите за релевантностью
  • Проверяйте уникальность
  • Не нарушайте авторские права
  • Задайте адаптивность под разные устройства
  • Задайте адаптивность под разные плотности экрана
  • Настройте сжатие на сервере
  • Соблюдайте вес картинки в пределах 300кб
  • Настройте ленивую загрузку