Оптимизация фоновых изображений CSS для Интернета. Руководство по оптимизации баннеров HERO | Дмитрий Покидов | pixboost
Оптимизация изображения для баннера HERO с помощью CSSЧто бы вы сказали, если бы я сказал вам, что есть способ сделать так, чтобы все ваши фоновые изображения CSS не только хорошо выглядели, но и работали хорошо практически в кратчайшие сроки?
Оптимизированные фоновые изображения CSS всегда делают веб-сайт надежным и профессиональным. Кроме того, поиск Google любит быстрые и эффективные сайты, ранжируя их намного выше других.
В этом посте/руководстве я покажу вам:
- как построить простой баннер героя с использованием фоновых изображений CSS ;
- как максимизировать производительность с помощью оптимизации баннера героя .
Давайте сделаем это!
Фоновые изображения CSS — это изображения, для которых используется специальное правило CSS background-image .
Он применяет изображение к фону элемента DOM.
Свойство
background-imageзадает изображение для использования в качестве фона элемента. По умолчанию изображение повторяется, поэтому оно покрывает весь элемент. w3cschools.com
Следовательно, важно, чтобы изображение было того же размера, что и элемент, чтобы можно было масштабировать его. Но давайте поговорим об этом позже, в пошаговом руководстве.
Фоновые изображения CSS особенно полезны, поскольку поверх изображения можно добавлять другие элементы. Вот некоторые примеры:
- текст
- призыв к действию
- любые другие элементы, например формы.
Одним из самых популярных вариантов использования фонового изображения CSS является баннер hero .
Почему так?
Во-первых, он позволяет автоматически масштабировать изображение до размера веб-страницы, а во-вторых, разместить заголовок и, возможно, призыв к действию на баннере героя.
Ниже приведен пример баннера героя:
Все примеры из этой статьи доступны на моем демонстрационном веб-сайте: www.midday.coffee
Давайте посмотрим, как мы можем реализовать главный баннер, используя необработанный HTML и CSS, добавим правило background-image и сделаем его как для настольных компьютеров, так и для мобильных устройств.
Шаг 1. Разметка примера ниже достаточно проста и понятна. Мы создаем элемент Шаг 2. Как видите, мы еще не установили изображение для баннера нашего героя. Для этого мы будем использовать правило CSS background-image : Основные биты находятся в верхней части фрагмента здесь: Теперь мы можем поиграть с примером, чтобы увидеть, как он ведет себя, когда мы меняем размер окна браузера. Как видите, баннер героя всегда растягивается на всю ширину экрана. Шаг 3. Наконец, давайте сделаем его удобным для мобильных устройств , так как он занимает слишком много места по вертикали, а текст немного смещен. В приведенном выше фрагменте мы используем медиа-запрос , который указывает браузеру переопределять CSS баннера, когда ширина окна браузера меньше 576 пикселей. Давайте погрузимся глубже и сделаем наш геройский баннер настоящим героем! К настоящему времени у нас должен быть полный и функциональный пример баннера героя. В 2018 году 52,2% из всего трафика веб-сайтов по всему миру было сгенерировано с помощью мобильных телефонов по сравнению с 50,3% в предыдущем году. Statista.com Подробнее о тестировании производительности изображений здесь . Шаг 1. Во-первых, давайте посмотрим, как работает наш баннер героя. Два основных фактора, на которые следует обратить внимание, — это размер изображения 9.0004 и его время загрузки . Давайте воспользуемся Chrome Developer Tools , чтобы получить эти значения. Чтобы открыть инструменты разработчика, нажмите F12 в веб-браузере Chrome. Затем перейдите на вкладку Network и установите дросселирование на Fast 3G , чтобы наши измерения не зависели от интернет-соединения: наше изображение баннера: Интересующие нас значения находятся в столбцах «Размер» и «Время» . Давайте перенесем их в таблицу, которая станет нашим отчетом о производительности: Мы записываем значения для настольных и мобильных экранов, так как планируем использовать адаптивные изображения для нашего баннера героя. Обратите внимание, что мы всегда используем одно и то же изображение, чтобы сейчас можно было скопировать значения для настольных компьютеров в столбец для мобильных устройств. Шаг 2. Пришло время оптимизировать наше фоновое изображение . В этой статье мы используем сервис Pixboost, чтобы сэкономить время, но вы можете отказаться от оптимизации и изменения размера изображений вручную и загрузить их на свой хостинг. Имейте в виду, что Pixboost предоставляет не только функции изменения размера и оптимизации изображений, но также: Шаг 3. Это как настроить URL: интеграция на основе URL. При желании вы можете изменить размер и оптимизировать изображение главного баннера с помощью других программ, таких как Photoshop или Gimp. Шаг 4. Давайте перезапустим наш тест производительности, зафиксируем и обновим результаты: Разве это не впечатляет?! Давайте продолжим! Шаг 5. Тем не менее, у нас одинаковые результаты для ПК и мобильных устройств. Это не имеет большого смысла, учитывая, что экраны настольных компьютеров намного больше, чем мобильные. Давайте это исправим. Из нашего медиа-запроса, который мы представили ранее, мы видим, что максимальная ширина экрана составляет 576 пикселей. Кроме того, мы устанавливаем высоту нашего главного баннера на 400 пикселей, поэтому максимальный размер изображения будет 576×400 пикселей. Это означает, что это максимальный размер, который нам нужно обслуживать для всех мобильных устройств. Все, что нам нужно сделать, это добавить отдельное свойство background-image к нашей контрольной точке CSS для мобильных устройств: Мы используем операцию «подгонки» , которая изменит размер изображения до точного размера. Посмотрим, как теперь выглядит наша производительность для ПК и мобильных устройств: Ура! Нам удалось уменьшить размер изображения до 28,7 КБ и время до 725 мс . Отличные новости для пользователей нашего сайта! Подробнее об использовании Pixboost здесь: Обзор инструмента оптимизации Pixboost.1
URL.
фонового изображения,
Поэтому мы можем копнуть немного глубже и посмотреть, как наше изображение ведет себя на разные устройства .
Обновим URL фонового изображения, чтобы оно было оптимизировано:
