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

Tweet Pin it Share

Оптимизация изображений является важной частью SEO.

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

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

Оптимизация изображений — все, что вам нужно знать, обобщено в 9 простых советах

Содержание статьи

На вопрос о том, как выглядит высококачественный контент в глазах Google, Джон Мюллер из Google ответил :

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

Джон Мюллер

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

1.Создавайте уникальные изображения (когда это возможно)

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

Это не удивительно, учитывая, что это самые популярные результаты поиска для команды « Pexels » :

сколько раз вы видели эти изображения

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

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

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

Маркетологи считают, что оригинальная графика более ценна для достижения своих целей.

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

Что использовать вместо клише стоковые фотографии:

  • Ваши собственные иллюстрации и графика
  • Уникальные / отредактированные стоковые изображения
  • Скриншоты графики с других сайтов (при правильном цитировании, конечно)
  • Ваша собственная камера или смартфон!

Убедитесь, что у каждого изображения есть своя цель

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

количество изображения на странице которое лучше конвертирует

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

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

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

  • Предоставление дополнительного контекста
  • Пояснение сложных тем.

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

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

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

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

изображения для повышения авторитета веб-страницы

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

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

Что касается того, что делает изображение лучше другого, следует учитывать следующие качества:

  • Резкость изображения
  • Соответствие вашей отрасли, содержанию страницы и вашей аудитории
  • Возраст / современность образа
  • Согласованность стиля с остальной частью сайта

2. Используйте правильный формат файла изображения

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

Существует три наиболее часто используемых типа файлов изображений: JPEG, PNG и GIF.

  • JPEG — формат сжатого файла с потерями, обычно наименьший размер файла; идеально подходит для фотографий
  • PNG — обычно больший размер файла, чем JPEG; идеально подходит для рисования линий, скриншотов, изображений, содержащих текст или прозрачный фон
  • GIF — ограниченное количество цветов; идеально подходит для анимированных изображений

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

  • SVG — масштабируемый формат (без пикселей), обычно меньше, чем JPEG, PNG или GIF; отлично подходит для логотипов, иконок, простых иллюстраций

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

Если вы все еще не уверены, какой тип файла лучше всего подходит для вашего изображения, вот простое руководство:

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

Форматы следующего поколения

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

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

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

« Размер изображения без потерь в WebP на 26% меньше по сравнению с PNG . Изображения с потерями в WebP на 25-34% меньше сопоставимых изображений JPEG с эквивалентным индексом качества SSIM ».

Изображения с потерями в WebP на 25-34% меньше сопоставимых изображений JPEG

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

Почему мы заботимся о размерах изображения?

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

Средний размер передаваемого изображения составляет 1026 КБ на настольном компьютере и 935 КБ на мобильном устройстве — это половина веса веб-страницы!

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

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

3. Изменение размера изображений, которые слишком велики

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

Есть простое правило: используйте размеры, соответствующие ширине вашей страницы (или чуть больше). Если ваш контент блога имеет ширину 800 пикселей, то нет реальной причины использовать изображения шириной 2500 пикселей.

А как насчет небольших экранов? Конечно, есть такие устройства, как мобильные или планшетные, с еще меньшим размером экрана. Таким образом, размещение изображения на рабочем столе будет ненужным замедлением страницы.

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

Кроме того, вы должны изменить размер изображения перед его загрузкой . Хранение фотографии размером 3 МБ на вашем веб-сайте не имеет смысла.

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

Изменение размеров изображений не является ракетостроением. Вы можете использовать профессиональное программное обеспечение для дизайна (например, Adobe Photoshop или Gimp ).

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

бесплатный онлайн-редактор изображений

4. Сожмите ваши изображения

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

По мнению Think With Google , сжатие является важным процессом для оптимизации производительности и оптимизации изображений:

«Простое сжатие изображений и текста может изменить ситуацию: 25% страниц могут сэкономить более 250 КБ, а 10% могут сэкономить более 1 МБ».

Существует два типа сжатия:

  1. Сжатие с потерями — это процесс удаления маленьких битов из файла JPEG или GIF. Однако после того, как он был применен, его нельзя отменить. Из-за этого и из-за типа потери данных качество изображения может серьезно ухудшиться, если применить слишком большое сжатие.
  2. Сжатие без потерь — это процесс удаления посторонних метаданных из файла PNG. Этот процесс не такой серьезный или постоянный, как сжатие с потерями. Из-за этого целостность изображения в основном остается неизменной. Однако размеры файлов все еще относительно велики.

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

Согласно  форуму поддержки WordPress , вы должны стремиться к следующим размерам изображения:

  • Большие изображения: 60 КБ — 100 КБ
  • Маленькие изображения: менее 30 КБ

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

Оптимизация изображений WordPress — какой плагин сжатия вы должны использовать?

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

Самые популярные из них —  Imagify,  Smush,  EWWW ,  TinyPNG  и  ShortPixel .

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

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

5. Используйте описательные и четкие метаданные

Даже если вы не собираетесь пытаться ранжировать свои изображения в Поиске картинок Google, есть смысл тратить время на метаданные изображений.

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

Советы по написанию метаданных изображения

Метаданные SEO изображения должны быть:

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

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

  • имя файла изображения
  • альтернативный текст
  • заголовок изображения
  • название и описание

Имя файла

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

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

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

Альтернативный текст

Альтернативный текст (альтернативный текст) является критически важной частью для заполнения с точки зрения SEO. Он находится в простом теге alt в HTML-коде изображения:

<img data-src = "colosseum.jpeg" alt = "вид на Колизей в Риме с высоты птичьего полета" />

Основная цель — описать изображение таким образом, чтобы посетители с нарушениями зрения не пропустили информацию, предоставленную вашими изображениями. То же самое касается ботов Google, которые не могут «видеть» ваши изображения.

Поэтому альтернативный текст должен быть как можно более описательным.

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

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

Подвести итог:

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

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

Означает ли это, что вы должны любой ценой поместить ключевое слово focus в атрибут alt?

Точно нет.

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

Подпись (необязательно)

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

Название и описание

Хотя заголовок и описание не отображаются в интерфейсе вашего сайта, они помогают ускорить внутренний поиск изображений (если вам или другим пользователям WordPress необходимо отследить изображение). Заголовок и описание изображения также являются важными элементами в метаданных поиска — так же, как тег заголовка  и мета-описание для ваших страниц и сообщений.

6. Кэшируйте свои веб-страницы

Кэширование — это процесс, который позволяет серверам более эффективно доставлять ваш сайт в браузеры посетителей. Думайте об этом так:

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

Но тогда кто-то еще просит ваши контактные данные. Вы повторяете задание, записывая свои данные на перспективу. Здесь и там несколько секунд, но это быстро складывается.

Это то, что ваш сервер должен делать без кэширования.

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

Вот как работает кеширование.

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

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

Какой плагин кеширования WordPress вы должны использовать?

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

7. Включите структурированные данные изображения

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

Вот что Google говорит о структурированных данных для изображений:

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

Например, это поиск «как испечь яблочный пирог»

Структурированные данные позволяют разметить информацию о веб-странице.

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

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

Schema.org — это тело, которое управляет структурированными данными (разметка схемы), которые мы используем в сети.

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

Какой плагин структурированных данных WordPress вы должны использовать?

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

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

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

Но , если вы уже используете плагин Rank Math ( это швейцарский армейский нож инструментов SEO для WordPress. Это дает вам полный контроль над SEO всего сайта ) вы сможете добавить 14 различных типов схем, просто выберете необходимую вам в данный момент и установите одним нажатием кнопки.

8. Используйте ленивую загрузку

Если вы посмотрите на анализ, который выполняет Google PageSpeed ​​Insights по скорости загрузки, вы увидите, что он разбит на несколько этапов:

посмотрите на анализ, который выполняет Google PageSpeed ​​Insights по скорости загрузки, вы увидите, что он разбит на несколько этапов:

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

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

Процесс работает так:

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

Вот отличная графика от Imperva, которая объясняет процесс:

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

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

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

9. Создайте карту изображений сайта

Google Images принадлежит значительная часть доли рынка поисковых систем.

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

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

Если вы работаете на WordPress, лучший способ автоматически сгенерировать карту сайта с помощью плагина.

В Все в одном SEO обновления , например, вам просто нужно выбрать «/ Attachments Медиа» вариант, который будет генерировать отдельный файл Sitemap изображения для вашего сайта.

Или плагин Rank Math  сделает эту работу за вас . Нажатием одной кнопки.

Создайте карту изображений сайта

ЗАКЛЮЧЕНИЕ :

  • Избегайте клише фото; вместо этого используйте / создайте изображения, которые приносят дополнительную ценность
  • Не используйте слишком много изображений — у каждого изображения должна быть цель
  • Всегда выбирайте правильный формат — GIF для анимации, JPEG для фотографий и PNG для иллюстраций, скриншотов или изображений с текстом
  • Используйте векторы для детальной графики, которая должна быть очень четкой на любом устройстве (например, логотип)
  • Подумайте об использовании форматов следующего поколения (например, WebP) для браузеров, которые их уже поддерживают.
  • Не используйте изображения, которые слишком велики для макета вашего сайта
  • Сжатие ваших изображений (используйте сжатие с потерями, когда это возможно — экономит больше данных)
  • Экспериментируйте и найдите лучшее соотношение между качеством и размером файла
  • Используйте описательные метаданные — особенно имена файлов, альтернативные тексты и подписи (при необходимости)
  • Кэшируйте свои страницы
  • При необходимости включите данные структурированного изображения (отлично подходит для рецептов, изображений продуктов, логотипов и т. Д.)
  • Для больших страниц используйте ленивую загрузку изображений — это ускорит время загрузки
  • Если у вас много изображений, подумайте об использовании карты сайта с изображением
Рекомендую : SEO оптимизация сайта для тех, кто хочет оптимизировать свой сайт должным образом.

ВажноЕсли , статья «Оптимизация изображений 9 простых советов» вам понравилась и была полезной , возможно стоит поделиться ее с друзьями ? Тогда , нажмите одну (можно и больше) из кнопок соц. сетей .

Leave a Reply

Жми сюда