Оптимизация больших изображений для сайта?

Question

[HamSter]

На сайте используется ряд изображений с высоким разрешением от 2500px.

pageSpeed конечно же ругается, поэтому пытаюсь использовать современный атрибут srcset для изображений:

<article>
  <img srcset="https://dummyimage.com/2560x400/333/fff 2x,
               https://dummyimage.com/1280x400/333/fff 1x"
       sizes="(min-width: 1280px) 1280px, 100vw"
       alt="A title">
</article>

Для высоко разрешения так и использую в 2500px, а для обычного делаю эти же картинки в уменьшенным в 2 раза разрешением.

Пример записи img для реального проекта:

<img src="images/img-1-1x.jpg" srcset="images/2x/img-1-2x.jpg 2x" alt="" class="img-fluid">

В итоге по всем "возможностям" pagespeed ругается на эти изображения



И такие проблемы только для моб. девайсов:

Для десктопа все отлично, скорость 90+!

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

P.S: lazy load на телефонах (особенно при плохом интернете) не все фото грузит. Не хотелось бы тянуть retina.js.

И мне это, возможно, только кажется, но такие проблемы со скоростью (а точнее с картинками на сайте) начались недавно)) Сжимаю изображения уже до невозможного (бывает уже с серьезной потерей качества), но проблемы остаются.

Comments

[sim3x]

У вас есть статистика по клиентам?
Сколько хрома, фокса и тд?

Answer 1

[Артем]

По пунктам:
1. Используйте современные форматы изображений - гугл хочет чтобы на сайте использовались более легкие(не всегда, но в большинстве случаев) варианты изображений в формате допустим .webp
2. Настройте эффективную кодировку изображений - значит что изображения слишком много весят
4. И самое главное, что влияет на все предыдущие пункты - некорректное соотношение размера отображаемого изображения - его визуальному размеру. К примеру - у вас изображение 2500px, действительно ли его нужно отображать на смартфонах в полный размер. или достаточно превью?

<article>
  <img srcset="https://dummyimage.com/2560x400/333/fff 2x,
               https://dummyimage.com/1280x400/333/fff 1x"
       sizes="(min-width: 1280px) 1280px, 100vw"
       alt="A title">
</article>

По вышеописанному коду для современных мобильных используется srcset=https://dummyimage.com/2560x400/333/fffтак как у них плотность пикселей 2x. PageSpeedInsights эмулирует отображение на аналогичном смартфоне.
Для более гибкого подхода в html5 появился элемент picture. Подробнее посмотреть советую у Вадима Макеева в этом же видео подробно разбирается оптимизация графики для сайта.
На примере вашего кода можно сделать набросок

<picture>
    <!-- source для браузеров поддерживающих webp, соответственно srcset тоже должен указывать на webp-->
    <source type="image/webp" srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
     <!-- source для браузеров не поддерживающих webp -->
     <source srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
    ...  <!-- все остальные необходимые размеры, вроде планшетов и т.д. -->
    <!-- fallback для браузеров не поддерживающих элемент picture -->
    <img src="https://dummyimage.com/2560x400/333/fff" alt="A title">
</picture

Comments

[HamSter]

СПАСИБО!!!! Особенно за это "По вышеописанному коду для современных мобильных используется srcset=https://dummyimage.com/2560x400/333/fffтак как у них плотность пикселей 2x. " )

Answer 2

[nd0ut]

Для минимизации возни с обработкой картинок, я могу посоветовать сервис Uploadcare. У них есть API со всеми необходимыми операциями для реализации responsive images.

https://uploadcare.com/docs/image_transformations/...