06
Сен
2018

Объясните пожалуйста, как максимально эффективно оптимизировать изображения на сайте?

У меня стал актуальным вопрос оптимизации изображений на сайте. В данный момент я разработал сайт, на котором используется достаточно большое кол-во изображений (Слайдер в шапке, акции, товары).

Сайт собираю с помощью gulp. Перед сборкой все изображения прогнал через плагины:

imagemin
        imageminPngquant
        imageminZopfli
        imageminMozjpeg
        imageminGiflossy

Оптимизация дала положительные результаты. Но смущает следующее:

  1. У меня используется 1 картинка скажем размера 4000x2000, которая с помощью css сжимается на всех медиа брекпоинтах до нужного размера, а также иногда отображается на автарках товара, которые имеют размер 112 на 60 пикселей.

Меня это натолкнуло на мысль, а почему бы не сделать множество вариантов исходя из оригинального изображения. К примеру:

Оригинал 4000х2000 Для адаптивного дизайна от 768 до 1024 (по бутстрапу) использовать изображение 1024хсоклько то там не важно, А для аватарок так и сгенерировать 112 пикселей на сколько то там согласно пропорции. Так называемые thumbnails.

Что касается генерации то тут предельно все ясно. Можно сделать таски в галпе где будут генерироваться варианты изображений. Но у меня вопрос о том, как решается задача с подбором картинок, если пользователь зашел с ретина экрана, либо 4-8к? В этом случае необходимо использовать 2х, 3х или 4х изображение.

И как быть с css и html где вставляются урлы на картинку??

Я искал много статей по данной теме, но вокруг одна сплошная вода о том как плохо не оптимизировать изображения, и нигде нет нормальных пособий как организовать то что я описал.

Вот цитата из одной статьи отсюда

Здесь говорится:

Изображения нужно создавать в размере, в котором они будут представлены на сайте.

Браузеру будет легче сканировать контент страниц, если в CSS прописать ширину и высоту изображения. Для дисплеев с ретиной добавляйте изображения в размере 2x и настройте отображение разных размеров одного и того же изображения для разных экранов. Иначе для пользователей, которые откроют изображение на дисплее с ретиной, все картинки будут отображены с визуальной потерей качества.

А также наводят скрин:

введите сюда описание изображения

На нем особо видно, что в конце урлов изображений стоят 2х и 1.5х.

Собственно мой вопрос:

Может кто поделится опытом или исчерпывающей информацией/ссылкой на статью о том как правильно реализовать оптимизацию и использование оптимизированных изображений на сайте?

Источник: https://ru.stackoverflow.com/questions/878357/%D0%9E%D0%B1%D1%8A%D1%8F%D1%81%D0%BD%D0%B8%D1%82%D0%B5-%D0%BF%D0%BE%D0%B6%D0%B0%D0%BB%D1%83%D0%B9%D1%81%D1%82%D0%B0-%D0%BA%D0%B0%D0%BA-%D0%BC%D0%B0%D0%BA%D1%81%D0%B8%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE-%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE-%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%B0-%D1%81

Тебе может это понравится...

Добавить комментарий