Задать вопрос
HamSter007
@HamSter007
HTML/CSS верстальщик

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

На сайте используется ряд изображений с высоким разрешением от 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 ругается на эти изображения

5c02c871c9d11703255701.png5c02c87ea84cf812513981.png

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

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

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

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

И мне это, возможно, только кажется, но такие проблемы со скоростью (а точнее с картинками на сайте) начались недавно)) Сжимаю изображения уже до невозможного (бывает уже с серьезной потерей качества), но проблемы остаются.
  • Вопрос задан
  • 3371 просмотр
Подписаться 17 Простой 1 комментарий
Решения вопроса 1
@pu6elozed
Bitrix, fullstack
По пунктам:
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
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
nd0ut
@nd0ut
Для минимизации возни с обработкой картинок, я могу посоветовать сервис Uploadcare. У них есть API со всеми необходимыми операциями для реализации responsive images.

https://uploadcare.com/docs/image_transformations/...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы