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

  1. Почему изображения важны для клиентов и заказчиков
  2. Как работает отзывчивость изображения - пример использования Narrative
  3. Движение вперед с отзывчивыми изображениями
  4. Аудит изображений
  5. Дальнейшее обучение
  6. Оставаться отзывчивым

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

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

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

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

Почему изображения важны для клиентов и заказчиков

Существует множество других случаев, когда время загрузки изображения оказало значительное влияние на работу мобильного пользователя. Команда в Etsy нашел повышенный показатель отказов 12 процентов на мобильных устройствах, когда они добавили 160 КБ изображений на страницу. изучение по архиву HTTP показал, что изображения занимают подавляющее большинство средней веб-страницы.

График, демонстрирующий средние байты на страницу в марте 2017 года (источник:  httparchiveГрафик, демонстрирующий средние байты на страницу в марте 2017 года (источник: httparchive.org ).Изображения составляют общий вес средней страницы.

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

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

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

Введены новые атрибуты image.height, image.width и image.aspect_ratio. Эти атрибуты можно использовать с обычным атрибутом изображения браузера srcset для загрузки изображения определенного размера в зависимости от размера экрана, на котором оно отображается. Что очень полезно в атрибуте srcset, так это то, что он позволяет вам определять набор изображений, которые может выбирать браузер.
Это означает, что меньшие версии изображения могут быть загружены на меньшие экраны, тем самым сокращая время, которое браузер тратит на загрузку страницы.

«Старый» метод, который Shopify использует для назначения размеров изображениям, - это именованный фильтр изображений. Например, grande для изображений будет отображать изображение размером до 600 x 600 пикселей, а большое изображение будет отображать изображение размером до 480 x 480 пикселей. Хотя эти параметры URL все еще действительны и будут работать с существующими темами, они устарели. Числовые параметры могут указывать точные размеры в пикселях для ширины и высоты изображения.

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

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

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

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

Вам также может понравиться: Как оптимизировать темы для производительности ,

Как работает отзывчивость изображения - пример использования Narrative

Первая встроенная тема Shopify, которая использовала адаптивные изображения таким образом, была повествовательный , выпущен в апреле этого года , Полноэкранные изображения высокого разрешения на главной странице были огромным приоритетом для разработчиков, которые работали над «Рассказом», но это также должно было иметь смысл в меньшем масштабе.

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

В этом случае мы можем видеть, что существует диапазон размеров изображения от 540 пикселей до максимальной ширины изображения 2048 пикселей. С девятью различными вариантами, широкий диапазон размеров экрана приспособлен для. Это гарантирует, что лучшая версия изображения отображается независимо от контекста. Здесь стоит отметить, что максимальный размер изображения составляет 4472 пикселя x 4472 пикселя.

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

Lazysizes также заботится о плотности пикселей. Многие современные телефоны (например, с экранами Retina) имеют плотность пикселей больше чем один. Это означает, что размер экрана номинально может составлять 500 пикселей в ширину, но если плотность пикселей равна двум, лучшее изображение для загрузки будет такое, которое имеет ширину 1000 пикселей.

Пиксели на дюйм (PPI) - это измерения плотности пикселей на экране (источник:  Гафф гафф )  ,Пиксели на дюйм (PPI) - это измерения плотности пикселей на экране (источник: Гафф гафф ) ,

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

  1. Предварительно загрузите изображение с низким разрешением для слайд-шоу, почти как заполнитель.
  2. Изучите устройство / ширину экрана.
  3. Загрузите изображение, указанное в списке ширины данных, которое наиболее близко соответствует размеру экрана.

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

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

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

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

По мере увеличения размера экрана загружаются большие изображения, и вы можете видеть, что они появляются в нижней части консоли. Документация Google дает более подробную информацию об использовании справочника по сетевому анализу в Google Dev Tools.

Вам также может понравиться: Создание повествования: новая тема Shopify для рассказывания историй ,

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

Теперь, когда эти новые атрибуты доступны, разработчики тем могут использовать их, чтобы адаптировать изображения к существующим темам. Следующий запуск повествования Разработчики тем Shopify теперь используют эти инструменты для обновления наших собственных тем, таких как Debut, Brooklyn и другие.

Например, Debut ранее отображал изображения на странице блога с фиксированным размером 345 пикселей в ширину:

Однако теперь мы можем установить диапазон разных размеров, которые выберет браузер, в соответствии с размером контейнера изображения:

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

Аудит изображений

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

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

Вам также может понравиться: Расширение возможностей электронной коммерции: последние обновления интернет-магазина Shopify и Liquid ,

Дальнейшее обучение

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

Оставаться отзывчивым

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

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

Как вы используете отзывчивость изображения для улучшения дизайна сайта? Расскажите нам в разделе комментариев ниже.

Похожие

Как вы находите и удаляете шпионское ПО с вашего компьютера?
Существуют вирусы, которые копируют то, что вы печатаете на клавиатуре компьютера, записывают звук и изображение, записанные вашей веб-камерой, даже когда она выключена. Это так называемый, шпионское , В этой статье мы опишем, как распознать и удалить их и как избежать заражения. Шпионское ПО - это тип компьютерного вируса, который вместо удаления файлов или показа рекламы занимается
Безналичный расчет - как безопасно платить в интернете
Вот несколько идей о том, как легко, быстро и прежде всего оплачивать покупки, сделанные онлайн. Если вы покупаете что-то в интернет-магазине, но по разным причинам предпочитаете платить наличными при получении посылки, это как если бы вы писали электронное письмо, а затем распечатывали его и отправляли обычной почтой. Также прочитайте: Начал мобильную оплату по ссылке Многие
Осторожно, есть новый вирус, который путешествует по скайпу
... с быстро распространяется через Skype , Вирус, о котором идет речь, открывает заднюю дверь, которую можно использовать для установки вредоносного ПО, которое захватывает ПК до тех пор, пока оно не заплатит определенную сумму денег (например, известное вирус полиции )"> Новый вирус быстро распространяется через Skype , Вирус, о котором идет речь, открывает заднюю дверь, которую можно использовать
Юзабилити аудит сайта или интернет-магазина
В этой статье мы собрали ответы на самые популярные вопросы, с помощью которых можно разобраться, что такое юзабилити аудит, как он связан с конверсией и что следует знать к заказу этой услуги. Итак,
Как использовать Chrome Remote Desktop в качестве альтернативы TeamViewer
... для удаленного подключения к компьютерам. Это так же просто, как установить программное обеспечение (или использовать переносную версию без установки), поделиться идентификатором и паролем с экрана TeamViewer, с которым вы хотите поделиться этим экраном. Для удаленных подключений больше не требуется сложной конфигурации. Одна вещь, которая заставляет нас искать альтернативу TeamViewer, это то, что она не бесплатна. TeamViewer бесплатен только для личного использования. Хотя я использую его
Как отобразить панель управления в меню WinX Windows 10
Windows 10 v1703 удалила запись панели управления из меню WinX . Теперь вы видите элемент, который открывает настройки . Меню WinX - это меню, которое появляется при нажатии кнопки «Пуск». Microsoft хочет, чтобы пользователи отошли от Панели управления, и поэтому постепенно перемещает все настройки из нее в Настройки. Но если вы хотите отобразить или показать панель управления вместе с настройками, вот как вы это делаете. Мы уже видели,
Как сделать интернет-рекламу в России на Яндекс.Директе
С января 2016 года TSW является сертифицированным агентством Яндекс, а также пятью другими по всей Италии. Яндекс.Директ - это рекламная система, основанная на аукционе, которая позволяет вам создавать кампании в сети Search and Display, предлагая брендам, связанным с платформой, огромную возможность продвигать продукты и услуги в Российский рынок в восстановлении , Как сертифицированное агентство
Как выбрать пол для маленькой квартиры?
... сто нам приходится внедрять нестандартные идеи и решения для квартиры, что позволяет максимально эффективно использовать пространство. А как насчет пола? Как вы заканчиваете нашу розетку, чтобы мы чувствовали себя комфортно и комфортно в ней? Ниже, в сотрудничестве с брендом SWISS KRONO, мы представляем способы отделки небольшой квартиры. Вопреки внешнему виду, с помощью соответствующих панелей пола, мы отремонтируем студию
Свадебная фотокнига. Как сэкономить?
Что такое свадьба? Это самый счастливый момент жизни! Так ответит практически каждый, кто уже в клубе браке или только туда собирается. Но помимо прочего, свадьба - это марафон вызов, где нужно все предусмотреть. И здесь возникает ряд вопросов: Как правильно подобрать тему такого торжественного мероприятия? Какое платье выбрать? Как будет выглядеть свадебная фотокнига?
HTC One S9: «фото как профи» в среднем диапазоне
... для ее антенн, и финальным вертикальным тонким соединителем, соединяющим верхнюю с фотообъективом. Квадратные закругленные углы, он сопровождается двойной светодиодной вспышкой сбоку и является главной достопримечательностью этой модели по заявлению производителя. Спереди линии немного грубее, что указывает на телефон среднего уровня. На бумаге его технические данные не особенно впечатляют. HTC One S9 оснащен восьмиъядерным процессором MediaTek Helio X10 с тактовой частотой 2 ГГц,
Как исправить ошибку "I" на вашем iPhone
Обновление 9/9/17: Apple выпустила iOS 11.1.1 , который исправляет эту проблему. Из Отдела действительно странных и мистических ошибок приходит следующее: некоторые пользователи iPhone, использующие последнюю версию iOS 11, не могут ввести заглавную букву «I». Это означает, что миллионы людей, которые пытались отправить текст своим друзьям: «Я получил

Комментарии

Как пользователи находят ваш сайт, как они перемещаются по нему, как долго они остаются и куда они идут?
Как пользователи находят ваш сайт, как они перемещаются по нему, как долго они остаются и куда они идут? Таким образом, Google Analytics, по сути, является инструментом обработки пользовательских данных. Что такое GDPR и как это влияет на мой сайт? Общее положение о защите данных Это закон ЕС, который устанавливает строгие требования к обработке данных граждан ЕС. Он вступил в силу 25 мая 2018 года
Как работает шпионское ПО?
Как работает шпионское ПО? По сути, шпионское ПО пытается украсть информацию жертвы без ее ведома. Поэтому эти программы стараются игнорировать наше внимание . Иногда они делают это, притворяясь обычными приложениями. В зависимости от программы и ее сложности, компьютерный шпион может: сохранить то, что вы печатаете на клавиатуре (так называемый кейлоггер), делать фотографии или записывать видео с помощью веб-камеры, сохранить
Как это работает на практике?
Как это работает на практике? Видео обзор Смотрите также другие видео techManiaKa на YouTube ! Технические характеристики и размеры ~ 5,2 кВт / 7 кВт R1 / 2 (стандарт) 12 В 230 В / 50 Гц IP-40
Как мозг создает космические карты - Как не потеряться?
Как мозг создает космические карты - Как не потеряться? - доктор Рафал Чайковски (IBD PAN) 17.45-18.45: Сколько мы можем прочитать из дюжины или около того движущихся точек? Биологическое движение, социальные взаимодействия и шизофрения - Лукаш Окрушек, MA (UW, KCL) {pullquote} Во время обучения в магистратуре я имел удовольствие быть частью великой команды, создавшей кружок нейробиологии, который
Exe и почему он работает?
exe и почему он работает? До Windows 7 процесс CSRSS рисовал сами консоли (командную строку). В Windows 7 и более поздних версиях процесс Консольный хост (conhost.exe) рисует консольные окна. Однако csrss.exe по-прежнему отвечает за запуск процесса conhost.exe при необходимости. Другими словами, этот процесс отвечает за несколько важных системных функций в
Так как же температура iPad Air 2 во время работы?
Так как же температура iPad Air 2 во время работы? Здесь я должен выделить две ситуации. Во-первых, когда планшет не особенно загружен, то во время лазания по воскресеньям / праздникам он отлично проводит время на диване. Затем даже при игре, например, в Asphalt 8 Airborne прогревается только возле правой боковой рамки более или менее на высоте яблока, выгравированного на спине. Кроме того, оно оставалось крутым. Вторая ситуация - и единственная, с которой я встречался - имела место
Как это работает?
Как это работает? Согласившись участвовать в программе, через несколько дней после размещения заказа Ceneo отправляет клиенту электронное письмо с просьбой провести опрос с оценкой транзакции. Каждому заказу присваивается одна уникальная копия опроса, благодаря которой Клиент оценивает каждую транзакцию один раз.
Но как работает первая в мире криптовалюта с децентрализованным контролем?
Но как работает первая в мире криптовалюта с децентрализованным контролем? Видео: Фильтр Новости Рисунки: Пол Нордсет Клип: Тора Линд Берг Музыка: Кевин Маклеод Показать еще задача Будущее покажет, преуспеют ли братья Винклевосс снова. Но сначала они должны найти решение потенциальной проблемы, которая может поразить доллары Близнецов и другие «стабильные монеты»: Точно так же, как меньшие колебания стоимости позволяют криптовалюте стать более удобной
Как настроить цвет на мониторе и распечатать как можно больше?
Как настроить цвет на мониторе и распечатать как можно больше? Изображение на мониторе может быть немного ближе к изображению на распечатке, если правильно откалибровать профессиональный монитор, но его трудно получить среднестатистическому пользователю, даже невозможно. На восприятие цветов также влияют: освещение, время суток, цвет стен в комнате, тип ламп - как для распечатки, так и для монитора. Изображение на мониторе никогда не будет выглядеть так же, как распечатка.
Как ты думаешь, как Антек поделится фотографией Юлки на «день рождения», чтобы снова заглушить слухи?
Как ты думаешь, как Антек поделится фотографией Юлки на «день рождения», чтобы снова заглушить слухи?
Как работает Huawei среднего класса каждый день?
Как работает Huawei среднего класса каждый день? Спецификация Huawei P8 Lite : 5-дюймовый IPS-дисплей с разрешением 1280 x 720 пикселей, поддерживающий до 10 точек контакта, Android 5.0 Lollipop с EMUI 3.1, Hisilicon Kirin 620 с 8 ядрами ARM Cortex A53 1,2 ГГц и графикой ARM Mali 450MP4 700 МГц, 2 ГБ ОЗУ, 16 ГБ встроенной памяти (бесплатно 9,68 ГБ), 13-мегапиксельная камера с одной лампой,

Как вы используете отзывчивость изображения для улучшения дизайна сайта?
А как насчет пола?
Как вы заканчиваете нашу розетку, чтобы мы чувствовали себя комфортно и комфортно в ней?
Как сэкономить?
Что такое свадьба?
И здесь возникает ряд вопросов: Как правильно подобрать тему такого торжественного мероприятия?
Какое платье выбрать?
Как будет выглядеть свадебная фотокнига?
Как пользователи находят ваш сайт, как они перемещаются по нему, как долго они остаются и куда они идут?
Что такое GDPR и как это влияет на мой сайт?