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

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

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

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

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

Формат 

Google может индексировать типы изображений в форматах BMP, GIF, JPEG, PNG и WebP, а также SVG. 

Рекомендуемые форматы картинок:

1. JPEG — используйте этот формат для фото; 
2. PNG — для графики, проще говоря, для всего, что нарисовал дизайнер;
3. SVG — для векторных изображений. 

Появились и новые форматы, такие, как WebP и JPEG-XR. Их преимущество в том, что они действительно меньше весят, но, к сожалению, пока не все браузеры поддерживают эти форматы. Например, JPEG-XR поддерживает только IE, а WebP — Chrome, Opera, Android. В связи с этим я не рассматриваю их. Но выбор за вами 🙂 

Для индексирования картинок в Яндексе стоит выбрать такие форматы: JPEG, GIF и PNG. Кроме правильного выбора формата, стоит учесть, что изображения, которые загружаются на странице при помощи скрипта, Яндексом не индексируются.

Качество изображений

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

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

Размер и вес изображений

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

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

Браузеру будет легче сканировать контент страниц, если в CSS прописать ширину и высоту изображения. Для дисплеев с ретиной добавляйте изображения в размере 2x и настройте отображение разных размеров одного и того же изображения для разных экранов. Иначе для пользователей, которые откроют изображение на дисплее с ретиной, все картинки будут отображены с визуальной потерей качества. 

Инструменты оптимизации изображений вручную

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

Наиболее популярные декстоп инструменты:

• Adobe Photoshop – Photoshop имеет свой собственный строенный инструмент по сжатию изображений, который подготавливает их к публикации в интернете.
• Gimp – бесплатная альтернатива Photoshop, имеет крутую кривую обучаемости, но тоже имеет встроенную оптимизацию.
• Affinity Photo – это самая дешёвая альтернатива Photoshop, со встроенной функцией оптимизации.
• Paint.NET – редактор картинок для пользователей Windows, уверенная альтернатива Photoshop и имеет сжатие изображений.

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

Инструменты автоматической оптимизации изображений онлайн

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

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

Некоторые самые распространённые редакторы – JPEGmimi и TinyPNG.

При этом всё, что вам нужно сделать, это загрузить свои фотографии, инструмент запустится, и вы скачаете оптимизированные фотографии.

Плагины WordPress для сжатия

В WordPress имеются плагины для решения различных задач.

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

• Imagify Image Optimizer – плагин предлагает несколько уровней сжатия, изменение размера изображения, восстановление изображений и многое другое.
• ShortPixel Image Optimizer – бесплатный плагин позволяет вам сжимать до 100 изображений в месяц и обрабатывать несколько разных форматов изображений. Кроме того, он имеет встроенную функцию восстановления и групповую оптимизацию.
• WP Smush – плагин будет оптимизировать изображения при их загрузке на ваш сайт, а также оптимизировать существующую медиа-библиотеку. Это уменьшит размер ваших изображений, не оказывая влияния на качество.
• Optimus Image Optimizer – лёгкий плагин оптимизирует ваши изображения при помощи сжатия без потери общего качества, просто за счёт уменьшения размера файла.
• Compress JPEG & PNG images – плагин от сайта TinyPNG.com. Автоматически оптимизирует новые изображения на сайте. Есть бесплатный лимит.

SEO-оптимизация картинок на странице

Уникальность

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

Яндекс, например, способен увидеть, откуда была украдена картинка, какие копии были созданы, где именно они были размещены и мн.др. Если вы не уверены в уникальности контента на вашем сайте, это легко проверить c помощью сервиса Tineye. 

Название файла картинки

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

Важно использовать в имени файла латинские буквы и дефис вместо пробелов. Избегайте таких названий jzbdfjklJ_KSD5667.jpg, а пишите словами описывая — televizor-lg.jpg.

Обратите внимание, что ключевые слова должны быть максимально релевантными и описывающими суть картинки. 

Title картинки

Важный атрибут при оптимизации. В Title размещается текст, который будет отображаться при наведении курсора на изображение.

Правильный тайтл выглядит так: 

title=”Ноутбук Acer 7741G вид сверху”

Alt изображения 

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

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

Пример хорошего alt:

alt=”Недорогой ноутбук Acer 7741G за 16000 рублей”

Микроразметка для изображений

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

Пример внедрения микроразметки http://schema.org/ImageObject 

Выводы

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

1. Сохраняйте файлы с изображениями в правильном формате, которые индексируют поисковые системы.
2. Добавляйте на сайт уникальные и полезные изображения.
3. Используйте инструменты для сжатия изображений.
4. Оптимизируйте картинки с помощью тегов title и alt.
5. Внедрите микроданные для изображений.
6. Загружайте картинки, связанные по смыслу с текстом.
7. Не забывайте, что изображения прежде всего созданы для пользователя.

При создании и оптимизации картинок руководствуйтесь главным принципом: качество и ценность контента — вот что важно для поисковым систем. Успехов в оптимизации!