Новый элемент HTML <picture> позволит загружать сайты быстрее

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

Введение

Вы уже слышали о том, что Интернет становится все более визуальным и для бизнес-сайтов невероятно важными становятся хорошие изображения.

Однако подобные картинки могут вдарить по посетителям вашей странички. Объем изображения может занимать 1 МБ от объема средней страницы в 1,7 МБ.

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

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

Но адаптивный дизайн - не панацея. С его помощью не избавится от необходимости загрузки картинок. На сайтах с отзывчивым дизайном объемные изображения никуда не исчезают. Вот что отмечает на веб-сайте Opera специалист по веб-оптимизации Йоав Вайс:

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

Новый элемент HTML может это исправить.

Что же он собой предсталяет?

Если вы не знакомы с HTML, то можно сказать, что это специальный язык. Он используется при создании сайта и дает указания браузеру, как отображать текст и картинки .

Новый элемент <picture> отвечает за адаптивные изображения, но не за дизайн.

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

Согласно данным ArsTechnica новый элемент призван решить проблемы, связанные с отображением картинок для полноразмерных мониторов на экранах мобильных девайсов. <picture> сообщает браузеру, что нужно загрузить и отобразить меньшее изображение:

Когда браузер встречает элемент <picture>, то сначала пытается выяснить правила, заданные разработчиком. После он по собственным критериям выбирает лучшее изображение. И это очень даже хорошо, поскольку критерии браузера можно настроить. Например, в будущем браузеры могут предлагать остановить загрузку объемных картинок по 3G, независимо от того, что говорит элемент <picture>. Как только браузер определит лучшее изображение, он отобразит его с помощью старого доброго тега <img>.

А что, если <picture> будет обрамлять <img>? Если браузер слишком стар, чтобы понимать элемент <picture>, то он будет загружать картинку из резервного тега <img>.

Не все разработчики сразу приняли <picture>. Ars Technica пишет, что лидерам сообщества веб-разработки пришлось проводить целые кампании по рекламе нового элемента. Но теперь проблема улажена.

Новый элемент разметки <picture> уже скоро будет читаться вашим браузером. До конца года он по умолчанию будет поддерживаться Chrome и Firefox. Поддержка Opera также не за горами. Apple и Microsoft обещают учесть его в последних версиях браузеров Safari и Internet Explorer.

Для разработчиков важно знать, что <picture> может ускорить загрузку ваших сайтов, особенно на мобильных девайсах. Это очень хорошо для посетителей сайта.

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

Комментарии

0
Войти
Комментариев нет.
Войдите чтобы оставлять комментарии.