От автора: хотя в спецификации HTML5 и присутствуют Retina/HiDPI экраны в сочетании с медиа запросами и srcset, изображения, загруженные через CSS, не считаются достижением: не существует полного эквивалента srcset или sizes на CSS, чтобы поместить на фон страницы изображение с оптимальным разрешением.
Все это очень иронично, учитывая, что массивные фоновые изображения высокого разрешения, скорее всего, сильнее нагружают сеть и увеличивают время загрузки в отличие от инлайновых изображений.
Метод 1: избежать проблемы вовсе с помощью SVG
Принимая во внимание качество идеального фонового изображения – низкая контрастность, преимущественно большие объекты, а не мелкие детали, маленький размер файла и гибкость в масштабировании – во многих случаях SVG может стать идеальным решением, даже если оригинальное изображение является фотографией. К примеру, возьмем следующее изображение:
Сохранив его в большом разрешении (около 1000х650 пикселей) с качеством JPEG 25%, мы получим файл размером 17Кб (сжатый GZIP), что уже неплохо. Но если открыть изображение в Adobe Illustrator и воспользоваться инструментами Быстрая Трассировка и Расширение, потом экспортировать очищенный результат в SVG, на выходе уже будет 1.7Кб: 10% от оригинального JPEG, еще и в формате невосприимчивом к изменениям разрешения.
|
1 2 3 4 5 |
body { margin: 0; background-image: url(birds-on-wire.svg); background-size: cover; } |
У SVG есть свои преимущества:
В отличие от растровых изображений SVG можно легко перезатемнить, улучшив контрастность на фоне основного текста и изображений переднего плана.
SVG можно накладывать повторно на фон, создавая впечатление «бесшовного» бесконечного изображения (пример по ссылке).
SVG имеет маленький вес, так что его можно напрямую подключить в CSS через DataURI строку, сохранив HTTP запрос и потенциально ускорив загрузку страницы.
Метод 2: Увеличь изображение и снизь качество до нуля
Если векторные изображения не выход для вас, и вы спешите, то можно загрузить одно JPEG изображение и снизить его качество до 0%.
Да, я сказал до 0%. Может звучать, как бред сумасшедшего – и такой способ не всегда работает – но растровое изображение с достаточно большим разрешением (> 1200px в ширину) может достойно выглядеть и при нулевом качестве: поблагодарить можно Dave Rupert, он первый отважился попробовать данный метод.
Основной недостаток это «один размер подходит всем»: предположение, что для всех экранов можно обойтись лишь highDPI изображениями, тем самым принуждая устройства загружать излишний контент. Лучшим решением было бы загружать растровое изображение под размер экрана пользователя; это можно сделать с помощью @media query.
Метод 3: Используйте Медиа Запросы
Сперва, для загрузки обычного фонового изображения без Retina экранов вам понадобится следующий код:
|
1 2 3 4 |
body { background-image: url("eagle-eye-panorama.jpg"); background-size: cover; } |
Затем добавьте медиа запросы, загружающие изображения с большим разрешением для Retina экранов:
|
1 2 3 4 5 6 7 |
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { body { background-image: url("eagle-eye-panorama-2x.jpg"); } } |
Заключение
Существует множество способов использовать большие фоновые изображения, которые будут оставаться четкими на всех экранах, имея при этом минимальный вес: как всегда, идеальное решения приходит со временем (определите рамки производительности для каждой страницы, перед тем как начать) во время исследований и тестирования.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
