SRCSET - Всемирная сеть

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

Традиционно на веб-страницах используются фотографии ограниченного разрешения и качества: сначала из-за низких скоростей соединений, а затем из-за небольшого разрешения собственно экранов. Более того, всегда считалось дурным тоном вешать на сайт "тяжелые" многомегабайтные изображения, которые сильно замедляли загрузку и к тому же обходились недешево на мобильных и других соединениях с помегабайтной тарификацией.

Но как же быть, если "оптимизированные" изображения выглядят ужасно на получающих все большее распространение "ретиноподобных" дисплеях, а владельцам обычных устройств нет смысла качать картинки высокого разрешения -- ведь невозможно размещать на странице одновременно несколько версий изображений? Или возможно?

Новый атрибут "srcset", входящий в состав расширений стандарта HTML5, о котором чуть ниже, позволяет выдавать изображения разного качества, в зависимости от разрешения экрана клиента. Поддерживаются модификаторы кратности -- например, 2х (плотность пикселей повышена вдвое), 3х (втрое).

Атрибут "srcset" поддерживается во всех браузерах, основанных на движке WebKit, и, разумеется в Apple Safari, но он пока не стал общепринятым стандартом.

Похожие статьи




SRCSET - Всемирная сеть

Предыдущая | Следующая