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.

И мне это, возможно, только кажется, но такие проблемы со скоростью (а точнее с картинками на сайте) начались недавно)) Сжимаю изображения уже до невозможного (бывает уже с серьезной потерей качества), но проблемы остаются.
  • Вопрос задан
  • 1811 просмотров
Решения вопроса 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/...
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Amigoweb Магнитогорск
от 30 000 до 40 000 руб.
iWeekender Краснодар
от 80 000 руб.
22 апр. 2019, в 11:02
30000 руб./за проект
22 апр. 2019, в 11:00
1800 руб./за проект
22 апр. 2019, в 10:37
5000 руб./за проект