Каким способом лучше всего делать адаптивные изображения?

Question

[desuvin]

Каким способом лучше всего делать адаптивные изображения? Знаю, что есть picturefill и скрипт для него. Оно подойдет для дивов, где есть background-image? И еще вопрос - как можно легко сгенерить разного размера картинки. Вы для этого используете скрипт какой-то, софт или плагин для фотошопа?
Есть такая штука как adapative images php скрипт и .htaccess файлик. Это уже устаревший метод или можно юзать его? Если он хороший, то как его совместить с picturefill. Ведь те картинки из source тоже будут уменьшаться через adaptive images.

Answer 1

[Сергей Протько]

Для дивов с бэкграунд имиджами нужно использовать media-queries и менять там изображение в зависимости от размеров экрана и плотности пикселей. picturefill для img тегов.

Comments

[desuvin]

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

[Сергей Протько]

desuvin: я просто инлайню сгенеренные css правила в страницу и не парюсь особо. Загрузка нужных изображений начинается сразу, надежно и даже не нарушает никаких там правил БЭМ-а и прочее.

Answer 2

[Денис Гончаренко]

Во всех проектах где мне нужна адаптивность изображений, я использую небольшой плагин jquery (собственного написания), который заменяет все картинки (выбранные по определенному критерию) на div с background-size:cover и никаких проблем нет)

Comments

[desuvin]

также делаю, но картинки будут грузиться огромного размера (даже после оптимизации). Зачем для мобилы грузить картинку 100 кб, когда можно загрузить 20кб

[Денис Гончаренко]

desuvin: ты хочешь чтобы для разных разрешений подгружались картинки разного размера?