Изображения для вэба

Картинка имеет большое значение в современном мире, в том числе, и в рамках интернет продаж — и изображения товаров, и фото готовых работ и объектов или просто привлекательные снимки офиса и сотрудников.
На сайтах присутствует весь спектр пиксельных (и не только) изображений.
Неумелое и беспорядочное использование большого количества картинок может привести к низкой скорости загрузки сайта.

Основная ошибка в подборе изображений для сайта — перфекционизм.

Мы ищем фотографии огромного размера, которые весят не менее 1Мб — для большинства это является показательным критерием качества изображения. На деле же нет никакой необходимости в загрузке такого контента на сайт, пользователь просто не сможет оценить превосходную детализацию снимка на маленьком экране смартфона. И как тогда быть? Уменьшить размер загружаемой картинки. Вот несколько способов, которые можно использовать как по отдельности, так и вкупе:

1. Масштабировать изображение под устройство пользователя
   Самое большое из популярных разрешений монитора — 1920х1080, поэтому не имеет смысла размещать изображения более 1920px по ширине, если это всё таки необходимо сделать, то лучше прикрепить картинку, как отдельный файл для скачивания.

2. Оптимизация
   Можно попробовать сделать это и самостоятельно, например уменьшить ppi(pixels per inch, пикселей на дюйм — единица измерения) в том же Adobe Photoshop, или же воспользоваться онлайн-сервисами, их выбор очень большой, мы используем tinypng.com.

3. Конвертация в WebP формат
   WebP — ещё не такой известный, как JPEG, PNG и прочие, формат изображения, но уже имеет широкое применение.
   Его преимущества в том, что сам файл имеет меньший размер при отсутствии потерь качества и поддерживает прозрачность. Но стоит учитывать, что он не поддерживается в Safari и Internet Explorer.

4. Отложенная загрузка изображений
   Метод заключается в том, чтобы показывать изображения не сразу на всей странице сайта, а только после загрузки основного контента или при появлении картинки в видимой области окна браузера. На многих cms этот процесс можно запустить с помощью плагинов ленивой загрузки или же прописать вручную loading=»lazy» для изображений.

Вышеперечисленные инструменты помогают повысить показатели в PageSpeed Insights и улучшить скорость загрузки страницы, что особенно будет заметно на мобильных устройствах.