Взгляните на состояние прогрессивных изображений и восприятие пользователей

«Прогрессивные изображения» — горячая тема в наши дни. Мы часто сталкиваемся со статьями, объясняющими, как избежать появления пустого места в месте загрузки изображения. Medium и Facebook являются примерами веб-сайтов и мобильных приложений, которые применяют этот шаблон.

Недавно я писал о различных способах использования SVG в качестве заполнителей, и в календаре производительности PerfPlanet этого года были две публикации, в которых более подробно описывается SQIP, метод, основанный на размытых SVG: прогрессивная загрузка изображений с использованием Intersection Observer и SQIP и SQIP — расплывчатые векторы для предварительного просмотра производительности.

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

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

Мы уверены в этом?

Просматривая некоторые комментарии на Reddit, я нашел много проницательных (и негативных) мнений. Вот два из них:

«Я ненавижу веб-сайты, которые показывают размытую версию изображения до того, как загрузится последняя. Он играет с моими глазами. Я должен отвести взгляд и посмотреть, сделано ли это, прежде чем я смогу читать дальше. Я бы хотел, чтобы был способ отключить эту функцию».
- rocky1138, Hacker News

«Как люди пришли к выводу, что отображение низкоинформативной версии изображения для загрузки в качестве заполнителя приводит к более быстрой воспринимаемой загрузке? Мне все эти эффекты кажутся просто мусором и отвлекающими факторами, не приносящими никакой пользы — уж точно не восприятие скорости. В любом случае, я никогда не смогу понять, что это за изображение на самом деле, пока оно полностью не загрузится, с нашим простым заполнителем».
- dwb, Новости хакеров

Попытка найти исследования о восприятии пользователей

Я хотел найти какое-нибудь научное исследование, которое могло бы подтвердить, что эти методы загрузки изображений были (или нет) полезными. Это оказалось проблемой. Я не смог найти ни одного исследования, доказывающего, что отображение чего-то вроде размытой миниатюры перед загрузкой изображения улучшает восприятие пользователя. Затем я подумал о прогрессивных JPEG.

Назад к основам: прогрессивные JPEG

В определенном смысле у нас уже давно есть аналогичная «прогрессивная техника загрузки изображений». Хорошим примером является прогрессивный JPEG.

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

«Прогрессивные JPEG лучше, потому что они быстрее. Выглядеть быстрее — значит быть быстрее, а воспринимаемая скорость важнее фактической скорости . Даже если мы жадничаем до того, что пытаемся предоставить, прогрессивные JPEG дают нам как можно больше в кратчайшие сроки».

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

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

Прогрессивные методы, такие как Blur-up, SQIP, напоминают прогрессивные JPEG с точки зрения восприятия пользователем. Браузер сначала отображает низкокачественное изображение и заменяет его окончательным изображением при загрузке.

Интересно, что подавляющее большинство изображений JPEG используют базовый режим. Согласно некоторым источникам, прогрессивные JPEG составляют не более 7% всех JPEG. Если мы согласны с тем, что эти методы улучшают воспринимаемую пользователем производительность, то почему прогрессивные JPEG не используются более широко, чем базовые JPEG?

Исследование

Мне удалось найти только исследование под названием «Прогрессивный рендеринг изображений — добро или зло?», в котором пытались пролить свет на эту тему.

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

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

Недавно я упомянул это исследование в разговоре о LQIP (заполнители изображений низкого качества). Вскоре я получил несколько ответов, ставящих под сомнение строгость исследования:

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

— Тобиас Балдауф (@tbaldauf) 9 декабря 2017 г.

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

— Йоав Вайс (@yoavweiss) 9 декабря 2017 г.

Пока у нас есть одно исследование, к которому относятся скептически. Что еще у нас есть? Можем ли мы использовать существующие инструменты для измерения воспринимаемой производительности в качестве прокси?

Измерение воспринимаемого времени загрузки

Представьте себе эти две гипотетические диафильмы, записанные с какого-то сайта:

По общему мнению, пользователь будет воспринимать, что версия B загружается быстрее, чем версия A. Это связано с тем, что части страницы отображаются раньше, чем в версии A.

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

Время загрузки страницы в 1,2 секунды говорит нам часть истории, но не описывает, что пользователь видит в это время. В наши дни мы используем такие показатели, как индекс скорости, чтобы оценить, насколько быстро загружается страница. Индекс скорости измеряет площадь страницы, которая визуально не завершена. Делается это на нескольких скриншотах, сделанных через промежутки времени. Чем ниже число, тем лучше.

Если мы подумаем о методах прогрессивной загрузки изображений, как будет меняться индекс скорости при загрузке изображения? Будет ли эта область считаться «визуально завершенной», если мы используем заполнитель низкого качества?

Первоначально индекс скорости измерял прогресс, сравнивая расстояние между гистограммами, по одной на каждый основной цвет (красный, зеленый, синий). Это называется средней разницей гистограммы. Цель состоит в том, чтобы такие изменения, как перекомпоновки, когда все элементы на странице смещаются на несколько пикселей, не оказывали большого влияния на расчет. Дополнительные сведения об алгоритме см. в разделе «Измерение визуального прогресса» документа Speed ​​Index.

Я решил попробовать Webpagetest на странице, которая отображает некачественные заполнители (см. отчет о WebPageTest):

Мы можем заметить, что между 8 и 10 секундами изображение загружается. Размытый заполнитель увеличивает процент визуальной полноты с 75% до 83%. Загрузка финального изображения занимает от 83% до 93%.

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

Индекс скорости — не единственная метрика, которую мы можем использовать для измерения скорости рендеринга нашей страницы. Инструменты разработчика Chrome включают возможность проведения аудита производительности. Перейдите в « Audits » → Perform an audit » → Check 'Performance' → « Run audit .

Запуск аудита генерирует такой отчет:

Одной из сообщаемых метрик является «Индекс скорости восприятия». В этом прогоне значение равно 4,245 . Но что именно означает этот термин? Это то же самое, что и «индекс скорости» Webpagetest?

Подход индекса скорости к измерению попиксельного сходства, также называемый «средняя разница гистограммы», имеет некоторые недостатки. МГД не фиксирует визуальное восприятие формы, цвета или подобия объекта.

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

«В крупномасштабных эмпирических исследованиях, которые мы провели (используя более 500 лучших видеороликов мобильных веб-страниц Alexa, собранных с помощью WebPagetest), мы обнаружили, что SI и PSI линейно коррелируют (точнее, 0,91)». - Индекс скорости восприятия (PSI) для измерения производительности веб-страниц над сгибом

Индекс скорости восприятия

Согласно документации Google Lighthouse, индекс скорости восприятия рассчитывается с использованием модуля узла под названием Speedline. Этот пакет вычисляет индекс скорости восприятия на основе того же принципа, что и исходный индекс скорости, но он вычисляет визуальную прогрессию между кадрами, используя SSIM вместо расстояния гистограммы .

SSIM (структурное сходство) используется для измерения сходства между двумя изображениями. Этот метод пытается смоделировать то, как люди воспринимают изображения, и фиксирует форму, цвет и сходство объектов. У SSIM есть и другие интересные приложения: одно из них — оптимизация параметров сжатия изображений, например, cjpeg-dssim, который выбирает самый высокий уровень сжатия JPEG и генерирует изображение с достаточно близким SSIM.

Ниже вы можете увидеть оценки Image SSIM JS для изображений SVG, созданных с использованием Primitive. Чем больше форм мы используем, тем ближе оно к исходному изображению (SSIM = 1).

Более поздние альтернативы SSIM — это buttaugli (используется Guetzli, Google’s Perceptually Guided JPEG Encoder) и SSIMULACRA (используется Cloudinary).

Заключение

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

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

Как веб-разработчики, мы должны больше заботиться о загрузке веб-сайтов, которые мы создаем. Хорошо, что теперь у нас есть такие инструменты, как WebPageTest и Lighthouse, которые могут помочь нам легко измерить эффект от использования методов прогрессивной загрузки изображений. Больше никаких оправданий!