12 Важных Советов По Оптимизации Изображений Для SEO, Которые Вам Стоит Знать

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

Изображения часто занимают наибольшую часть веб-страниц.

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

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

Это как получить печенье орео с молоком бесплатно от поисковых систем. Не берите только печенье – лучше обмакнуть его в молоко. В этой статье мы подробно рассмотрим каждый аспект SEO для изображений и дадим вам советы по оптимизации изображений для лучшей видимости в поисковиках.

Как поисковые системы индексируют и понимают изображение

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

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

Что такое SEO для изображений?

Оптимизация изображений – это набор техник для повышения видимости в результатах поиска (SERP) на основе знаний о том, как поисковые системы сканируют, понимают и ранжируют изображение.

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

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

1. Выбор правильного формата изображения

Существует множество форматов изображений, но поиск Google поддерживает только следующие форматы: JPEG, PNG, WebP, BMP, GIF и SVG.

Рассмотрим отличия между этими форматами и их влияние на ваш сайт и SEO.

• PNG: Использует беспотерьное сжатие, что означает, что данные изображения не теряются. Это позволяет получить высококачественные изображения и поддерживает прозрачность, но размер файла больше. Идеально подходит для печати.
• JPEG: Использует потеря сжатия, что приводит к ухудшению качества изображения, но можно настроить уровень качества для достижения баланса между размером файла и качеством.
• WebP: Разработан Google, поддерживает беспотерьное или утратившее сжатие и является более эффективным, чем JPEG (на 25-80%). Позволяет получить меньшие файлы при сохранении качества. Поддерживается всеми основными браузерами.
• GIF: Использует неутратное сжатие, но ограничено 256 цветами, поэтому менее пригодно для высококачественных изображений и больше подходит для простых график и анимаций.
• SVG: Это векторный формат, используемый для логотипов, иконок и других дизайнов, поскольку его можно масштабировать до любого размера без увеличения размера файла. Идеален для адаптивного веб-дизайна.
• BMP: Большие и неконвертируемые файлы изображений, сохраняющие очень высокое качество. Из-за большого размера файлов обычно не используются для веб-сайтов, так как это может значительно замедлить время загрузки страниц.

Лучшим вариантом является использование PNG, который затем можно конвертировать в формат WebP для веб-приложения.

Относительно конвертации GIF в WebP, обратите внимание, что старые браузеры, такие как Safari 15.6 (macOS Catalina) и более старые версии, не поддерживают анимированные форматы WebP.

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

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

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

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

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

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

Время загрузки изображений на 3G-соединении (~1МБ/сек)

Время загрузки изображений на быстром соединении (128 МБ/сек)

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

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

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

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

В этом случае можно отображать миниатюры в формате WebP, ссылающиеся на изображения высокого качества в формате PNG.

Мы узнали о разных форматах изображений и их соответствующих методах компрессии.

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

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

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

К примеру, когда образец изображения выше конвертируется из JPG в WebP с помощью ShortPixel с потерями, получаем файл размером 8.3 КБ, тогда как TinyJPG генерирует несколько иной файл размером 8.7 КБ.

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

• ShortPixel
• TinyJPG
• EZGIF
• Kraken.io

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

Поэтому всегда рекомендуется тщательно проверять и выбирать типы оптимизации.

Что касается формата AVIF?

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

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

Например, тот же файл изображения в формате AVIF весит 11 КБ по сравнению с 41 КБ в формате WebP.

Однако, как вы можете заметить из сравнения ниже, это снижает качество изображения. Это видно из выравнивания неровностей, происходящего при сжатии изображения с помощью алгоритмов компрессии AVIF, в отличие от WebP справа.

AVIF против WebP

Если вы удовлетворены качеством AVIF и хотите его использовать, вы можете сделать это, включив его в тег <picture> в качестве первого <source>.

Браузеры, поддерживающие AVIF, отобразят его даже в меньшем размере.

Google, который на момент написания этой статьи все еще не поддерживает этот формат, просто проигнорирует его и перейдет к следующему формату, указанному в тэге <picture>.

Вот образец кода:

<picture>

<!-- AVIF format will be processed if client (i.e. browser ) supports it as a first in list-->

<source type="image/avif" 

srcset="image-300w.avif 300w, image-600w.avif 600w, image-1200w.avif 1200w"

sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"

>

<!-- WebP format will be processed if client doesn't support AVIF  -->

<source type="image/webp" 

srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w"

sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"

>

<!-- If WebP is also not supported, the browser will then fall back to the PNG format  -->

<source type="image/png" 

srcset="image-300w.png 300w, image-600w.png 600w, image-1200w.png 1200w"

sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"

>

<!-- Lastly, if none of the advanced formats are compatible, the browser will default to displaying the JPEG image. -->

<img src="image-300w.jpg" 

srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w" 

sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"

alt="Description of the image">

</picture>

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

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

2. Используйте Уникальные Изображения Вместо Стоковых

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

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

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

Наверное, вы видели одно из следующих изображений:

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

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

Большие Изображения и Google Discover

Большие изображения имеют больше шансов быть представленными в Google Discover.

Google рекомендует , чтобы изображения были не менее 1200 пикселей в ширину и имели настройки max-image-preview в мета-теге robots, чтобы обеспечить их отображение как больших изображений в Google Discover:

<meta name="robots" content="index, follow, max-image-preview:large" />

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

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

Google не гарантирует , что всегда будет отображать большие миниатюры.

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

3. Оптимизируйте Имена Файлов Изображений

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

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

Обычно имена файлов типа “IMG_722019” или что-то подобное не помогают Google лучше понять изображение.

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

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

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

4. Пишите SEO-дружественный Alt-текст

Alt-теги – это текстовые альтернативы изображениям, которые используются, когда браузер не может корректно их отобразить. Подобно заголовку, атрибут alt описывает содержание файла изображения.

Когда изображение не загружается, в верхнем левом углу изображения появляется блок с alt-тегом. Убедитесь, что alt-теги соответствуют изображению и делают его релевантным.

Обращение внимания на alt-теги также оказывает положительное влияние на общую стратегию SEO на странице.

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

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

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

Вот пример плохого и хорошего alt-текста согласно официальной документации Google.

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

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

<img src="chocolate-1.jpg" alt="шоколад"/>

Однако лучший alt-текст, описывающий изображение, будет следующим:

<img src="chocolate-1.jpg" alt="плитка темного шоколаду з ароматом кави"/>

Для дополнительной SEO-ценности, alt-текст может действовать как анкор-текст для внутренней ссылки, когда изображение ссылается на другую страницу сайта.

5. Оптимизируйте Заголовок и Описание Страницы

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

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

Это как добавление всех начинок к вашему бурито; он вкусится гораздо лучше с гуакамоле. Итак, обязательно добавьте "гуакамоле", чтобы улучшить ранжирование изображений.

6. Определите Размеры Изображений

Атрибуты размеров изображений важны для предотвращения проблем с Cumulative Layout Shift (CLS), которые могут мешать оптимизации Core Web Vitals. Это позволяет избежать скачков страницы при загрузке.

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

Это подсказывает браузеру, сколько места выделить для ресурса, и предотвращает раздражающее смещение контента, что ухудшает ваш показатель CLS.

7. Делайте ваши изображения мобильными

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

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

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

Вот пример кода:

<picture> <!-- Формат WebP для браузерів, що підтримують його --> <source type="image/webp" srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px" > <!-- Альтернативний формат JPEG --> <img src="image-300w.jpg" srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px" alt="Опис зображення"> </picture>

Атрибут srcset используется внутри тега <img>, чтобы указать разные файлы изображений и их ширины.

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

Поэтому необходимо указать ширину, чтобы информировать браузер о ширине каждой версии. Например: srcset="image-300w.jpg 300w, image-600w.jpg 600w"

Атрибут sizes используется браузером вместе с атрибутом srcset для выбора ресурса. Он указывает назначенную ширину отображения изображения для разных размеров экрана.

Для экранов до 600 пикселей в ширину он выберет изображение шириной 300 пикселей; для экранов до 900 пикселей – изображение шириной 600 пикселей; а для больших экранов – изображение шириной 1200 пикселей.

Без этого атрибута браузер по умолчанию будет использовать полную ширину экрана для выбора изображения из srcset.

Также можно использовать дескриптор x, который указывает браузеру выбрать наиболее подходящий размер изображения на основе разрешения экрана устройства (например, 1x, 2x или 3x для стандартных, ретина и супер ретина экранов).

<picture> <!-- Формат WebP --> <source type="image/webp" srcset="image.webp 1x, image@2x.webp 2x, image@3x.webp 3x"> <!-- Альтернативний формат JPEG --> <img src="image.jpg" srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x" alt="Опис зображення"> </picture>

Кроме того, можно использовать дескрипторы x для различных разрешений экранов (например, ретина-дисплеев), где размер изображения остается постоянным.

Тем временем дескрипторы w подходят для гибких адаптивных макетов, где размер изображения изменяется в зависимости от размера экрана.

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

К счастью, Chrome недавно начал разрабатывать поддержку sizes="auto", что позволит браузеру определять размер загружаемых с отложенной загрузкой изображений на основе атрибута srcset согласно HTML макету и CSS.

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

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

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

Показывая размеры изображений и используя CSS ( width: 100%; height: auto; ) для сохранения пропорций, браузер может точно выбрать и отобразить изображение с атрибута srcset при использовании sizes="auto" .

8. Отложенная Загрузка И Предварительная Загрузка

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

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

Это уменьшает первоначальное время загрузки, ускоряет работу страницы и значительно улучшит показатель Largest Contentful Paint (LCP), особенно на страницах с большим количеством изображений.

Реализовать отложенную загрузку очень просто – добавьте атрибут loading="lazy" к вашему тегу <img> .

<img src="image.jpg" loading="lazy" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Опис">

Но никогда не применяйте отложенную загрузку для изображений, находящихся в области просмотра (above the fold), поскольку это может отрицательно повлиять на показатель First Contentful Paint (FCP).

Вместо этого предварительно загрузите их или используйте атрибут fetchpriority="high".

Преимущество предварительной загрузки перед атрибутом fetchpriority заключается в том, что предварительная загрузка поддерживается всеми браузерами, в то время как fetchpriority не поддерживается браузерами Firefox и Opera.

Ниже приведены примеры предварительной загрузки и использования fetchpriority:

<img src="image.jpg" fetchpriority="high" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Опис"> <link rel="preload" as="image" href="image-600w.jpg" imagesrcset="image-300w.jpg 300w, image-600w.jpg 600w" imagesizes="(max-width: 600px) 300px, 600px">

Используя предварительную загрузку или fetchpriority, вы указываете браузеру начать загрузку изображений как приоритетных, что полезно для улучшения показателя Largest Contentful Paint (LCP).

9. Добавьте Изображение к Вашей Карте Сайта

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

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

При использовании WordPress плагины Yoast и RankMath предлагают решения для карты сайта.

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

10. Добавьте Структурированные Данные

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

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

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

Google может выбрать наиболее подходящий размер при отображении их.

Вот пример:

<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "headline": "Назва статті", "image": [ "https://example.com/photos/1x1/image.jpg", "https://example.com/photos/4x3/image.jpg", "https://example.com/photos/16x9/image.jpg" ], "datePublished": "2024-01-10T08:00:00+08:00", "dateModified": "2024-01-10T09:20:00+08:00", "author": { "@type": "Person", "name": "Ім'я автора" } ... } </script>

11. Использование CDN для быстрой доставки изображений

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

Однако доставка – это не единственное преимущество CDN; они также дают возможности трансформации и оптимизации.

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

Например, службы, такие как Cloudflare's Polish, могут автоматически оптимизировать форматы изображений, определяя совместимость браузера с WebP. Они могут подавать изображения PNG и JPEG в формате WebP по запросу.

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

Даже если изображения имеют расширение ".jpeg" или ".png", наш CDN представляет их в формате WebP, если браузеры его поддерживают.

При валидации страниц с помощью PageSpeed ​​Insights рекомендуется убедиться, что проходите аудит "Подача изображений в форматах следующего поколения".

Вот несколько наиболее известных CDN служб, которые можно рассмотреть для использования:

• Cloudflare .
• Amazon CloudFront .
• ImageKit .
• KeyCDN .

12. Следите за Авторскими Правами

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

Например, Почтовая служба США выплатила 3,5 миллиона долларов в иске о нарушении авторских прав на изображение, а компания Skechers была осуждена на 2,5 миллиона долларов.

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

В соответствии с Законом о цифровом тысячелетии и авторском праве (DMCA) вам могут выдать уведомление о нарушении авторских прав. Если владелец контента увидит свой контент на вашем сайте, он может запросить удаление DMCA, который вы должны выполнить.

Ключевые Выводы Оптимизации Изображений

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

Самое важное – убедиться, что изображение и альтернативный текст соответствуют содержанию страницы. Другие важные моменты:

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

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

Желаю удачи в оптимизации!