Кроме прямого влияния на позицию в выдаче, существует интересная ниша поискового трафика с картинок. Хорошие изображения помогают в лидогенерации, улучшают восприятие текста и положительно сказываются на поведенческих факторах. Какие признаки выделяют оптимизированные изображения?
Пропустим SEO-приемы и сосредоточимся на главном: оптимизации графики сайта по весу.
С одной стороны, поисковики любят изображения и выбирают самые крупные из них. С другой стороны, вы наверняка видели предупреждение
Оптимизируйте изображения
Правильный формат и сжатие картинок позволяет сократить их объем.
Оптимизируйте следующие изображения, чтобы уменьшить их размер на 190 КБ (31 %).
Помните, что если страница сайта загружается быстро, это экономит лимиты индексации у поисковиков, которые будут использоваться на более частую переиндексацию других страниц сайта.
А чтобы разобраться во всем разнообразии форматов изображений и качестве вывода на экран, углубимся немного в теорию.
Для ленивых: если вам скучно читать теорию, можно просто воспользоваться бесплатными готовыми инструментами. Вот хороший: tinypng.com.
Для суперленивых: сделать автоматизацию сжатия
Форматов довольно много, и они условно делятся на два лагеря:
Выбирают обычно так:
В принципе, все довольно понятно. Если нужно больше информации, прочитайте подробный мануал от Google, или другой от разработчика Facebook.
Кинем небольшой камень в огород формата WebP, представленного в 2010 году:
Формат вызывает не мало споров в первую очередь своей отсталостью перед не взлетевшим JPEG 2000.
А во-вторых, достаточно аггресивным навязыванием со стороны гугла при плохой поддержке на уровне операционных систем и программ.
До сих пор официальная страница с конвертерами WebP выглядит максимально по-программистки и редкий просмотрщик может показать закодированную им картинку.
Вот интересная статистика использования разных форматов на сайтах (один сайт может использовать сразу несколько). Данные W3Techs.com на 10 октября 2019:
| Формат | Процент сайтов |
|---|---|
| Без изображений | 9.9% |
| PNG | 74.8% |
| JPEG | 71.6% |
| GIF | 24.9% |
| SVG | 19.5% |
| BMP | 0.2% |
| ICO | 0.1% |
| WebP | 0.1% |
После выбора формата нужно определиться со способом сжатия:
Почти все веб-форматы позволяют применять оба вида сжатия, со своими особенностями, но мы остановимся на старом добром JPEG.
Для избавления от "лишнего веса" необходимо удалить из файла картинки метаинформацию. Эта информация, например геопозиция места съемки, используется поисковыми системами для привязки снимков к карте, но уменьшает очки в плане скорости загрузки. При ее удалении качество картинки не страдает.
Взгляните на эти две картинки: они выглядят одинаково с точностью до пикселя, но имеют различный размер:
Изображения до и после удаления меты. Экономия: 7 Кб трафика, занимает 97% от исходного размера. Визуальные различий нет.
Какая же информация была удалена? Это можно выяснить с помощью инструмента exiftool. Вот небольшая часть того, что было в исходном файле:
Согласитесь, что это очень ценная информация для обсуждения в кругу фотографов "на что снимал и как" или какого-нибудь криминального расследования. Но для публикации в вебе она бесполезна, и даже вредна, если говорить про скорость. Кстати, одного хакера так и поймали: он забыл удалить геопозицию из фотоснимка и загрузил его в интернет.
Удалять или не удалять? Удалять!
Если применить сжатие с потерями, экономия больше, но качество уже страдает - появляются артефакты на небе и песке:
Сжатие с потерей качества. Экономия: 218 Кб трафика, занимает 12% от исходного размера. Имеются визуальные различия.
Тут главное - найти ту "золотую середину", когда иллюстрация все еще качественная, но весит меньше всего. И стараться не пересохранять JPEG файлы по несколько раз, каждое такое сохранение приводит к деградации качества. Посмотрите видео, чтобы это понять:
Давайте искусственно снизим скорость подключения и проверим отрисовку разных типов сжатия. На ринг вызываются:
Для файлов более 10Кб прогрессивное сжатие также немного, но уменьшает вес по сравнению с базовым: экономия примерно 5%.
Для сжатия можно использовать следующие бесплатные инструменты:
Если картинок не много, можно пережимать их вручную, а если это целый каталог фотографий продукции, то встает вопрос: как это автоматизировать?
Мы рекомендуем подобрать оптимальную компрессию для сжатия с потерями и дополнительно удалять метаинформацию (сжатие без потерь).
Для этого написать скрипт и вызывать его по расписанию через cron.
Мы написали удобный скрипт пережатия изображений optimizm.sh, вот его особенности:
