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

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

Этап 1. Сохраните фотографии в подходящем формате

Одно и то же изображение в разных форматах может иметь разный размер и разное качество. Нет правильного или идеального формата — все зависит от ваших целей. Подберите для сайта подходящий вариант:

• JPEG или JPG. Такие изображения могут отображать более 16 000 000 цветов, а за счет сжатия занимают совсем немного места. Это хороший компромисс между размером и качеством, поэтому их можно использовать для большинства задач.
• PNG. У изображений в этом формате сжатие без потерь, поэтому файлы всегда большие. Этот формат можно использовать, когда нужно сохранить прозрачный фон.
• GIF. Этот формат используется для анимаций, в остальных случаях он не подходит из-за ограниченного количества цветов.

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

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

❌ Плохо

DSC_0034.jpg — неинформативно

platje-nedorogo-kupit.png — спам

✔️ Хорошо

morning-bride.jpg

platje-zelenoe-ameli.jpg

Этап 2. Уменьшите вес каждой фотографии

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

Размер фотографии по ширине и высоте. Фото размером 8000×6000 всегда будет тяжелее, чем 400×300. Если вы загрузите для превью большую картинку, на сайте она будет выглядеть маленькой, но все равно для ее отображения большая картинка должна загрузиться полностью. Поэтому лучше заранее уменьшить размер. Это можно сделать с помощью графических редакторов:

• если пользуетесь Adobe Photoshop, выберите «Изображение» → «Размер изображения»;
• если предпочитаете онлайн-сервисы, используйте iloveimg.com, resizepixel.com или img2go.com. Все сервисы бесплатные.

На Vigbo максимальный размер загружаемой фотографии в пикселях для разных страниц отличается: в слайдере и виджете «Фотография» это 6000 px, а в превью блога — 5000 px. Но мы советуем все равно уменьшать фотографии перед загрузкой. Для большинства ситуаций оптимально готовить фотографии размером 2000 px по большей стороне.

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

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

• если пользуетесь Adobe Photoshop, экспортируйте фотографии через команду «Файл» → «Сохранить для Web»;
• если предпочитаете онлайн-сервисы, используйте iloveimg.com, tinypng.com, compressjpeg.com или compressor.io. Все сервисы бесплатные и позволяют загружать несколько картинок одновременно, что экономит время.

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

Качество фотографии нужно выбирать, исходя из задачи. Для портфолио фотографа требуется максимально высокое качество, потому что клиентам важна каждая деталь. Для большинства случаев оптимальным будет сохранить фотографию с 80-90% качества. А для фоновых картинок детализация не так важна, поэтому достаточно выбрать среднюю степень сжатия.

Лучше всего придерживаться такого порядка: сначала изменить размер фотографии, а потом удалить лишние данные и при сохранении картинки выбрать подходящую степень сжатия. Так получится сохранить хорошее качество и при этом уменьшить вес даже на 70%. Идеальный вес итогового изображения — до 600 кб.

Этап 3. Заполните Alt-теги для каждой фотографии

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

• Описывайте фотографии кратко, достаточно 5-6 слов. Максимальная длина — 250 символов с пробелами.
• Делайте описания естественными и понятными для людей. Текст «Свадебная фотосессия заказать Москва недорого» звучат неестественно и могут быть приняты поисковыми роботами за спам.
• Добавляйте в Alt-теги основные ключевые слова, которые относятся к фотографии. Лучше использовать именительный падеж — так проще искать.
• Не старайтесь быть слишком оригинальными. Для фотографий одного товара можно написать один текст, а если товары отличаются только цветом, добавить его в Alt-тег. Например, для зеленого платья написать «женское зеленое платье», а красного — «женское красное платье».

❌ Плохо

Платье — недостаточно информации

Льняное платье зеленое, красное, фото, цена, купить — поисковый спам

✔️ Хорошо

Льняное женское платье Ameli

Свадебная фотосессия в Крыму

Подготовила Анна Акулова