Оптимизация изображений для сайта: как оптимизировать картинки

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

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

Низкая скорость загрузки страниц приводит к отказам (уходам пользователей с сайта). А поисковые системы при низкой скорости загрузки страниц могут не проиндексировать часть контента, что снижает релевантность страницы и, соответственно, её положение в поисковой выдаче.

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

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

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

На страницах может использоваться слишком много изображений, при этом они никак не помогают пользователям в решении их вопроса.

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

Для некоторых элементов веб-страницы можно использовать векторные изображения в формате svg.

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

Графические элементы в формате svg адаптивны, они остаются четкими при любом масштабировании. Создать такие картинки можно в текстовом редакторе и редактировать с помощью тега <svg>.

Оптимизировать и уменьшить вес svg графики можно с помощью решения SVGO.

SVGO (SVG Optimizer) – это консольное приложение для оптимизации векторной графики svg, которое очищает файлы svg от лишнего кода без ущерба отрисовки графики.

Растровые изображения – это изображения, состоящие из сетки пикселей (цветных точек).

Растровые изображения имеют следующие характеристики:

Каждый пиксель растрового изображения содержит в себе информацию о цвете и прозрачности (оттенок).

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

Как рассчитывается вес растровых изображений?

В браузере 256 оттенков на каждый канал цвета. Один канал занимает 8 бит. Пиксель состоит из 4 каналов и весит 32 бита или 4 байта.

Таким образом можно легко рассчитать вес файла.

Например, изображение размером 100*100 пикселей состоит из 100 000 пикселей.

1 пиксель весит 4 байта, соответственно изображение из 100 000 пикселей будет весить 400 000 байт или 390 кб (400 000 / 1024).

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

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

Снизить глубину цвета

Если изображение не требует широкой палитры оттенков, например 256 оттенков на каждый канал, сократите количество цветов до 256. Таким образом вес изображения будет уменьшен в 2 раза.

Применить дельта-кодирование пикселей

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

Уменьшить масштаб картинок

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

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

Если картинка не содержит мелких деталей и не подразумевает увеличение и масштабирование, используйте форматы JPG или JPEG.

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

WebP – формат изображений, разработанный Google. Такой формат использует алгоритм сжатия изображений, что позволяет снизить размер файла без потери качества.

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

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

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

Оптимальный вес изображения – 100-200 кб. Большие изображения в высоком разрешении могут быть весом 500-1 000 кб. В некоторых случаях картинки необходимо размещать в высоком разрешении, например фото товаров, где требуется увеличение изображения. Оптимальный вес таких файлов – до 3 мб.

Изображения весом более 3,5 мб не рекомендуется размещать на сайте. Наличие таких изображений может значительно снизить скорость загрузки страниц.

Проверить оптимизацию изображений и найти тяжелые изображения на сайте можно с помощью софта Screaming Frog.

Необходимо спарсить сайт через софт, перейти в навигационном меню справа во вкладку Images – All, отсортировать изображения по уменьшению размера.

Таким образом мы получим список всех изображений с сайта и их вес.

Оптимизируйте название файла изображения

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

Название необходимо прописать латиницей, а в качестве разделителя использовать тире.

Название необходимо прописать транслитом (можно использовать сервис «Транслит».

Содержимое атрибута title отображается при наведении курсора на изображение.

Правила заполнения атрибута title у изображений:

Атрибут alt у изображений – это атрибут html-тега <img>, который описывает содержания картинки. Атрибут alt становится отображается на странице сайта в том случае, если картинка не загрузилась.

Пример оформления атрибута в html-коде:

Изображения в html-коде размечаются тегом <img>.

После открытого тега указывается ссылка на изображение: src="image.png"

Далее необходимо указать атрибут alt: alt="Описание изображения"

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

Точных параметров по количеству символов в атрибуте alt нет. При этом рекомендуется использовать 3-5 слов, а общая длина атрибута – 75-80 символов. Это оптимальный размер описания изображения.

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

Если атрибут alt заполнено, то в случаях, когда изображения не загружаются, содержимое атрибута alt выводится вместо изображения в текстовом виде (изображение 1).

Если атрибут отсутствует, либо поле атрибута пустое, соответственно текстовое описание не выводится.

Поисковые системы и другие сервисы активно развивают поиск по картинкам. Оптимизация изображений и заполнение атрибута alt может улучшить ранжирование сайта в поиске по картинкам и привлечь дополнительный трафик.

Sitemap.xml – это файл, который сообщает поисковым системам о структуре сайта и о том, какие страницы и ссылки необходимо проиндексировать.

Sitemap.xml содержит в себе ссылки на актуальные страницы сайта, которые доступны для индексации и отдают 200 код ответа сервера.

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

При создании xml-карты для картинок рекомендуем настроить автоматическую генерацию карты сайта (чтобы при добавлении на сайт новых изображений они добавлялись в карту сайта). Также рекомендуем автоматически обновлять карту сайта раз в неделю, что позволит ускорить индексацию новых картинок.

Более подробно ознакомиться с форматом можно в Документации Google и Яндекс Справке.

Пример кода xml-карты сайта для картинок:

Compressor.io →

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

Imagecompressor →

Бесплатный онлайн сервис, с помощью которого можно изменить разрешение изображения.

Tinyjpg →

Бесплатный оптимизатор изображений, который позволяет сжимать картинки без потери качества. Сервис преобразовывает PNG изображения из 24 битных в 8 битные. Такой способ позволяет снизить вес картинки без потери качества.

Compressjpeg →

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

WebP Converter →

С помощью инструмента можно преобразовать картинки в форма WebP. WebP Converter позволяет снизить вес файла до 30% без потери качества.

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