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