Оптимизация изображений за несколько шагов

Оптимизация изображений за несколько шагов

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.

Заключение

В результате мы использовали практически все современные методики оптимизации изображений, что позволило значительно сократить количество скачиваемых для сайта килобайт, что очень важно в современном мире мобильных устройств!


Оригинал
PREVIOUS ARTICLE
NEXT ARTICLE