Методы и приемы по улучшению фоновых изображений на Retina дисплеях

От автора: хотя в спецификации HTML5 и присутствуют Retina/HiDPI экраны в сочетании с медиа запросами и srcset, изображения, загруженные через CSS, не считаются достижением: не существует полного эквивалента srcset или sizes на CSS, чтобы поместить на фон страницы изображение с оптимальным разрешением.

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

Метод 1: избежать проблемы вовсе с помощью SVG

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

Сохранив его в большом разрешении (около 1000х650 пикселей) с качеством JPEG 25%, мы получим файл размером 17Кб (сжатый GZIP), что уже неплохо. Но если открыть изображение в Adobe Illustrator и воспользоваться инструментами Быстрая Трассировка и Расширение, потом экспортировать очищенный результат в SVG, на выходе уже будет 1.7Кб: 10% от оригинального JPEG, еще и в формате невосприимчивом к изменениям разрешения.

У SVG есть свои преимущества:

Метод 2: Увеличь изображение и снизь качество до нуля

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

Да, я сказал до 0%. Может звучать, как бред сумасшедшего – и такой способ не всегда работает – но растровое изображение с достаточно большим разрешением (> 1200px в ширину) может достойно выглядеть и при нулевом качестве: поблагодарить можно Dave Rupert, он первый отважился попробовать данный метод.

Основной недостаток это «один размер подходит всем»: предположение, что для всех экранов можно обойтись лишь highDPI изображениями, тем самым принуждая устройства загружать излишний контент. Лучшим решением было бы загружать растровое изображение под размер экрана пользователя; это можно сделать с помощью @media query.

Метод 3: Используйте Медиа Запросы

Сперва, для загрузки обычного фонового изображения без Retina экранов вам понадобится следующий код:

Затем добавьте медиа запросы, загружающие изображения с большим разрешением для Retina экранов:

Заключение

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

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: