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

Вкратце, зачем вообще оптимизировать картинки на сайте:

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

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

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

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

Картинки помогают 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

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

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

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

Приложения:

Advanced JPEG Compressor

Sitemap

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

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

Итого

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

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