close_menu

Адаптивные изображения

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

Простой метод адаптивности изображений

В большинстве случаев для реализации адаптивности графических объектов при разработке сайтов можно обойтись инструментарием CSS, который масштабирует изображение под экран пользователя. При этом изображения помещаются в область на веб-странице, которая либо идентичного размера (если не нужно адаптироваться под Retina-дисплеи), либо в несколько раз меньше самого изображения (если планируется просмотр на экранах с высоким разрешением).

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

Адаптивность изображений через обработку на фронт-энде

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

Также этот метод адаптивности изображений актуален, когда значимым фактором является скорость Интернет-соединения. Например, многие смартфоны обладают Retina-дисплеем с высоким разрешением, но при этом далеко не везде есть высокоскоростная 3G и 4G связь. В этой ситуации целесообразно передавать на устройства изображения более низкого качества по причине их меньшего «веса».

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

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

Адаптивность изображений через обработку на backend'е

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

Обработка на бэк-энде тоже зачастую требуется JavaScript, хотя иногда можно обойтись заголовками запроса (сведения о User Agent) для установления параметров устройства. При использовании механизма заголовков запросов JS не требуется, а вся система нормально работает со всеми браузерами. Единственным недостатком является то, что данный метод потребует больше возни с настройками.

Способы маскировки рекламыСпособы маскировки рекламы

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

Дорвей: определение и принцип действияДорвей: определение и принцип действия

Что такое дорвей? В переводе с английского это буквально означает «входная дверь». Следовательно, дорвей – это веб...

Современные технологии верстки и front-endСовременные технологии верстки и front-end

Верстка сайта выступает одним из этапов разработки веб-проекта и представляет собой «оживление» дизайн-макета сайт...