Картинка имеет большое значение в современном мире, в том числе, и в рамках интернет продаж - и изображения товаров, и фото готовых работ и объектов или просто привлекательные снимки офиса и сотрудников.
На сайтах присутствует весь спектр пиксельных (и не только) изображений.
Неумелое и беспорядочное использование большого количества картинок может привести к низкой скорости загрузки сайта.
Основная ошибка в подборе изображений для сайта - перфекционизм.
Мы ищем фотографии огромного размера, которые весят не менее 1Мб - для большинства это является показательным критерием качества изображения. На деле же нет никакой необходимости в загрузке такого контента на сайт, пользователь просто не сможет оценить превосходную детализацию снимка на маленьком экране смартфона. И как тогда быть? Уменьшить размер загружаемой картинки. Вот несколько способов, которые можно использовать как по отдельности, так и вкупе:
Масштабировать изображение под устройство пользователя
Самое большое из популярных разрешений монитора - 1920х1080, поэтому не имеет смысла размещать изображения более 1920px по ширине, если это всё таки необходимо сделать, то лучше прикрепить картинку, как отдельный файл для скачивания.Оптимизация
Можно попробовать сделать это и самостоятельно, например уменьшить ppi(pixels per inch, пикселей на дюйм — единица измерения) в том же Adobe Photoshop, или же воспользоваться онлайн-сервисами, их выбор очень большой, мы используем tinypng.com.Конвертация в WebP формат
WebP - ещё не такой известный, как JPEG, PNG и прочие, формат изображения, но уже имеет широкое применение.
Его преимущества в том, что сам файл имеет меньший размер при отсутствии потерь качества и поддерживает прозрачность. Но стоит учитывать, что он не поддерживается в Safari и Internet Explorer.Отложенная загрузка изображений
Метод заключается в том, чтобы показывать изображения не сразу на всей странице сайта, а только после загрузки основного контента или при появлении картинки в видимой области окна браузера. На многих cms этот процесс можно запустить с помощью плагинов ленивой загрузки или же прописать вручную loading="lazy" для изображений.
Вышеперечисленные инструменты помогают повысить показатели в PageSpeed Insights и улучшить скорость загрузки страницы, что особенно будет заметно на мобильных устройствах.
Комментарии (5)
skymal4ik
04.03.2022 14:23+2>На деле же нет никакой необходимости в загрузке такого контента на сайт, пользователь просто не сможет оценить превосходную детализацию снимка на маленьком экране смартфона.
Зум есть давно, а с характеристиками и разрешением современных смартфонов вероятность увидеть артефакты и пиксели довольна высок. За других не скажу, но мне иногда приятно рассмотреть детали на фото.
PereslavlFoto
04.03.2022 15:56Как правило, пользователю нужно не всё изображение, а его часть. Поэтому он будет просматривать и анализировать полученное изображение отдельно, в другой программе. И поэтому очень важно обеспечить клиентам доступ к полноценному и крупному изображению.
SlavikF
04.03.2022 23:22WebP?
А почему не avif?
eugenehr
05.03.2022 12:15На одном из сайтов сделал так:
<picture> <source srcset="/static/.../image.jpg.640x360q75.webp"> <source srcset="/static/.../image.jpg.640x360q75.avif"> <img itemprop="image" src="/static/.../image.jpg.c1280x720q75.jpg" alt="" loading="lazy"> </picture>Пробовал менять местами элементы source webp и avif, но в папке с кэшем в основном сохраняются webp. AVIF тоже есть, но мало. Решил пока не заменять webp на avif.
eandr_67
Основная ошибка — забыть, что современный HTML позволяет задать для изображения несколько ссылок на картинки разного размера/формата из которых браузер сам выберет и загрузит одну наиболее подходящую.
Ориентация на мифический «самый популярный размер» сразу отсекает тех, кто сидит за большими настольными мониторами.
Ppi/dpi никакого отношения к оптимизации изображений на сайте не имеют: эти параметры реально нужны только для расчёта физического размера изображений в полиграфии. А для сайта важен только размер изображения в пикселах.