Современные информационные технологии/2. Вычислительная техника и программирование

Крылов Е.В., Аникин В.К., Коваль Ю.М.

Национальный технический университет Украины "Киевский политехнический институт имени Игоря Сикорского"

Методика загрузки адаптивных изображений в Web-приложениях

Есть актуальная проблема – уменьшение времени загрузки Web-приложений на мобильных устройствах. После проведенных исследований StatCounter можно заметить, что количество переходов на сайт с мобильных устройств возрастает. На 2016 год 51.3 % людей в мире использовали мобильные девайсы для выхода в интернет. Также аналитики из компании Google определили, что пользователь замечает задержку загрузки на 0.4 секунды. В среднем человек, который загружает сайт с мобильного устройства готов ждать 6-10 секунд. После этого времени он может покинуть ресурс, что будет невыгодно. А если это интернет-магазин, то он может потерять своего покупателя.

Очень много работ проводится для оптимизации загрузки Web-приложений. На данный момент нет единого решения. Есть разные методы:

· Уменьшение объема загружаемых страниц

· Уменьшение объема графики

· Уменьшение количества запросов браузера

· Кэширование данных

· Сокращение размера кода css и javascript

Самое трудное – это оптимизировать изображение. Есть много проблем. Самые распространённые из них:

· Выбор нужного формата (векторный, растровый)

· Выбор алгоритма сжатия изображения (JPEG, PNG, GIF)

· Выбор параметров сжатия (с потерями, без потерь)

· Сделать несколько изображений под разное разрешение экранов

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

С появлением метода Client Hints от Google разработчиков можно получить 3 параметра:

· DPR – device pixel ratio, «плотность пикселей», величина аналогичная разрешению

· Viewport-Width – размеры экрана

· Width – ширина изображения на странице

[1]

Этот метод определяет набор полей заголовка HTTP-запроса. Поле заголовка клиентского запроса – это поле заголовка HTTP, которое используется HTTP-клиентами для указания данных конфигурации, которые могут использоваться сервером для выбора подходящего ответа. Клиенты управляют тем, какие Client Hints отправляются в запросах, исходя из их настроек по умолчанию, конфигурации пользователя и /или предпочтений. Разработчики могут предоставлять механизмы выбора пользователя, чтобы пользователи могли сбалансировать проблемы конфиденциальности с ограничениями полосы пропускания.

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

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

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

· Размер исходного изображения

· Размер конечного изображения

· Размер окна фильтра

Данный метод основывается на двух рядах значений. Первый ряд – это коэффициенты фильтра, а второй – интенсивность каналов пикселей. В результате выходит сумма произведений всех членов попарно. Это и есть интенсивность одного канала одного пикселя. Операция проходит горизонтально и вертикально, сделав два подхода.[3]

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

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

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

Литература:

1. https://www.searchengines.ru/tehnologia-client-hints.html

2. http://httpwg.org/http-extensions/client-hints.html

3. https://habrahabr.ru/post/321744/