Вы слышали, что Интернет стал более наглядным, и на вашем бизнес-сайте важны отличные изображения.
Но эти изображения могут быть бичом посетителей вашего сайта. Изображения составляют 1 МБ из 1,7 МБ, содержащихся на средней веб-странице.
Это не может быть большой проблемой для ваших посетителей на настольных компьютерах, использующих высокоскоростное подключение к Интернету. Однако, если вы видите или хотите видеть увеличение трафика с мобильных посетителей, эти изображения могут быть проблемой. Веб-страницы с изображениями могут загружаться очень долго. Посетители разочаровываются и покидают ваш сайт.
$config[code] not foundВозможно, вы внедрили адаптивный веб-дизайн, думая, что решает все ваши мобильные проблемы. И это правда, что адаптивный веб-дизайн решает некоторые проблемы. Он автоматически упорядочивает и отображает элементы вашего сайта для просмотра на более узких мобильных экранах.
Но адаптивный веб-дизайн - это не ответ на все вопросы. Это не обязательно решает проблему загрузки изображения. Даже с адаптивным дизайном эти тяжелые изображения часто все равно загружаются. Как кратко отмечает специалист по веб-производительности Йоав Вайс на веб-сайте Opera:
«Отзывчивый веб-дизайн RWD объединил новые возможности браузера и методы CSS для создания веб-сайтов, которые адаптируются к отображающему их устройству и выглядят идеально везде. Это позволило разработчикам перестать беспокоиться о ненадежном обнаружении устройств и думать о своих сайтах с точки зрения размеров области просмотра.
Но, несмотря на то, что сайты RWD выглядели по-разному на каждом устройстве, большинство из них продолжали загружать одни и те же ресурсы для всех устройств ».
Новый
Если вы ничего не знаете о HTML-коде, нетехническое определение: это особый язык. Когда этот код используется за кулисами в коде вашего сайта, этот язык дает инструкции о том, как браузер должен отображать текст и изображения. Новый элемент Picture является типом языка разметки HTML. Это написано так (согласно группе сообщества Responsive Images): Элемент Picture является отзывчивым изображений, не отзывчивый дизайн. Для нетехнических деловых людей это различие может показаться небольшим. Но когда дело касается производительности вашего сайта на мобильных устройствах, это может быть значительным. Согласно отчету ArsTechnica, новый элемент разметки решает проблемы, вызванные изображениями, которые должны были быть видны на полноразмерном мониторе - изображения, которые плохо транслируются на мобильные устройства.
«Когда браузер обнаруживает элемент Picture, он сначала оценивает все правила, которые может указать веб-разработчик. *** Затем, после оценки различных правил, браузер выбирает лучшее изображение на основе своих собственных критериев. Это еще одна приятная функция, поскольку критерии браузера могут включать ваши настройки. Например, в будущих браузерах может быть предложено отключить загрузку изображений в высоком разрешении через 3G, независимо от того, что может сказать любой элемент Picture на странице. Как только браузер узнает, какое изображение является лучшим выбором, он фактически загружает и отображает это изображение в старом добром элементе img. … То, что происходит, это Picture оборачивает тег img. Если браузер слишком стар, чтобы знать, что делать с Сначала не все разработчики приняли новый элемент Picture. История Ars Technica описывает процесс, который прошли лидеры сообщества веб-разработчиков, чтобы достичь точки, где $config[code] not found Но проблема теперь кажется решенной с новым элементом HTML изображения, который принимается.
Для деловых людей важно знать, что Реализация HTML-элемента Picture для изображений - это то, что нужно обсудить с вашим веб-разработчиком. Технически настроенные и самодельные могут пойти сюда, чтобы узнать, как использовать элемент Picture. Это отличная статья Скотта Гилбертсона. Не стесняйтесь реализовать
Изображения: Shutterstock; RICG Что такое элемент HTML изображения?
Ключевые моменты о
