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

1. Преимущества наличия изображений на вашем сайте
2. Поиск изображений
3. Какой тип файла изображения вы должны использовать?
4. JPEG
5. GIF
6. PNG
7. Разрешение изображения
8. Уменьшить размер файла изображения
9. WordPress плагины для оптимизации изображений
10. EWWW Image Optmizer
11. Imsanity
12. Онлайн инструменты сжатия изображений
13. Используйте описательные имена файлов
14. Используйте описательный текст Alt и текст заголовка
15. Текст заголовка
16. Файлы Sitemap для изображений
17. Социальные медиа
18. Бонусный совет: как дополнительно сжать миниатюры в WordPress
19. Резюме

Преимущества наличия изображений на вашем сайте

Было проведено много исследований преимуществ изображений на веб-страницах. Некоторые из ключевых выводов:

• Вероятность более чем двухкратного использования страниц с изображениями в социальных сетях
  (Источник: OkDork.com )
• Пользователи больше заняты статьями, которые содержат изображения и получают на 94% больше просмотров, чем статьи без изображений
  (Источник: JeffBullas.com )
• Страницы с хотя бы одним изображением работают лучше при обычном поиске, чем страницы без изображений
  (Источник: Backlinko.com )

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

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

Вот 8 аспектов оптимизации изображения, которые будут обсуждаться в этом посте:
(Нажмите для навигации)

1. Поиск изображений - 7 сайтов, где вы можете бесплатно найти миллионы изображений
2. Используя соответствующий тип файла - когда использовать типы файлов JPEG, GIF или PNG
3. Разрешение изображения - используйте изображения с такими же размерами, которые они будут отображать при
4. Размер файла - сжатие изображений, чтобы ваши страницы загружались быстрее
5. Имена файлов - использовать описательные имена файлов
6. Альтернативный текст и текст заголовка - всегда используйте альтернативный текст и описательный
7. Файлы Sitemap для изображений - увеличьте вероятность того, что ваши изображения будут найдены в Поиске картинок
8. Социальные медиа - получить максимальную отдачу от ваших изображений в социальных сетях

Плюс бонусный совет!

Поиск изображений

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

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

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

1. Flickr.com
2. Freeimages.com
3. Publicdomainarchive.com
4. Unsplash.com
5. Pixabay.com
6. Gratisography.com
7. 500px.com

Если вам этого недостаточно, вот список 87 сайтов, где можно бесплатно получить изображения ,

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

Большинство изображений в моем SEO-блоге (SEORave.com) созданы с использованием старого надежного Snipping Tool и некоторого быстрого редактирования в Paint.NET (вам не нужны сумасшедшие навыки Photoshop для простого редактирования изображений). Я также использую Расширение захвата экрана на всю страницу для Chrome, когда мне нужно сделать скриншот прокрутки полной веб-страницы.

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

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

JPEG

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

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

JPEG - ваш лучший вариант для цветных фотографических изображений.

GIF

GIF расшифровывается как Graphics Interchange Format. Он поддерживает простые анимации, однако поддерживает только 256 цветов из спектра RGB в одном изображении и в одном кадре для анимированных GIF-файлов (каждый кадр может использовать разные 256 цветов).

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

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

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

PNG

PNG расшифровывается как Portable Network Graphics. Он поддерживает сжатие данных без потерь и был разработан как новая улучшенная замена GIF.

PNG поддерживает прозрачность и широкий спектр цветов, таких как JPEG.

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

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

Разрешение изображения

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

Например, если ваш блог может отображать изображения только с максимальной шириной 720 пикселей, нет смысла использовать изображение шириной 2000 пикселей. Размер изображения 2000px будет изменен для соответствия контейнеру 720px, но полноразмерное изображение все еще загружается.

Разница в размере файла между изображением шириной 2000 пикселей и изображением шириной 720 пикселей может превышать 1 МБ!

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

Смотрите пример на изображении ниже . Если вам нужно изображение размером 250 x 250 пикселей, не используйте увеличенное изображение (например, 500 x 500 пикселей) - создайте изображение именно того размера, который вам нужен - 250 x 250 пикселей. Это поможет вам сохранить размер страницы как можно ниже, чтобы ваши страницы загружались как можно быстрее.

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

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

Уменьшить размер файла изображения

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

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

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

Регулировка качества изображения в Paint.net:
С качеством, установленным на 100, это изображение имело размер файла 95 КБ. На уровне 75 потеря качества была минимальной, а размер файла уменьшился до 28 КБ.

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

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

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

WP Smush

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

Бесплатная версия ограничивает вас «массовым размыванием» 50 изображений за раз, что хорошо для небольших сайтов, но может занять некоторое время, если у вас есть тысячи изображений в медиатеке. Новая функция WP Smush заключается в том, что он будет конвертировать PNG в JPEG, где, по его мнению, вы выбрали неправильный тип файла. Эта функция может привести к значительному сокращению файлов изображений.

Новые изображения автоматически загружаются при загрузке.

Платная версия WP Smush позволяет «суперсумить» изображения для файлов еще меньшего размера и снимает ограничение на «массовую съемку» только для 50 изображений одновременно.

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

EWWW Image Optmizer

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

В отличие от WP Smush, EWWW Image Optimizer не имеет ограничений по своей функции «массовой оптимизации» - вы можете оптимизировать всю свою библиотеку изображений одним щелчком мыши.

Как и WP Smush, новые изображения автоматически оптимизируются при загрузке.

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

Imsanity

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

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

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

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

Imsanity - отличный бесплатный плагин для WP Smush или EWWW Image Optimizer.

Онлайн инструменты сжатия изображений

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

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

1. TinyPNG.com - для сжатия изображений PNG
2. CompressJPEG.com - для сжатия изображений JEPG

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

Используйте описательные имена файлов

Называние изображений чрезвычайно просто, но это то, что часто упускается из виду.

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

Например, информативное и описательное имя изображения будет labrador-puppy- sleep.jpg, а не IMG002299.jpg

Пример 1 описания именования изображений.

Или Эйфелева башня-Париж-Скайлайн-закат.jpg не StockImage312864000.jpg

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

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

Используйте описательный текст Alt и текст заголовка

Alt Text

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

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

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

Примеры альтернативного текста:
(пример изменен с Правила публикации изображений Google ):

Плохо (без альтернативного текста):

<img src = "labrador-puppy-sleep.jpg" alt = "" />

Лучше (но не достаточно описательно):

<img src = "labrador-puppy-sleep.jpg" alt = "puppy" />

Отлично (идеальное краткое описание изображения):

<img src = "labrador-puppy-спать.jpg" alt = "спящий щенок лабрадора" />

Слишком много (заполненный ключевыми словами альтернативный текст):

<img src = "labrador-puppy-sleep.jpg" alt = "щенок, лабрадор, щенок лабрадора, спящий щенок, спящая собака, спящий щенок лабрадора" />

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

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

Еще одна вещь, на которую следует обратить внимание: Internet Explorer использует Alt-текст в качестве всплывающей подсказки при наведении курсора на изображение. Другие браузеры, такие как Chrome, используют текст заголовка в качестве всплывающей подсказки на изображениях.

Текст заголовка

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

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

Использовать один и тот же текст Alt и текст заголовка можно.

Примечание. В тексте «Alt» и «Title» используйте обычные пробелы, а не «-» или «_».

Рекомендация: используйте описательный текст Alt во всех изображениях. 2-6 слов обычно дают достаточное описание.

Файлы Sitemap для изображений

Хотя это не так важно, как другие аспекты SEO для изображений, вы также должны включать изображения в свои XML-карты сайтов, чтобы повысить вероятность того, что ваши изображения будут найдены в Поиске картинок Google.

На изображения можно ссылаться, используя теги image: image и image: loc в вашей карте сайта XML.

Хорошей новостью является то, что если вы используете хороший плагин для WordPress SEO, например Yoast SEO плагин изображения автоматически добавляются в ваш XML-файл, поэтому вам ничего не нужно делать!

Рекомендация: используйте хороший плагин для WordPress SEO (Yoast), который добавляет изображения в карту сайта XML и отправляет их в Google Search Console.

Социальные медиа

Метатеги OG (Open Graph) (используемые Facebook и Pinterest) и карты Твиттера определяют важную информацию для платформ социальных сетей, и одна из самых важных вещей, которую нужно указать, - это изображение, которое вы хотели бы показать, когда кто-то делится вашим контентом.

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

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

Вы можете сделать это, добавив метатеги og: image в раздел head вашей страницы.

И добавив метатег twitter: image в раздел head вашей страницы.

Плагины SEO (например, Yoast) автоматически позаботятся о добавлении этих тегов на ваши страницы.

Эти плагины будут указывать ваше изображение для изображений OG и Twitter Card по умолчанию, но вы можете легко выбрать свое собственное изображение, нажав на значок «Поделиться» в боковом меню Yoast. Это откроет опции обмена Facebook для вашей страницы:

Укажите свое изображение в Facebook OG в плагине Yoast SEO. Рекомендуемый размер изображения Facebook составляет 1200 × 630 пикселей.

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

Укажите свое изображение в Твиттере в плагине Yoast SEO. Рекомендуемый размер изображения Twitter составляет 1024 × 512 пикселей.

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

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

Бонусный совет: как дополнительно сжать миниатюры в WordPress

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

Чтобы сжимать уменьшенные изображения с более высокой скоростью в WordPress, добавьте следующий код в ваш файл functions.php:
(Внимание: убедитесь, что вы сделали резервную копию исходного файла перед редактированием)

add_filter ('jpeg_quality', create_function ('', 'return 60;'));

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

Обычно настройка 60-80 (по умолчанию для WordPress - 90) приводит к получению изображений без существенного заметного снижения качества изображения, но вы можете проверить это, чтобы найти то, что подходит для вашего сайта и ваших изображений.

Обратите внимание, что после внесения изменений в файл functions.php вам потребуется заново создать все эскизы, чтобы изменения вступили в силу. Вы можете легко сделать это с Плагин Force Regenerate Thumbnails ,

Резюме

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

Есть еще советы по оптимизации изображения? Есть вопросы по оптимизации изображений? Оставьте комментарий ниже.

Эта статья была первоначально опубликована Вот ,

Похожие

Комментарии