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



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

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

Например:

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

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

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

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

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

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

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

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

Рекомендуемый вес для фотографий

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

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?

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

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

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

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

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

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

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

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

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

<img class="alignnone wp-image-1323 size-full" title="Пример титульного изображения">

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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 есть два хороших плагина:

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

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

Заключение

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

mass gmail