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

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

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

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

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

С другой стороны, картинки увеличивают вес веб-страницы и замедляют скорость ее загрузки. Если сайт «тормозит», есть риск, что пользователь просто закроет вкладку. Получается, низкая скорость загрузки увеличивает показатель отказов (от англ. bounce rate). Это процент посетителей, которые просмотрели всего одну веб-страницу, после чего закрыли сайт, не выполнив никаких других действий.

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

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

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

Технические характеристики для оптимизации изображений

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

Размер, разрешение и вес

Размер изображения — это его длина и ширина, измеряется в пикселях (px).

Разрешение изображения — количество пикселей (точек), из которых оно состоит. Измеряется в количестве пикселей на дюйм (dpi).

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

Размер, разрешение и вес изображения

Как понять, каким должен быть размер картинки на сайте? Чтобы веб-страница смотрелась аккуратно, старайтесь размещать на ней изображения в схожих пропорциях. Например:

• 1:1 (квадрат с ровным сторонами);
• 4:3 (вертикальный прямоугольник);
• 3:2 (простой прямоугольник);
• 16:9 (горизонтальный прямоугольник).

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

В блоге Craftum изображения выровнены по ширине текста

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

Что касается оптимизации картинок, можно ориентироваться на следующие параметры:

• Вес: до 200-300 килобайт. 
• Размер: до 1000 пикселей по каждой стороне. Например, 600х900 пикселей. 
• Разрешение: 300 dpi.

Формат

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

• JPEG — самый популярный формат, его используют для фотографий и иллюстраций. 
• PNG — подходит для картинок с прозрачным фоном. Поскольку весит он довольно много, для обычных изображений его используют редко. Только в тех случаях, когда важно передать все мелкие детали на картинке и оттенки цветов.
• GIF — в этом формате сохраняют анимированные изображения.
• SVG — используют для векторной графики, например, для иконок и логотипов. 

Есть еще один формат, про который стоит сказать отдельно — это WEBP. Он считается более современным и весит меньше JPEG и PNG при одинаковых размерах изображений.

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

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

Конечно, можно найти красивые, а главное бесплатные картинки на стоках. Однако велика вероятность, что они уже используются на других сайтах. Поисковые системы не любят дублированный контент и плохо ранжируют веб-ресурсы, которые копируют изображения из других источников. Google и Яндекс могут расценить это как плагиат, «наказать» вас и вовсе не показывать ваш сайт пользователям.

SEO-параметры для оптимизации изображений

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

Атрибуты title и alt

Добавляя картинки на сайт, обязательно заполняйте их метаданные. Это положительно сказывается на ранжировании сайтов, помогает изображениям попадать в раздел «Картинки» в поисковиках и привлекать оттуда дополнительный трафик.

Картинки по запросу «сапоги зимние женские 2023». Среди них можно заметить фотографии товаров разных продавцов на Wildberries и AliExpress

Какие метаданные есть у картинок?

Title — название изображения. Оно отображается, когда пользователь наводит курсор на картинку. 

Пример — title изображения

Title должен быть максимально коротким и содержательным. Оптимальная длина — 3-5 слов. Названия вроде «фото 1» или «картинка 354» не подходят. Они не несут никакой информации для пользователей и поисковиков.

Alt — текстовая альтернатива изображения. Другими словами, его описание. Оно отображается на сайте в том случае, если картинка не загрузилась. Его задача заключается в том, чтобы объяснить человеку, что было изображено на фотографии. Кроме того, alt предназначен для пользователей со слабым зрением. Поисковик может зачитать его вслух. 

Оптимальная длина alt — 5-6 слов, до 125 символов. Напоминаем, поисковики не любят копипаст, так что этот атрибут не должен дублировать title.

Ключевые слова в названии  

Чтобы облегчить задачу поисковикам, в названии файла и title изображения можно использовать «ключи» — слова, которые отражают тематику веб-страницы. 

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

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

Корректный URL-адрес изображения

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

Дело в том, что многие CMS (от англ. content management system — система управления контентом) не поддерживают кириллицу. Поэтому в URL вместо «кроссовки.jpg» отобразится что-то вроде этого: «%D1%87%D0%B0%D0%B9%D0%BD%D0%B8%D0%BA». Если назвать картинку «krossovki.jpg», никаких проблем в адресной строке не возникнет.

С пробелами ситуация аналогичная. В URL строке он будет закодирован с помощью такого обозначения — «%20%». Чтобы этого избежать, подпишите файл не «krossovki jenskie.jpg», а «krossovki-jenskie.jpg».

Помимо этого в названиях файлов лучше избегать использования спецсимволов: %, <, >, #, {, }, ^, |, \. Их используют в технических целях, например, как разделители в URL, поэтому они тоже будут закодированы.

Подпись при размещении на сайте

Title и alt — атрибуты изображения, которые отображаются на сайте в особых случаях. Например, если картинка не загружается. 

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

 

Подпись к иллюстрации в статье «Как зарабатывать на фрилансе: с чего начинать и как продолжать»

Микроразметка и карта сайта 

Чтобы картинки с сайта отображались в поиске, они должны проиндексироваться. В этом помогает карта сайта для изображений (Image sitemap XML). Она содержит в себе ссылки на все фотографии и иллюстрации, размещенные на веб-ресурсе.

Создать XML-карту для картинок можно вручную, если вы владеете знанием HTML-кода, или с помощью сервиса Free image sitemap generator.

Пример sitemap для изображений. Источник: liveopencart

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

Изображения по запросу «стул детский» с фильтром «покупки»

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

Расширенный сниппет карточки товара на Ozon

Чтобы сделать микроразметку, нужно изучить shema.org — это стандарт, с помощью которой можно систематизировать контент в HTML.

Как ускорить загрузку изображений

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

Чтобы не терять трафик таким образом, нужно оптимизировать скорость загрузки изображений. Делимся советами, которые в этом помогут.

Настройка кэширования

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

Чтобы настроить кэширование изображений на сайте, нужно найти .htaccess файл на сервере и добавить в него HTTP-заголовки «Cache-Control» и «Expires», а также указать, как долго должен храниться кэш в браузере. Например, на протяжении недели или месяца. 

Фрагмент кода для настройки кэширования. Источник: reg.ru

Отложенная загрузка

Отложенная загрузка (lazy loading) — это метод, который позволяет открывать изображения не сразу при переходе на сайт, а по необходимости. Например, когда человек долистал страницу до нужной картинки или кликнул по ней. Это помогает улучшить производительность веб-ресурса и сократить время его загрузки.

Один из способов настроить отложенную загрузку — добавить в HTML-код изображения атрибут «lazy».

Фрагмент кода для настройки отложенной загрузки. Источник: PR-CY

Использование CDN

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

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

Сервисы для оптимизации изображений без потери качества

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

Photoshop

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

Чтобы оптимизировать изображение в Фотошопе, при экспорте рекомендуем выбирать пункт «сохранить для Web и устройств». Во всплывающем окне вы сможете указать настройки сжатия и сохранить их на будущее.

Оптимизация изображения в Photoshop

Tonfotos

Tonfotos – программа для ручной и автоматической сортировки фотографий, обладающая функциями оптимизации изображений для сайтов. Поддерживает экспорт в самые популярные web форматы - JPEG, PNG, WebP. Профиль качества «Компактное» специально настроен под сценарий оптимизации изображений для Web, с оптимальным соотношением размер/качество. Одной настройкой можно привести все ваши изображения к нужной ширине или высоте в пикселях. Также программа удалит все лишние метаданные из фотографий.

Главное окно и функции по оптимизации изображений в программе Tonfotos

iLoveIMG

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

В бесплатной версии за раз можно добавить и оптимизировать до 15 изображений, в платной — до 30-ти. Выбрать уровень сжатия нельзя, программа определяет его автоматически. Готовые картинки можно скачать в виде архива или сохранить на виртуальный диск.

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

Image Compressor

Image Compressor — бесплатный сервис, также известный под названием Optimizilla. Инструмент подходит для сжатия файлов JPEG, PNG и GIF. Система самостоятельно анализирует загруженные изображения и уменьшает их до минимально возможного размера без потери качества. Одновременно можно загружать до 20 картинок в разных форматах.

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

Плагины оптимизации изображений 

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

ShortPixel — не только эффективно сжимает картинки и позволяет их кадрировать, но и поддерживает функцию CDN. Плагин автоматически подгружает картинки для пользователей с сервера, ближе всего расположенного к нему.

Плагин ShortPixel

Imagify — поддерживает 3 степени сжатия изображений:

• Normal — сохраняет исходное качество картинки;
• Aggressive — уменьшает размер изображения и понижает качество;
• Ultra — сжимает изображение с потерей качества до минимальных размеров.

Помимо этого плагин собирает статистику, насколько удалось «облегчить» сайт за счет оптимизации картинок.

Плагин Imagify

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

Плагин Optimole

Заключение

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

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