Картинка имеет большое значение в современном мире, в том числе, и в рамках интернет продаж - и изображения товаров, и фото готовых работ и объектов или просто привлекательные снимки офиса и сотрудников.
На сайтах присутствует весь спектр пиксельных (и не только) изображений.
Неумелое и беспорядочное использование большого количества картинок может привести к низкой скорости загрузки сайта.
Основная ошибка в подборе изображений для сайта - перфекционизм.
Мы ищем фотографии огромного размера, которые весят не менее 1Мб - для большинства это является показательным критерием качества изображения. На деле же нет никакой необходимости в загрузке такого контента на сайт, пользователь просто не сможет оценить превосходную детализацию снимка на маленьком экране смартфона. И как тогда быть? Уменьшить размер загружаемой картинки. Вот несколько способов, которые можно использовать как по отдельности, так и вкупе:
Масштабировать изображение под устройство пользователя
Самое большое из популярных разрешений монитора - 1920х1080, поэтому не имеет смысла размещать изображения более 1920px по ширине, если это всё таки необходимо сделать, то лучше прикрепить картинку, как отдельный файл для скачивания.Оптимизация
Можно попробовать сделать это и самостоятельно, например уменьшить ppi(pixels per inch, пикселей на дюйм — единица измерения) в том же Adobe Photoshop, или же воспользоваться онлайн-сервисами, их выбор очень большой, мы используем tinypng.com.Конвертация в WebP формат
WebP - ещё не такой известный, как JPEG, PNG и прочие, формат изображения, но уже имеет широкое применение.
Его преимущества в том, что сам файл имеет меньший размер при отсутствии потерь качества и поддерживает прозрачность. Но стоит учитывать, что он не поддерживается в Safari и Internet Explorer.Отложенная загрузка изображений
Метод заключается в том, чтобы показывать изображения не сразу на всей странице сайта, а только после загрузки основного контента или при появлении картинки в видимой области окна браузера. На многих cms этот процесс можно запустить с помощью плагинов ленивой загрузки или же прописать вручную loading="lazy" для изображений.
Вышеперечисленные инструменты помогают повысить показатели в PageSpeed Insights и улучшить скорость загрузки страницы, что особенно будет заметно на мобильных устройствах.
