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