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

Без всяких сомнений, SEO оптимизация изображений имеет решающее значение для поддержания вовлеченности пользователей и повышения производительности ресурса. Неоптимизированные картинки могут занимать лишнее место на сайте и снижать скорость его загрузки. По статистике, именно медленная загрузка является причиной того, что примерно 39 % посетителей покидают сайт, даже не посмотрев на него.

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

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

Почему важно оптимизировать картинки?

Давайте вместе рассмотрим основные факторы, на которые влияет работа с картинками на веб-ресурсе:

1. Скорость страницы. Большие неоптимизированные картинки могут сделать сайт медленным и неуклюжим. Пользователи не будут ждать, пока загрузится сайт, так что оптимизация изображений имеет огромное значение для обеспечения его быстрой загрузки.
2. Пользовательский опыт. Когда веб-ресурс загружается бесконечно долго, налаживание наилучшего взаимодействия с пользователями находится под большим вопросом. В наш век скоростей люди ожидают, что страницы будут открываться максимально быстро и на любом устройстве. Так что, если вы хотите соответствовать ожиданиям ваших потенциальных клиентов, поработайте с картинками. Добавление альтернативного текста поможет посетителям сайта с нарушением зрения понять, что изображено на картинке. Также об этом узнают обычные пользователи, если фото или графика по каким-то причинам не загружается в их браузере.
3. SEO-продвижение. Проработка картинок обеспечивает их высокое ранжирование в поисковой выдаче Google, будет полезна для общей оптимизации проекта. А также корректная работа с файлами будет положительно оценена алгоритмами Google.
4. Пропускная способность и использование дискового пространства. Сжатые изображения помогают эффективно использовать пространство для хранения информации на сервере.

Эти 4 причины убеждают нас уделить пристальное внимание картинкам при загрузке их на сайт.

Основные требования к картинкам для сайта

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

Формат

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

Форматы векторных файлов — SVG, PDF, EPS и AI. Этот тип обычно выбирают для сохранения изображений, представляющих собой комбинацию линий, точек и цветов, таких как логотипы и значки. Главное их преимущество в том, что их можно масштабировать без ущерба для качества.

Между тем растровые изображения основаны на пикселях, что делает их зависимыми от разрешения. Это означает, что они теряют качество, становятся размытыми или будут видны пиксели при изменении размера. Форматы файлов в растровой категории — JPEG, PNG, GIF и RAW. Далее немного детальнее о самых популярных и удобных для редактирования форматах:

Качество

Этот параметр во многом зависит от степени сжатия файла. Тут нужно постараться найти нужный баланс. Сравните 2 картинки:

На первой сохранено высокое качество, но сохраняется довольно большой размер файла — 590 КБ (при исходном варианте — 2,06 МБ). Размер второго файла — 68 КБ. Но мы наблюдаем высокую зернистость, прорисовку пикселей и прочие недостатки.

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

Для файлов формата PNG оптимальный размер — менее 100 КБ. Как правило, более простые изображения должны иметь небольшой размер для обеспечения наилучшей производительности.

Размер и вес изображений

Размер картинки и ее вес — это разные параметры. Говоря о размере, подразумевают соотношение ширины к высоте, которое выражается в пикселях. А вес показывает, сколько места занимает изображение на сайте, обычно измеряется в КБ (килобайтах) или МБ (мегабайтах).

Например, если вы используете изображение размером 500 x 500 пикселей для миниатюры размером 50 x 50, браузер должен будет правильно его загрузить и масштабировать, прежде чем отображать для пользователей. Для этого лучше пользоваться способом, когда изображения подстраиваются под точные размеры, будь то полноразмерная картинка или маленькая миниатюра. В этом помогут Adobe Photoshop, GIMP и онлайн-редакторы, например PicResize.

А проанализировать, какие изображения использованы на странице, можно с помощью расширения Serpstat Website SEO Checker.

Размещение

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

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

Итак, еще раз напомним, что векторный формат лучше подходит для:

• геометрических фигур;
• логотипов;
• четких и ярких знаков.

Для таких изображений чаще всего используют формат svg. Файл с таким разрешением можно создать даже в самом простом текстовом редакторе, добавив тег <svg>. Такую же разметку применяют на сайте.

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

Хочу в ТОП поиска по картинкам

Получить консультацию по выводу картинок с сайта в ТОП

Подробнее

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

Пиксель — основа всех растровых изображений. Он содержит данные в цветовой модели RGBA. Каждый из этих 4 каналов имеет 256 оттенков и весит 8 битов, соответственно, величина каждого пикселя — 32 бита или 4 байта. Зная эти исходные данные, а также размер картинки в пикселях, можно рассчитать ее вес. Например, 2500 пикселей будут весить 10 КБ (2500 х 4 байта = 10000 байтов / 1024 = 10 КБ).

Приведем таблицу, как рассчитываются основные параметры.

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

• SEO-оптимизация изображений с помощью снижения глубины цвета. Сделать вес фото меньше в два раза можно, изменив количество используемых цветов с 2500 до 256. В результате вес каждого канала снизится до 2 битов вместо 8;
• использование дельта-кодирования. Применяется для участков с похожими цветами. Если соседние пиксели похожи по цвету, можно указать нулевую разницу между ними. Тогда пиксель будет весить 1 бит;
• масштабирование картинки. Мы советуем не использовать на сайте изображения слишком большого размера. Выбор оптимального варианта убирает лишние пиксели.

Приведем пример, когда изображение больше на 10 пикселей, а вот вес добавляется существенно:

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

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

Compressjpeg.com

Этот простой онлайн-сервис позволяет оптимизировать, конвертировать файлы в другой формат, работать с GIF. Главное преимущество — возможность одновременно работать с 20 изображениями, добавлять их в виде заархивированной папки, корректировать степень сжатия, предварительно просматривать результат.

Compressor.io

Если вы ищете высокий уровень сжатия, который поможет сэкономить сотни КБ, обратите внимание на этот инструмент. С ним можно уменьшить размер файла почти на 90 %. Он сжимает изображения JPEG и PNG без потери пикселей и работает с файлами других типов. Однако размер файла не может превышать 10 МБ.

Imagify.io

Сервис работает с самыми распространенными форматами: JPG, PNG, PDF и GIF. Для бесплатных учетных записей максимальный размер загружаемого изображения составляет 2 МБ. Для платных аккаунтов нет ограничений на максимальный размер загрузки. Создатели сервиса акцентируют на его простоте использования и отсутствии сложных настроек.

WebP Converter

С помощью этого онлайн-инструмента можно преобразовать фото, полупрозрачные и графические изображения в удобный формат WebP. Степень сжатия с потерями регулируется, поэтому пользователь может выбрать компромисс между размером файла и качеством картинки. Файл формата WebP в среднем на 30 % меньше «весит», чем JPEG и JPEG 2000, без потери качества. Если сравнивать с PNG, то изображение, конвертированное в WebP Converter, меньше по размеру в среднем на 26 %.

ezGIF.com

Это бесплатный, простой в использовании набор инструментов, предназначенный в первую очередь для создания и редактирования анимированных GIF-файлов, но он также поддерживает редактирование и позволяет выполнить преобразование файла или изменение размера для многих других форматов, включая анимированные WebP, PNG, MNG и FLIF. Также в нем доступно смонтировать простейшее видео.

Jpegtran

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

Pngquant.org

Это утилита командной строки и библиотека для сжатия PNG с потерями. Преобразование значительно уменьшает размер файла (часто до 70 %) и сохраняет полную альфа-прозрачность. Сгенерированные изображения совместимы со всеми веб-браузерами и операционными системами.

Пример картинки до и после сжатия представлен ниже.

Оригинал – 75,628 байтов

Обработанный файл – 19,996 байтов (73 % сжатия)

ILoveIMG.com

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

Как оптимизировать изображения на странице?

Итак, вы готовы получить пошаговую инструкцию, как сделать так, чтобы картинки не мешали работе вашего сайта, а только привлекали пользователей? Тогда начнем продвигать ваш сайт с помощью картинок вместе.

Название изображений

Каждому файлу потребуется короткое и релевантное имя, описывающее его содержимое. Важно, чтобы оно дало подсказку о предмете изображения. Например, my-new-black-kitten.jpg для поисковой системы будет лучше, чем IMG00023.JPG.

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

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

Хранение

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

Расположение картинок

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

Имейте в виду, что программы чтения с экрана не могут получить доступ к текстам внутри картинок, поэтому для раскрутки сайта эта информация неактуальна.

Обратные ссылки

Если в своей работе по наращиванию ссылочной массы вы решили разместить ссылку на картинку с вашего веб-ресурса, то проверьте, насколько соответствуют анкор и название изображения. Для поисковых роботов это важно. Например, дать ссылку на картинку trafik-na-sayt-2022.jpg лучше в таком контексте: «Трафик на сайт в 2022 году был выше, чем в предыдущем».

Метаданные для картинок

Чем больше файл, тем выше вероятность увеличения скорости загрузки веб-страницы. Каждый раз, когда страница извлекает файл, она тратит время на его «загрузку». Согласно исследованию компании Dexecure, занимающейся SEO-оптимизацией, на метаданные приходится в среднем 16 % размера файла изображения. Хотя вроде бы эта цифра небольшая и информация не занимает много места, по мере их накопления страницы с большим количеством картинок будут замедляться при загрузке. Мы рекомендуем удалить метаданные, чтобы сохранить высокую скорость страницы.

Карта сайта

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

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

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

При ранжировании изображений Гугл также учитывает такие компоненты, как название файла и атрибут описания Alt (альтернативный текст). Фактически это то, что читают программы и что появится на странице, если картинка не может быть загружена.

В 2021 году 26 % всех картинок на 1 миллионе лучших сайтов не имели альтернативного текста. Помимо улучшения доступности и SEO, их добавление добавит преимуществ перед конкурентами.

Есть несколько правил для написания хорошего альтернативного текста:

• будьте конкретными. Убедитесь, что описание является как можно более точным, включая само изображение, контекст и т. д.;
• будьте краткими. Старайтесь, чтобы описания не превышали 125 символов. Обратите внимание, что не нужно употреблять слова «изображение», «фото» или что-то подобное в альтернативном тексте, поскольку это предусмотрено в HTML-коде;
• используйте ключевые слова. Однако будьте осторожны, чтобы не переусердствовать.

Такие инструменты, как Ahrefs, Ubersuggest и Semrush, помогут выделить наиболее релевантные поисковые запросы, и тогда оптимизация картинок для сайта достигнет своей цели .

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

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

Shutterstock, Unsplash и Getty Images являются одними из самых известных поставщиков стоковых изображений. Эти сайты содержат тысячи бесплатных фото для различных целей.

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

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

Выводы

Надеемся, что мы вас убедили в том, что если вы хотите вывести свой сайт в топ поисковой выдачи, то без оптимизации картинок вам не обойтись. Если у вас возникнут дополнительные вопросы или вы хотите поручить нам эту скрупулезную работу, специалисты Elit-Web готовы прийти к вам на помощь.