Изображения, как элемент контента сайта, упомянуты в различных Подсказках, что может быть не вполне удобно для цельного восприятия. Потому и решил опубликовать своеобразный дайджест.
Publisher Center
С него – потому что проще.
Напомню, с помощью Publisher Center удобнее управлять передачей контента в News и Discover Google.
Самое главное – ширина передаваемого в Publisher Center изображения должна быть не меньше 1200 пикселей.
Если сказать по-иному, изображения необходимо загружать на сайт шириной не менее этой величины. Какие именно варианты размеров использовать в дизайне – вопрос второй. Но если не загрузить на сайт изображение указанного размера, «отдать» в соответствие с требованиями будет нечего.
Будете смеяться, но некоторые разработчики пренебрегают. Или игнорируют. Или не знают. Но тем не менее.
В конце 2021 года Publisher Center сделали попроще: убрали поддержку режима «читалки», формируемой из RSS. Из карточки публикации теперь только переход на web-версию или на AMP (при наличии).
Но саму возможность передачи с помощью RSS оставили. Именно ее рекомендовал бы использовать, если вы хотите для отображения на смартфоне получить большое изображение на карточке публикации.
При чем, большое изображение – вне зависимости от того, соответствует ли размер передаваемого требованию. И да, на позициях выдачи контента такое пренебрежение может и не сказаться. Но для этого нужен соответствующий и отличный (от других) контент. И такое есть, но у некоторых.
Ответственность автора/редактора:
Загрузка изображений в соответствии с требованиями.
Ответственность разработчика/администратора:
Передача в RSS и в составе мета-данных URL изображений, которые требованиям соответствуют.
Скорость загрузки страницы
Основные моменты:
- Отложенная загрузка закадровых изображений,
- Современные форматы изображений (WebP и AVIF),
- Эффективное кодирование (оптимизация объема) изображений.
Есть еще соответствие размера занимаемому пространству, но об этом чуть ниже.
И все эти моменты связаны с объемом передаваемой информации. Чем объем больше, тем больше и время загрузки. И наоборот.
Подробнее на конкретном примере в Скорость сайта: что делать, если все плохо.
Распределение ответственности автора/редактора и разработчика/администратора зависит от выбранной стратегии распределения функционала между редакцией и сайтом.
Но в любом случае необходима оптимизация объема файла изображения до его загрузки на сайт.
Разнообразные средства оптимизации на стороне сайта обеспечиваю уменьшение объема примерно на 35-45 процентов от загруженного. Соответственно и конечный результат зависит от того, какой объем загружен (500 или 100 килобайт – разница будет существенной).
В качестве примера, изображение размером 1920х1080 пикселей до загрузки на сайт очень даже может быть меньше 100 килобайт:
Очень часто в редакциях используют бесплатный инструмент для работы с изображениями FastStone Image Viewer, в его настройках можно один раз установить параметр оптимизации при сохранении и более о нем не вспоминать (разве что объем сохраненного файла «нежданчиком» окажется в несколько раз больше обычного).
Удобный, но у него есть недостаток, возможность сохранения файла в формате WebP в настоящее время отсутствует. Можно сильно не заморачиваться и установить на сайт не только оптимизатор, но и конвертер. Или конвертировать до загрузки в бесплатном редакторе изображений GIMP.
Возможность конвертации в WebP в нем есть, но процесс редактирования изображения более трудоемкий, чем в FastStone Image Viewer.
Еще об одном способе ускорения загрузки изображений (и не только их) рассказал в Скорость загрузки: внутренние факторы. Победить расстояние между сервером, на котором размещен сайт, и посетителем помогает CDN.
Подчеркну, что CDN не заменяет, а дополняет использование современных форматов изображений (WebP и AVIF) и их эффективное кодирование (оптимизация объема).
Соответствие размера занимаемому пространству
Общее правило, размер изображения не должен превышать занимаемую площадь.
Для этого разработчики предусматривают на сайте автоматическую «нарезку» миниатюр разных размеров.
Но есть и исключение. Для смартфонов.
Для достижения лучшего разрешения именно для смартфонов рекомендуют использовать изображения до двух раз больше, чем занимаемая площадь. В этом случае «лишний» объем передаваемого файла считается оправданным.
Реализация – полностью на разработчике/администраторе сайта.
P.S. С радостью приму предложения этот материал дополнить чем-то не менее важным (разумеется, в части касающейся изображений).