Как улучшить восприятие производительности с помощью нескольких фоновых изображений

Как улучшить восприятие производительности с помощью нескольких фоновых изображений

От автора: прямо сейчас я еду в поезде, а значит, у меня ужасный wifi. Большинство сайтов просто отказываются загружаться, а те, которые все-таки загружаются, не грузят изображения, из-за чего на веб-страницах остаются большие дыры. К счастью, большая часть изображений не критична для понимания контента, однако их отсутствие напомнило мне еще кое о чем. В моем случае это восприятие производительности, которое намного важнее реальной производительности. И это натолкнуло меня на идею.

Не так давно я консультировал клиента с высоконагруженным сайтом, которого, к сожалению, я не могу назвать. Меня взяли в середине разработки, чтобы помочь ускорить сайт.

Сайт изобиловал очень большими баннерами, которые даже с оптимизацией замедляли загрузку страницы. Я много чего сделал, чтобы заранее подгружать изображения, запускать запросы пораньше и т.д. Однако одна из самых простых моих техник заключалась в том, что я использовал средний цвет в качестве background-color для замены настоящего изображения, пока оно не загрузилось. Так пользователь не будет видеть огромные пустые пространства, пока изображения не загрузились. Этот крайне низкозатратный подход радикально повысил восприятие производительности:

откройте Photoshop;

фильтры >> размытие >> среднее;

с помощью пипетки выделите получившийся цвет;

используйте этот цвет в качестве background-color.

.masthead {
  background-image: url(/img/masthead.jpg);
  background-color: #3d332b;
}

Эту же технику я использовал на домашней странице моего сайта на своих баннерах. Если изображения загружаются очень долго, показываем пользователю однотонный цвет. Прямо сейчас в поезде я зашел на свой сайт и увидел следующую картину:

Как улучшить восприятие производительности с помощью нескольких фоновых изображений

Изображения не критичны для контента, в принципе, не важно, что они не загрузились. Хотя картинка и выглядит лучше меня самого, она слегка резковатая. Мы видим просто большой, однотонный, бездушный цвет. Как это исправить?

CSS градиенты и несколько фоновых изображений

Довольно просто, я хочу сделать грубый образ фотографии через CSS градиент. Нельзя говорить о том, что грубый образ будет действительно похож на изображение. Это будет буквально несколько сгустков часто используемых цветов. Эти цвета я использовал в качестве background-image на изображениях. Да ну! Изображения уже являются фоновыми изображениями. Не парьтесь, с IE9 мы можем задавать несколько фоновых изображений на одном элементе. Мы можем задать изображение и его градиентное приближение за один раз. То есть если в браузере есть CSS:

он может рисовать CSS приближения;

он может посылать запросы на настоящие изображения, которые подгрузятся, когда будет возможность.

Более подробно о нескольких фоновых изображениях на MDN.

Как создать приближение

Чтобы создать CSS-версию моего баннера из нескольких цветов, я открыл исходное изображение в Photoshop’е и разделил его на области с наибольшими оттенками. Так как большая часть объектов на изображении идет сверху вниз, я сделал вертикальные области. Очень удобно, области составляют 25% от изображения:

Как улучшить восприятие производительности с помощью нескольких фоновых изображений

Затем я выбрал каждую секцию по отдельности и использовал фильтры >> размытие >> среднее, что дало мне такую картину:

Как улучшить восприятие производительности с помощью нескольких фоновых изображений

Далее было необходимо скопировать каждый цвет и вставить их в CSS градиент:

linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%)

Что мне дало:

Как улучшить восприятие производительности с помощью нескольких фоновых изображений

Осталось лишь применить этот код, как второе значение свойства background-image:

.page-head--masthead {
  background-image: url(/img/css/masthead-large.jpg),
                    linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%);
}

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

Как улучшить восприятие производительности с помощью нескольких фоновых изображений

Разница небольшая, но, по крайней мере, не так топорно, как обычный однотонный цвет. Осталось добавить немного текстуры и намека на общую композицию отсутствующего изображения.

Практичность

Как вы могли заметить, в сети очень много мануалов по данной технике. Пока мы не найдем надежного способа автоматизировать этот процесс (или если не найдем), на мой взгляд, эту технику лучше использовать в случаях, как был у меня: отдельное изображение с очень низкой скоростью изменения.

Фолбэк на уровень ниже — просто взять средний цвет изображения и применить его в свойстве background-color. Тут уже не нужны градиенты и несколько фонов, но код придется писать под каждое изображение индивидуально.

Тем не менее, я очень доволен способом. Он дает пользователям с плохим соединением немного лучший контент. Если на вашем сайте есть такие же статичные изображения, советую поэкспериментировать с данной техникой.

Источник: http://csswizardry.com/

Редакция: Команда webformyself.

Современные тенденции веб-разработки

За ближайшие 5 дней мы составим ваш пошаговый алгоритм профессионального роста с нуля в сайтостроении...

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree