Оптимизация изображений за несколько шагов
24 декабря 2022 г.Эта статья будет посвящена оптимизации изображений на сайте, как очевидных, так и не очень. В несколько шагов мы постараемся оптимизировать наши изображения, чтобы наш сайт работал максимально быстро и оптимально.
Введение
Для начала создадим простой html-файл, где несколько изображений расположены друг под другом. Мы будем использовать этот HTML-файл для улучшения.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body { display: flex; flex-direction: column; align-content: center;}
img { width: 100%; height: 100vh;}
</style>
</head>
<body>
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670949584/image_1_mvfm6d.jpg" alt="Mountain" />
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670949606/image_2_hhawzv.jpg" alt="Mountain" />
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670949623/image_3_qt385v.jpg" alt="Mountain" />
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670949650/image_4_rtxm8s.jpg" alt="Mountain" />
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670949666/image_5_e6gjpo.jpg" alt="Mountain" />
</body>
</html>
Для этого примера я предварительно загрузил 5 изображений на сервис cdn, позже мы обсудим, почему это стоит делать.
В этом файле мы просто отобразили 5 изображений, растянутых на всю ширину экрана и высоту области просмотра. Если мы откроем файл в браузере и посмотрим на вкладку сеть, то увидим, что все изображения загружаются сразу, хотя в самом начале отображается только первое, а все остальные остаются вне области просмотра. 
Оптимизация
Первое, что мы можем сделать, это не запрашивать все изображения сразу, а только те, которые находятся в области просмотра или рядом с ней. Этот метод называется ленивой загрузкой. Как мы видим, почти все современные браузеры поддерживают этот атрибут. Чтобы включить его, мы должны зарегистрироваться для изображений.
loading="lazy"
После добавления этого атрибута мы видим, что загрузилось только 3 изображения вместо 5, тем самым мы значительно увеличили экономию трафика, что очень важно для мобильных устройств! 
Далее я хотел бы обратить внимание на размер и формат изображений. Они очень большие и не современного формата. Давайте исправим это! Я воспользовался сервисом Squoosh для замены изображений на более современные форматы Avif и WebP, а для браузеров, которые их не поддерживают, оставим вернуться к старому формату изображения, но также пройти через службу оптимизации изображений.
Подводя итог, приблизительные выигрыши одинаковы в каждом формате:
- Авиф – от 50 до 80 %.
- Интернет – от 40 до 60 %.
- Jpeg: от 20 до 40 процентов.
Сейчас HTML-код выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body { display: flex; flex-direction: column; align-content: center;}
img { width: 100%; height: 100vh;}
</style>
</head>
<body>
<picture>
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695023/image_1_bvkbca.avif" type="image/avif">
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695023/image_1_m03zc8.webp" type="image/webp">
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670695023/image_1_optim_auu7xi.jpg" alt="Mountain" loading="lazy">
</picture>
<picture>
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695610/image_2_ekp1uv.avif" type="image/avif">
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695610/image_2_ngrhao.webp" type="image/webp">
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670695610/image_2_optim_xlxrp0.jpg" alt="Mountain" loading="lazy">
</picture>
<picture>
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695732/image_3_fsogof.avif" type="image/avif">
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695732/image_3_oibhob.webp" type="image/webp">
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670695732/image_3_optim_vgkjae.jpg" alt="Mountain" loading="lazy">
</picture>
<picture>
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695822/image_4_km1zpx.avif" type="image/avif">
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695822/image_4_ipe9qy.webp" type="image/webp">
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670695809/image_4_optim_fc4g0x.jpg" alt="Mountain" loading="lazy">
</picture>
<picture>
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695909/image_5_qek5an.avif" type="image/avif">
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695909/image_5_sf5qvf.webp" type="image/webp">
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670695909/image_5_optim_dre3sn.jpg" alt="Mountain" loading="lazy">
</picture>
</body>
</html>
В результате вкладка «Сеть» в браузере выглядит так:
Далее мы хотели бы убедиться, что при разных разрешениях экрана мы запрашиваем разные изображения, поскольку не всегда оптимально запрашивать изображения с максимальным разрешением. Для этого мы можем использовать атрибут srcset. А именно прописать там ссылки на изображения меньшего размера для меньшего разрешения экрана.
Пример:
<picture>
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/c_scale,w_768/v1670951731/image_1_bvkbca_ahioi4.avif 768w, https://res.cloudinary.com/deysgcxss/image/upload/v1670695023/image_1_bvkbca.avif" type="image/avif">
<source srcset="https://res.cloudinary.com/deysgcxss/image/upload/v1670695023/image_1_m03zc8.webp" type="image/webp">
<img src="https://res.cloudinary.com/deysgcxss/image/upload/v1670949584/image_1_mvfm6d.jpg" alt="Mountain" loading="lazy">
</picture>
Результат:
n Хочу отметить, что то, что я делал вручную, уже давно способно к современным услуги возврата cdn. Также можно разместить собственное решение, например imgProxy.
Заключение
В результате мы использовали практически все современные методики оптимизации изображений, что позволило значительно сократить количество скачиваемых для сайта килобайт, что очень важно в современном мире мобильных устройств!
Оригинал