Оптимизация изображений для повышения скорости и продвижения веб-сайтов - эксперт Semalt

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

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

Например:

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

Продвижение изображений в Google: правильное использование изображений

Вы инвестировали и покупали фотографии с фото-сайтов/хранилищ изображений или вы даже увеличивали и делали фотографии самостоятельно? Вы также должны максимизировать их для целей SEO!

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

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

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

1. Вес и размеры изображения.

Один из важных параметров продвижения изображений в сети - это вес изображения.

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

Использование формата, подходящего для различных ситуаций (jpg, png, gif и др.) - полная информация о различных типах форматов ниже.
Важно - Установка размеров каждого изображения на сайте - Избегайте отображения изображения меньше, чем фактический (физический) размер изображения, насколько это возможно, чтобы не тратить лишние ресурсы. Чем крупнее и мобильнее сайт, тем значительнее.
Обеспечение адаптивного соответствия - Если вы работаете с WordPress и современным шаблоном, скорее всего, вы закрыли этот угол. Но если нет, важно всегда следить за тем, чтобы изображения на сайте, особенно изображения внутри сообщений, были отзывчивыми и хорошо отображались на мобильных устройствах, планшетах и т. Д.
Максимальное сжатие веса изображения без значительного ухудшения качества (дополнительные сведения об инструментах и методах для этого - ниже).

2. Выберите подходящее имя для изображения.

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

Примеры плохой репутации картины:

DSC2387.jpg

Сайт Promoter.png

Пример хорошего имени для изображения:

Search-Engine-optimizer.jpg

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

3. ALT для изображения

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

Технически в коде это выглядит так:

<imgsrc="tree.jpg" alt="tree">

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

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

Как проверить, есть ли у изображения тег ALT?

Есть несколько способов:

На всем пути - щелкните изображение мышью -> щелкните правой кнопкой мыши -> проверьте элемент (формулировка различается в разных браузерах).
Мы хотели бы найти тег в команде <img>, как показано ранее.
Используйте плагин под названием Web Developer (отлично подходит для многих других задач). Расширение позволяет одним нажатием кнопки отображать все теги alt, которые есть у изображений на определенной странице.

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

Процесс состоит в том, чтобы ввести URL-адрес для сканирования и затем щелкнуть вкладку «Изображения».

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

Изображения весом более 100кб
Изображения без тегов ALT
Изображения с тегами ALT, которые содержат более 100 символов (и вам, вероятно, следует их немного сократить)

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

Продвижение изображений Google - советы по оптимизации тегов ALT

Не стоит форсировать ключевые слова, но постарайтесь описать то, что вы видите на картинке.

Если можно объединить описание изображения + релевантные ключевые слова, чтобы выделиться естественно - что хорошего.
Не нужно преувеличивать описание, тега alt из 2-5 слов более чем достаточно.
Рекомендуется, чтобы теги alt и тег заголовка для изображения не совпадали.
Для коммерческих сайтов - если у продукта есть номер модели, рекомендуется использовать его в теге alt (для отображения в поиске изображений Google).

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

4. Тег заголовка для изображения.

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

Заголовки изображений - еще один показатель релевантности и тематики изображения, который может помочь Google понять, о чем изображение говорит, и повысить его рейтинг в поиске. В отличие от тега ALT, тег заголовка обычно будет более описательным и немного длиннее, и его цель - описать пользователю, что видно на изображении и/или что будет после нажатия на изображение. Новостные сайты часто используют этот тег.

Вот как это выглядит в коде:

5. Типы изображений и расширения файлов.

Есть несколько распространенных форматов использования изображений в Интернете. Я кратко остановлюсь на каждом из них:

JPEG/JPG - Самый старый и, вероятно, самый распространенный формат изображений в Интернете. Преимущество формата JPG - возможность отображать изображения относительно высокого качества и небольшого веса. Изображения JPG не поддерживают прозрачность.
GIF - Формат GIF тоже существует у нас довольно давно, начиная с тех времен, когда еще были дискеты. GIF-файлы поддерживают только 256 цветов, поэтому они представляют собой формат изображения более низкого качества и в основном предназначены для использования в качестве значков или украшений различного типа. Кроме того, формат GIP поддерживает анимацию, и даже Facebook недавно начал поддерживать этот формат в ленте.

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

PNG - Это (относительно) новый формат в группе. Основные преимущества файлов PNG - более высокое качество по сравнению с JPG и GIF и поддержка прозрачности. Файлы PNG делятся на 2 формата - PNG24, более высокое качество (и, соответственно, вес изображения), и PNG8, самый экономичный из всех.

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

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

Эмпирические правила выбора форматов изображений

В большинстве случаев формат JPG подойдет. Изображения JPG обеспечивают высокое качество и малый вес.
Не используйте GIF в больших файлах, которые содержат много деталей - вес файла будет большим. Формат не предназначен для этого и больше подходит для использования с небольшими и простыми элементами.
Если прозрачность играет важную роль - используйте формат PNG. Всегда рекомендуется сравнивать PNG24 и PNG8, чтобы уменьшить вес изображений до минимально возможного.

6. Правильное использование миниатюр

Эскизы (превью) являются важным и даже критическим компонентом некоторых сайтов, особенно сайтов на основе галереи и коммерческих сайтов. Миниатюры («Миниатюры» от Google Translate…) могут быть хорошими, с одной стороны, но значительно саботировать сайт и взаимодействие с пользователем, с другой.

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

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

Советы по правильному использованию эскизов

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

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

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

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

7. Использование переноса текста

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

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

H1 В зависимости от объекта изображения
Краткое описание (лучше 10-20 слов, чем ничего) на изображении, желательно с парой релевантных ключевых слов.
Заголовок и описание, конечно, актуальны (если это физическая страница, а не изображение, которое появляется из галереи).
Альтернативные названия и названия фотографий - в этом случае настоятельно рекомендуется.

8. Карта сайта для фотографий

Карта сайта для изображений (image-sitemap.xml) помогает Google лучше читать и индексировать наши изображения на сайте. Подобно стандартной XML-карте сайта, карту сайта с изображениями можно отправить с помощью Search Console в области карт сайта.

Добавьте файл Sitemap в Search Console

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

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

Как создать карту сайта?

WordPress - Как обычно, если вы работаете над WordPress, ваша жизнь проста. Плагин Udinra All Image Sitemap закрывает для вас угол. Все, что вам нужно сделать, это установить плагин, отметить V в настройках, создать карту сайта и запустить ее в Google через Search Console.

На любой другой платформе - смотря как. Если нет готового решения, такого как плагин и т. Д., Это можно сделать с помощью Screaming Frog.

Лягушка может помочь вам легко создать карту сайта с изображениями. Единственная проблема - он не обновляется автоматически (в отличие от плагина) и его нужно время от времени обновлять.

Как ты это делаешь?

Необходимо выполнить полное сканирование запрошенного сайта, а затем в верхнем меню программы перейти в Sitemaps -> Create Images Sitemap. Вы получите кошерный файл XML для использования и запуска через Search Console.

9. Поощряйте обмен фотографиями.

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

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

Для этого в WordPress есть два хороших плагина:

Social Image Hover для WordPress - платный плагин (em; лак для ногтей - 17 долларов).
Pinterest Pin it Button - плагин, который добавляет небольшой значок Pinterest к фотографиям на сайте.

10. Инструменты для уменьшения и оптимизации изображений.

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

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

Заключение

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

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

send email