У меня стал актуальным вопрос оптимизации изображений на сайте. В данный момент я разработал сайт, на котором используется достаточно большое кол-во изображений (Слайдер в шапке, акции, товары).
Сайт собираю с помощью gulp. Перед сборкой все изображения прогнал через плагины:
imagemin
imageminPngquant
imageminZopfli
imageminMozjpeg
imageminGiflossy
Оптимизация дала положительные результаты. Но смущает следующее:
- У меня используется 1 картинка скажем размера 4000x2000, которая с помощью css сжимается на всех медиа брекпоинтах до нужного размера, а также иногда отображается на автарках товара, которые имеют размер 112 на 60 пикселей.
Меня это натолкнуло на мысль, а почему бы не сделать множество вариантов исходя из оригинального изображения. К примеру:
Оригинал 4000х2000 Для адаптивного дизайна от 768 до 1024 (по бутстрапу) использовать изображение 1024хсоклько то там не важно, А для аватарок так и сгенерировать 112 пикселей на сколько то там согласно пропорции. Так называемые thumbnails.
Что касается генерации то тут предельно все ясно. Можно сделать таски в галпе где будут генерироваться варианты изображений. Но у меня вопрос о том, как решается задача с подбором картинок, если пользователь зашел с ретина экрана, либо 4-8к? В этом случае необходимо использовать 2х, 3х или 4х изображение.
И как быть с css и html где вставляются урлы на картинку??
Я искал много статей по данной теме, но вокруг одна сплошная вода о том как плохо не оптимизировать изображения, и нигде нет нормальных пособий как организовать то что я описал.
Вот цитата из одной статьи отсюда
Здесь говорится:
Изображения нужно создавать в размере, в котором они будут представлены на сайте.
Браузеру будет легче сканировать контент страниц, если в CSS прописать ширину и высоту изображения. Для дисплеев с ретиной добавляйте изображения в размере 2x и настройте отображение разных размеров одного и того же изображения для разных экранов. Иначе для пользователей, которые откроют изображение на дисплее с ретиной, все картинки будут отображены с визуальной потерей качества.
А также наводят скрин:
На нем особо видно, что в конце урлов изображений стоят 2х и 1.5х.
Собственно мой вопрос:
Может кто поделится опытом или исчерпывающей информацией/ссылкой на статью о том как правильно реализовать оптимизацию и использование оптимизированных изображений на сайте?