От автора: прямо сейчас я еду в поезде, а значит, у меня ужасный wifi. Большинство сайтов просто отказываются загружаться, а те, которые все-таки загружаются, не грузят изображения, из-за чего на веб-страницах остаются большие дыры. К счастью, большая часть изображений не критична для понимания контента, однако их отсутствие напомнило мне еще кое о чем. В моем случае это восприятие производительности, которое намного важнее реальной производительности. И это натолкнуло меня на идею.
Не так давно я консультировал клиента с высоконагруженным сайтом, которого, к сожалению, я не могу назвать. Меня взяли в середине разработки, чтобы помочь ускорить сайт.
Сайт изобиловал очень большими баннерами, которые даже с оптимизацией замедляли загрузку страницы. Я много чего сделал, чтобы заранее подгружать изображения, запускать запросы пораньше и т.д. Однако одна из самых простых моих техник заключалась в том, что я использовал средний цвет в качестве background-color для замены настоящего изображения, пока оно не загрузилось. Так пользователь не будет видеть огромные пустые пространства, пока изображения не загрузились. Этот крайне низкозатратный подход радикально повысил восприятие производительности:
откройте Photoshop;
фильтры >> размытие >> среднее;
с помощью пипетки выделите получившийся цвет;
используйте этот цвет в качестве background-color.
|
1 2 3 4 |
.masthead { background-image: url(/img/masthead.jpg); background-color: #3d332b; } |
Эту же технику я использовал на домашней странице моего сайта на своих баннерах. Если изображения загружаются очень долго, показываем пользователю однотонный цвет. Прямо сейчас в поезде я зашел на свой сайт и увидел следующую картину:
Изображения не критичны для контента, в принципе, не важно, что они не загрузились. Хотя картинка и выглядит лучше меня самого, она слегка резковатая. Мы видим просто большой, однотонный, бездушный цвет. Как это исправить?
CSS градиенты и несколько фоновых изображений
Довольно просто, я хочу сделать грубый образ фотографии через CSS градиент. Нельзя говорить о том, что грубый образ будет действительно похож на изображение. Это будет буквально несколько сгустков часто используемых цветов. Эти цвета я использовал в качестве background-image на изображениях. Да ну! Изображения уже являются фоновыми изображениями. Не парьтесь, с IE9 мы можем задавать несколько фоновых изображений на одном элементе. Мы можем задать изображение и его градиентное приближение за один раз. То есть если в браузере есть CSS:
он может рисовать CSS приближения;
он может посылать запросы на настоящие изображения, которые подгрузятся, когда будет возможность.
Более подробно о нескольких фоновых изображениях на MDN.
Как создать приближение
Чтобы создать CSS-версию моего баннера из нескольких цветов, я открыл исходное изображение в Photoshop’е и разделил его на области с наибольшими оттенками. Так как большая часть объектов на изображении идет сверху вниз, я сделал вертикальные области. Очень удобно, области составляют 25% от изображения:
Затем я выбрал каждую секцию по отдельности и использовал фильтры >> размытие >> среднее, что дало мне такую картину:
Далее было необходимо скопировать каждый цвет и вставить их в CSS градиент:
|
1 |
linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%) |
Что мне дало:
Осталось лишь применить этот код, как второе значение свойства background-image:
|
1 2 3 4 |
.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. Тут уже не нужны градиенты и несколько фонов, но код придется писать под каждое изображение индивидуально.
Тем не менее, я очень доволен способом. Он дает пользователям с плохим соединением немного лучший контент. Если на вашем сайте есть такие же статичные изображения, советую поэкспериментировать с данной техникой.
Источник: //csswizardry.com/
Редакция: Команда webformyself.
