Проблема адаптивних картинок досить актуальна, тому почну з невеликих міркувань і способів реалізації, а потім виділю варіант, який, як на мене підходить якнайкраще.
Отже, близько року тому я вважав, що для того, щоб зробити картинку адаптивної (тобто зробити так, щоб вона розтягувалася або стискалася по ширині контейнера), досить скористатися наступним кодом:
І дійсно, в деяких випадках цим можна обмежитися. Цей трюк відмінно працює, коли вікно браузера стає менше. Але що, якщо ширина контейнера, в якому лежить картинка, стає більше дозволу картинки? Правильно. Картинка розтягується по ширині контейнера, але якість залишає бажати кращого. А що робити, якщо потрібна підтримка здатністю 2048 x1536px?
Якщо ви не використовуєте svg і це растрове зображення, то перше, що спадає на думку, - це взяти картинку, яка підходила б до максимального дозволу landing page, а вже зі зміною розміру вікна браузера, вона буде стискатися з нормальною якістю.
Можна спробувати поставити кілька Дивов з картинками, а потім, за допомогою медіазапросов, приховувати непотрібні і показувати тільки ту картинку, яка підходить під даний дозвіл.
Начебто проблема вирішена. Але справа в тому, що браузери, для того, щоб прискорити відображення сторінки предзагружают картинки, які прописані в html до того, як почне оброблятися css. Може я не зовсім правильно висловився (поправте), але якщо провернути такий трюк, то все картинки все одно будуть завантажені, незалежно від того, що прописано в css. А значить ми тільки погіршили становище для мобільних пристроїв. Тепер їм доведеться вантажити не одне, а кілька зображень.
У цьому можна переконатися, відкривши інструменти розробника і заглянувши у вкладку «Мережа».
Взагалі, існує ще багато проблем, які можуть виникнути при верстці адаптивних зображень. І рішень, накопичилося теж не мало. Все залежить від конкретної ситуації.
В html 5 з'явився тег picture, який дозволяє вирішити більшість проблем і створений саме для створення адаптивного (чуйного) дизайну. Його конструкція нагадує теги video і audio. Суть роботи полягає в тому, що всередині тега picture задаються кілька зображень під конкретні дозволу екрану. Виглядає це приблизно так:
Особливість в тому, що замість src - використовується srcset і застосовується щось схоже на медіазапроси. Маленька картинка вантажиться при вирішенні менше 319px. Середнє зображення при дозволі від 320px до 480px і т.д.
Взагалі, при використанні нових тегів, я рекомендую заглядати на це сайт і перевіряти поточний стан речей.
Як бачите ситуація на даний момент залишає бажати кращого. Немає підтримки на IOS пристроях, на Macbook (ах) і на IE (Хоча, користувачів IE - не шкода, вони повинні страждати). Думаю, що всі ми не готові втрачати таку кількість користувачів. Ні, неправильно висловився. Чи не втрачати, адже наша основна картинка завантажиться і коректно відобразиться. Але все одно, хотілося б не втрачати клієнтів з технікою apple через довгої завантаження сторінки, так як це, швидше за все, платоспроможна аудиторія
Для того, щоб використовувати переваги цього тега вже зараз, потрібно скористатися невеликим скриптом (між тегами head) picturefill.js.
Тепер всі пристрої повинні підтримувати таку структуру верстки адаптивних картинок. Правда на Маке я не тестував (не обзавівся поки).
На відміну від способу, описаного вище, зараз вантажиться тільки одна картинка, а не три, як це було раніше.