Состояние адаптивных изображений в 2017-м

Состояние адаптивных изображений в 2017-м

Хорошая новость: широкая поддержка браузеров

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

Новые стандарты адаптивных изображений поддерживают все современные браузеры, за исключением Opera Mini. И если ваше резервное изображение оптимизировано для небольших экранов - а так и должно быть - отсутствие поддержки Opera Mini - не проблема.

Смешанная новость: несогласованные реализации

Я все еще получаю вопросы от дизайнеров и разработчиков, которые видят разное поведение от браузера до браузера. Мы хотим, чтобы браузеры конкурировали, чтобы быстрее найти самые эффективные способы обработки изображений, и, таким образом, srcset позволяет браузерам свободно экспериментировать с их реализацией.

Но различное поведение вызывает путаницу. Самый распространенный вопрос, слышу от людей, которые тестируют srcset в Safari, и не видят загрузки новых изображений при изменении размера экрана.

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

Поэтому, пока это не баг, а фишка, нам стоит больше рассказывать, чего ожидать разработчикам.

Неосуществленные возможности

Новые стандарты адаптивных изображений позволяют нам экспериментировать с различными графическими форматами, не сломав интернет.

К сожалению, я не видел много экспериментов, в этом пространстве. Наши инструменты для этих форматов остаются недостаточными.

Нехватка экспериментов также связана с тем фактом, что многим организациям необходимо автоматизировать работу с изображениями. Похоже, организации признают эту необходимость, но работа часто уходит в пользу более насущных приоритетов.

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

image-set был предшественником srcset, но теперь он отстал от него. Ему нужна поддержка дескрипторов ширины, чтобы стать столь же мощным, как srcset. Это уже обсуждалось, но застопорилось.

Встраиваемые адаптивные изображения SVG

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

Хиты клиентов могут значительно упростить разметку адаптивных изображений. К сожалению, они поддерживаются только в браузерах на основе Blink (Chrome и Opera). Чтобы использовать хиты, вам необходимо определить браузер и после решить, можно ли пропустить подробную разметку адаптивных изображений или нет.

Состояние адаптивных изображений

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