Давайте для начала разберемся, зачем вообще оптимизировать картинки на сайте:
- помочь пользователям воспринимать контент
- улучшить качество сайта "в глазах" поисковых систем
- получить дополнительный трафик из картинок
- ускорить скорость загрузки сайта
Теперь пройдемся подробнее по каждому из пунктов.
Контент сайта воспринимается не последовательно, а бегло, потому что пользователи в Инетернете сейчас вынуждены потреблять и фильтровать очень много информации. Внимание цепляется за акцентные места: картинки, заголовки, выделения.
Визуальное дополнение текста изображениями позволяет пользователям быстрее воспринимать контент, в том числе текстовый.
Картинки помогают 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
Сервисы для сжатия
Для оптимизации картинок можно использовать онлайн и десктопные приложения. Вот некоторые из них:
Онлайн-сервисы:
- Squoosh
- JpegMini
- ImageOptim
- Compressor
- TinyPNG
- TinyJPG
- Compressjpeg
- ImageOptimizer
- Kraken
- PunyPNG
- Compressnow
- OptimiZilla
- Imagify
- FileOptimizer
- Online interface
- pngquant
Приложения:
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кб
- Настройте ленивую загрузку
Комментарии (0)