Методи і прийоми щодо поліпшення фонових зображень на Retina дисплеїв

21

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

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

Метод 1: уникнути проблеми зовсім з допомогою SVG

Беручи до уваги якість ідеального фонового зображення – низька контрастність, переважно великі об’єкти, а не дрібні деталі, маленький розмір файлу і гнучкість у масштабуванні – у багатьох випадках SVG може стати ідеальним рішенням, навіть якщо оригінальне зображення є фотографією. Наприклад, візьмемо наступне зображення:

Методи і прийоми щодо поліпшення фонових зображень на Retina дисплеїв

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

body {
margin: 0;
background-image: url(birds-on-wire.svg);
background-size: cover;
}

У SVG є свої переваги:

На відміну від растрових зображень SVG можна легко перезатемнить, поліпшивши контраст на тлі основного тексту і зображень переднього плану.

SVG можна накладати повторно на фон, створюючи враження «безшовного» нескінченного зображення (приклад за посиланням).

SVG має маленьку вагу, так що його можна безпосередньо підключати через CSS DataURI рядок, зберігши HTTP запит і потенційно прискоривши завантаження сторінки.

Метод 2: Збільш зображення і знизь якість до нуля

Якщо векторні зображення не вихід для вас, і ви поспішаєте, то можна завантажити одну JPEG зображення і знизити його якість до 0%.

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

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

Метод 3: Використовуйте Медіа Запити

Спершу, для завантаження звичайного фонового зображення без екранів Retina вам знадобиться наступний код:

body {
background-image: url(«eagle-eye-panorama.jpg»);
background-size: cover;
}

Потім додайте медіа запити, завантажили зображення з великою роздільною здатністю Retina екранів:

@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»);
}
}

Висновок

Існує безліч способів використовувати великі фонові зображення, які будуть залишатися чіткими на всіх екранах, маючи при цьому мінімальний вага: як завжди, ідеальне рішення приходить з часом (визначте межі продуктивності для кожної сторінки, перед тим як почати) під час досліджень і тестування.