Оптимизация изображений сайта: теория и практика

Оптимизация изображений сайта: теория и практика

30 сентября 0 Автор Игорь Серов

От автора

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

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

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

Это значит, что поисковики должны «понимать», что в этом изображении, на какую оно тему, и как связано с окружающим её текстом.

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

Название файлов для изображений, типа «фото 1», «фото 2» нежелательны.

Чтобы составить, тег alt для фото, представьте, что гость сайта не видит фото, а только читает этот тег alt. Добейтесь, чтобы он понял, что на фото изображено.

Добавляется тег alt при помощи инструментов визуального редактора вашей CMS. Если таких инструментов нет, тег вписывается в код картинки таким образом.

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

Подготовительная оптимизация фото

Вы наверняка знаете, что если вы активно используете картинки на сайте, то они (фото) занимают львиную долю его  объёма.

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

Сжатие фото это уменьшение размера файла картинки, по возможности, без потери её качества.

Уменьшить размер файла картинки можно несколькими способами:

  • Уменьшить размер фото. Метод самый простой, но чаще неприемлемый, для сайтов, где большие фото нужны для тематики сайта. Оптимальный размер для картинки сайта, 448×336 пикселей.
  • Удалить метаданные картинки. Это способ часто остается за скобками, так как объём метаданных незначителен. Как правило, сервисы по обработки фото выносят это удаление отдельным пунктом.
  • Использовать специальные сервисы сжатия фото. Самый эффективный способ уменьшить фактический размер фото, без удаления метаданных. Здесь всё зависит от качества сервисов сжатия. Я покажу два моих любимых сервиса для сжатия, которые дают максимальный эффект по сжатию.

Сервисы сжатия фото

№1. Iloveimg

Сервис Iloveimg поможет отлично сжать картинки формата JPG, PNG и GIF. Сжимать фото можно пакетами и по отдельности.

№2. Tinypng

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

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

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

Другие факторы оптимизации фото

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

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

Такая же функция есть в некоторых браузерах, в частности в Google. Он найдет похожее фото в своей базе, через команду «Найти картинку (Google)», однако не укажет, какая картинка первоисточник.

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

Еще советы по оптимизации

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

То есть рекомендовано вставлять фото на сайт в своём реальном размере. То есть у вас фото 800×600, вставляете его на сайт, как фото 800×600, а не уменьшайте редактором сайта до 500×. Данный совет особенно актуален для больших фото.

Используйте сторонние хранилища картинок. Совет заключается в исключении своего сервера для показа фото на сайте. Фото вставляется на сайт, по стороннему URL специального хранилища картинок. Я этот метод никогда не использую, так как можно потерять все картинки сайта в один день.

Оптимизация изображений сайта плагинами (расширениями). Некоторые CMS, например, WordPress имеют в своём арсенале специальные плагины для оптимизации фото. Во-первых это плагины для сжатия картинок, как при их загрузки, так и в библиотеке. Отличный плагин Smush — Сжатие и оптимизация изображений.

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

В-третьих, используйте CDN сервера для хранения фото. Рекомендую, сервис CloudDinary. Для WordPress есть плагин Cloudinary – Image management and manipulation in the cloud + CDN.

Вывод

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

©seojus.ru

(Всего просмотров 16)

Статьи по теме