Каким способом вы адаптируете jpg и png для ретины @2x и @3x?

Question

[Oleg Urievich]

Нашёл вариант с тегом picture и атрибутом srcset, но поддержка отсутствует для IE. Какими способами пользуетесь вы? Интересует «инлайн» вставка в html.

Comments

[Алекс Глебов]

https://scottjehl.github.io/picturefill/

Answer 1

[Никита Кит]

background-image + mediarequests

Comments

[Oleg Urievich]

А если нужно вставлять «инлайново» в html?

[Никита Кит]

Oleg Urievich, а кто мешает background-image вставлять инлайново через style? Кроме того поддержка object-fit в ie 11 пролетает, поэтому я всегда так делаю, если нужно создать cover size. Я понимаю, что инлайнить стили плохо, но в данном случае это оправдано

[Никита Кит]

Oleg Urievich, да, забыл сказать. Картинка одна, а в стилях в медиазапросы кидаем аналоги изменения размеров. transform: scale(0.5) для x2 и 0.33 для x3 ну и image-rendering: optimizeQuality для поправок после transform

[Oleg Urievich]

Никита Кит, многие говорят иметь изображение в 3 размерах. Это ускоряет загрузку для неретины. Что скажете?

[Никита Кит]

Oleg Urievich, что у ретин высокая концентрация пикселей (dpi) - оттого их не видно, оттого все jpg и png для ретины подтягивают картинки получше - весят они больше, если экран не ретина, то загружать можно и обычные картинки. Чекнуть экран и все возможности юзера могёт modernizr. От его анализа клиента можно написать js для изменения картинок на картинки специально для ретины, которые называются, к примеру, так же, но с каким-нибудь префксом... ret_ к примеру, добавив lazyload на эти картинки.
Обычно все эти приколы - уже доработка оптимизации выкаченного на прод проекта. Так сказать, если время есть