Картинки на фон сайта: Как добавить фоновый рисунок на веб-страницу?

Содержание

руководство по отложенной загрузке изображений — Дизайн на vc.ru

Перевод материала сооснователя сервиса для оптимизации изображений ImageKit Рахула Нанвани.

55 407 просмотров

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

Но изображения часто много весят, и это в первую очередь влияет на размер страницы. Согласно данным сайта HTTP Archive, средний вес страницы на компьютере составляет 1511 КБ. Изображения занимают почти 650 КБ, что примерно 45% от общего числа.

Теперь важно сделать быструю загрузку страницы с изображениями. В этом материале расскажу об отложенной загрузке — методе, который поможет сократить время загрузки страницы и уменьшить её размер, не жертвуя картинками.

Основные возможности — вкратце

Вот видео, демонстрирующее принцип работы. Обратите внимание, как при прокрутке страницы серый плейсхолдер заменяет изображение.

Что такое отложенная загрузка

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

Метод отложенной загрузки можно применить практически ко всему на странице. Например, если в одностраничном приложении JavaScript-файл не нужен пользователю до определённого момента, то лучше вообще не загружать его. Если изображение не требуется сразу, как только пользователь открыл страницу, загрузите его позже, когда оно действительно понадобится.

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

Инструменты

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

К любому изображению, которое пользователь не видит изначально, можно применить этот метод.

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

С помощью расширения Lighthouse для браузера Google Chrome можно узнать, какие изображения подходят для отложенной загрузки и сколько трафика можно сэкономить. В расширении есть раздел, посвящённый закадровым изображениям.

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

Способы реализации

Изображения на странице можно загружать двумя способами — с помощью тега <img> или с помощью CSS-свойства «background», которое позволяет установить одновременно несколько характеристик фона. Сначала рассмотрим более распространённый тег <img>, а затем перейдём к фоновым изображениям CSS.

Тег <img>

Отложенную загрузку изображений можно разделить на два этапа.

Шаг первый — предотвратить изначальную загрузку изображения. Для изображений, загруженных с помощью тега <img />, браузер использует атрибут тега «src» для запуска загрузки изображения. Не имеет значения, первое это или тысячное изображение в HTML и закадровое ли оно. Если браузер получит атрибут «src», это вызовет загрузку изображения.

Чтобы загрузить изображение через отложенную загрузку, нужно поместить URL-адрес изображения в атрибут «src». Допустим, указываем URL-адрес изображения в атрибуте «data-src» тега «image». Теперь, когда «src» пуст, браузер не начинает загрузку изображения.

Второй шаг — нужно дать установку браузеру, когда загружать изображение. Для этого устанавливаем, что как только изображение (то есть его плейсхолдер) попадает в окно просмотра, начинается загрузка. Чтобы проверить, попало ли изображение в окно просмотра, существует два способа. Рассмотрим оба с помощью рабочих примеров кода.

Загрузка изображений с помощью событий JavaScript

В этом методе используем отслеживание событий прокрутки (scroll), изменения размера (resize), смены ориентации (orientationChange) в браузере.

Когда происходит одно из этих событий, находим все изображения на странице, которые ещё не загружены. Проверяем, какие из них теперь находятся в окне просмотра. Это можно определить с помощью свойств «offset top», «scroll top» и «window height».

Если изображение вошло в окно просмотра, берём URL из атрибута «data-src» и помещаем его в атрибут «src». Это запускает загрузку изображения. Также удаляем класс «lazy», определяющий изображения, которые будут загружаться позже. После загрузки всех изображений удаляем инструменты для отслеживания событий.

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

See the Pen Lazy loading images using event handlers — example code by ImageKit. io (@imagekit_io) on CodePen.

Первые три изображения в примере загружаются заранее. URL-адрес присутствует непосредственно в атрибуте «src» вместо атрибута «data-src». Это необходимо для хорошего пользовательского опыта. Поскольку эти изображения находятся в верхней части страницы, их следует сделать видимыми как можно скорее. Мы не должны ждать события или выполнения JavaScript, чтобы загрузить их.

Загрузка изображений с помощью Intersection Observer API

Intersection Observer API — относительно новый API в браузерах. Он определяет, когда элемент входит в окно просмотра, и начинает действовать. В предыдущем методе приходилось связывать события, учитывать производительность и подсчитывать время появления элемента в окне просмотра.

Intersection Observer API делает процесс проще, помогает избежать вычислений и обеспечивает хорошую производительность.

Ниже — пример использования Intersection Observer API для отложенной загрузки изображений.

Как только API обнаруживает, что элемент вошёл в окно просмотра, используя свойство «isIntersecting», выбираем URL из атрибута «data-src» и перемещаем его в атрибут «src», чтобы запустить отложенную загрузку.

Как только это будет сделано, удаляем класс «lazy» из изображения, а также удаляем оттуда обсервер.

See the Pen Lazy loading images using IntersectionObserver — example code by ImageKit.io (@imagekit_io) on CodePen.

Если вы сравните время загрузки изображения двух методов — с отслеживанием событий и Intersection Observer API, — то обнаружите, что с помощью Intersection Observer API загрузка изображения запускается гораздо быстрее, и сайт уже не смотрится «вялым» при скроллинге.

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

Однако, как и всё новое, поддержка Intersection Observer API доступна не во всех браузерах. Таким образом, приходится возвращаться к методу отслеживания событий в браузерах, где Intersection Observer API не поддерживается. Учли этот момент в приведённом выше примере.

Отложенная загрузка фоновых изображений CSS

После тегов <img /> фоновые изображения являются наиболее распространённым способом загрузки изображений для страниц. Для тегов <img /> в браузере простой подход — если URL-адрес изображения доступен, то можно его загрузить.

С фоновыми изображениями CSS не всё так просто. Чтобы загрузить фоновые изображения CSS, браузер должен создать дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, то браузер не загружает фоновое изображение. Если применяется — загружает.

Поначалу это может показаться сложным, но такой же принцип лежит в основе техники отложенной загрузки фоновых изображений. Так мы обманываем браузер, не применяя свойство CSS «background-image» к элементу, пока этот элемент не попадёт в окно просмотра. Ниже рабочий пример отложенной загрузки фонового изображения CSS.

See the Pen Lazy Loading background images in CSS by ImageKit.io (@imagekit_io) on CodePen.

Здесь следует отметить, что код JavaScript для отложенной загрузки остаётся прежним. Мы используем Intersection Observer API, возвращаясь затем к отслеживанию событий. Хитрость заключается в CSS.

Элемент с идентификатором «bg-image» имеет заданное свойство «background-image» в CSS. Однако когда класс «lazy» добавляется к этому элементу, в CSS мы переопределяем свойство «background-image» и меняем его на значение «none».

Так как по правилам комбинация «bg-image» с «.lazy» имеет более высокое предпочтение в CSS, чем просто «bg-image», браузер применяет свойство «background-image: none» к элементу изначально.

Когда прокручиваем страницу вниз, the Intersection Observer (или отслеживание событий) определяет, что изображение находится в окне просмотра, и удаляет класс «lazy». Это изменяет применяемый сейчас CSS и применяет свойство «background-image» к элементу, начавшему загрузку фонового изображения.

Улучшить пользовательский опыт

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

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

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

1. Правильный дизайн плейсхолдеров

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

Мы использовали подобный плейсхолдер в нашем примере — везде он выкрашен в сплошной светло-серый цвет. Тем не менее можно сделать лучше. Ниже — примеры использования более удачных вариантов плейсхолдеров.

Плейсхолдер доминирующего цвета

Этот метод давно используется для результатов поиска изображений в Google и Pinterest.

Пример с Manu ninja

Может показаться, что это сложно реализовать. Но есть простой способ — сначала уменьшить изображение до пикселя 1×1, а затем масштабировать его до размера плейсхолдера — грубое приближение, но оно помогает легко получить один доминирующий цвет. Используя ImageKit, плейсхолдер доминирующего цвета можно получить с помощью цепного преобразования, как показано ниже.

Размер изображения-плейсхолдера составляет всего 661 байт, по сравнению с исходным изображением, которое имеет размер 12 700 байт — в 19 раз меньше. И это обеспечивает более приятный опыт перехода от плейсхолдера к изображению.

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

Плейсхолдер низкого качества (LQIP)

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

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

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

Рабочий пример и код для использования техники LQIP — по ссылке.

2. Добавление буферного времени

Часто пользователи быстро прокручивают страницу, и для загрузки и отображения картинки на экране требуется некоторое время. Событие «load image» может сработать с задержкой, как и плейсхолдеры. Это плохо влияет на пользовательский опыт.

Решение

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

С помощью Intersection Observer API можно использовать параметр «`root`» вместе с параметром «rootMargin» (работает по стандартному принципу поля CSS), чтобы увеличить границы рамки.

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

В этом примере используется пороговое значение 500 px для загрузки изображений.

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

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

Если не заметили ранее, во всех примерах третье изображение (image3.jpg) всегда загружается сразу, даже если оно находится вне области просмотра. Это было сделано в соответствии с тем же принципом: выполнить загрузку немного заранее для лучшего пользовательского опыта.

3. Как избежать смещения содержимого

При отсутствии изображения браузер не знает размеров содержимого, которое должно отображаться в пределах контейнера. Если не задать его с помощью CSS, конечный контейнер не будет иметь размеров, то есть его размеры будут равны 0 x 0 px.

Затем, когда изображение будет загружено, браузер изменит размер контейнера, чтобы он соответствовал изображению. Это изменение приводит к перемещению других элементов и называется смещением содержимого.

Как показано в этом материале Smashing Magazine, смещение контента и видео — довольно неприятный опыт для пользователя.

Решение

Этого можно избежать, указав высоту и (или) ширину для конечного контейнера, чтобы браузер мог нарисовать контейнер изображения с известной высотой и шириной.

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

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

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

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

Любое изображение, которое присутствует в окне просмотра или в начале страницы, не должно загружаться с помощью отложенной загрузки. Это касается любого изображения-заголовка, рекламных баннеров, логотипов. Пользователь должен видеть их, как только страница загрузится. Помните, что мобильные и десктопные устройства будут иметь разные размеры экрана и, следовательно, разное количество изображений, которые будут видны на экране изначально. Таким образом, необходимо учитывать тип устройства, чтобы решить, какие изображения загружать изначально, а какие нет.
Любое изображение, которое частично видно в окне просмотра, не должно загружаться с помощью отложенной загрузки. Это происходит по принципу, который обсуждался выше, — загружать чуть заранее. Любое изображение, находящееся, допустим, в 500 px от области просмотра, может быть загружено заранее.
Если страница не длинная, её можно пролистать за несколько движений. Или если за пределами окна просмотра меньше пяти изображений, то отложенную загрузку можно не использовать. Это не принесёт существенной выгоды пользователю с точки зрения производительности. Дополнительный JavaScript, который вы загружаете на страницу, чтобы включить отложенную загрузку, компенсирует выигрыш от отложенной загрузки такого небольшого количества изображений.

Популярные JavaScript-библиотеки

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

yall.js (Yet Another Lazy Loader) — использует Intersection Observer API и возвращается к отложенной загрузке на основе событий. Поддерживает все основные типы элементов HTML, но не «background-image». Также работает на Internet Explorer 11 и старших версиях.
lazysizes — библиотека с обширной функциональностью. Поддерживает адаптивные изображения «srcset» и атрибут «sizes». Высокая эффективность даже без Intersection Observer API.
jQuery Lazy — простая, основанная на jQuery, библиотека отложенной загрузки.
WeltPixel Lazy Loading Enhanced — расширение для Magento 2 для отложенной загрузки изображений.
Magento Lazy Image Loader — расширение для Magento 1.x для отложенной загрузки изображений.
Shopify Lazy Image Plugin — расширение для Shopify для отложенной загрузки изображений. Платная.
WordPress A3 Lazy Load — плагин отложенной загрузки изображений для WordPress.

Как проверить, всё ли работает

Самый простой способ — открыть инструменты разработчика в браузере Chrome. Перейдите на вкладку «Сеть» → «Изображения». Здесь при первом обновлении страницы должны загружаться только те изображения, которые должны присутствовать на странице изначально.

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

Другой способ — запустить расширение Lighthouse от Google Chrome на странице после внесения изменений и найти предложения в разделе Offscreen images.

Если не работает

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

Или можно использовать тег <noscript>, чтобы создать удобный интерфейс для этих пользователей. В треде Stack Overflow рассматриваются проблемы этого тега. Материал будет полезен для всех, чья целевая аудитория — такие пользователи.

Фоновые изображения веб-сайта | Скачать бесплатные изображения на Unsplash

A Photophotos 10k
А. В сотрудничестве с Марией Шалабаевой
Unsplash+
Разблокировать
3d renderHd 3d обои красно-белые
Юрий Ковалев
Hd обои небоHd синие обоиГоры изображения и картинки
–––– –––– –––– – –––– – –––– – – – –– –––– – – –– ––– –– –––– – –.
Shapelined
Hd серые обоиHd чикаго обоиповерхность
Bench Accounting
officeHd минималистские обоиминимализм
Samantha Gades
интерьердомашний завод
Leone Venter
deskminimalWebsite backgrounds
Unsplash logo
Unsplash+
In collaboration with Mariia Shalabaieva
Unsplash+
Unlock
digital imagerenderdisplay product
Joe Woods
Texture backgroundswallHd brick wallpapers
Jess Bailey
businessblogHd desktop wallpapers
Wesley Tingey
HD обоиРозовые обоиHD цветные обои
Henry & Co.
Hd pattern wallpapersHd abstract wallpapersHd art wallpapers
Simon Berger
Landscape images & picturesHd pastel wallpaperscolorful
Unsplash logo
Unsplash+
In collaboration with Mariia Shalabaieva
Unsplash+
Unlock
Hq background imagesHd wallpapersHd phone wallpapers
nightSpace images & обоиЗемля картинки и картинки
Kelly Sikkema
надписьHD темные картинкиHd черные обои
Billy Huynh
HQ фоновые изображения.
Unsplash+
Разблокировать
datumHd эстетические обоиartwork
Джоанна Косинска
workstationeryflat
3d renderHd 3d wallpapersred and white
Hd grey wallpapersHd chicago wallpaperssurface
interiorhomeplant
digital imagerenderdisplay product
Hd pattern wallpapersHd abstract wallpapersHd art wallpapers
Hq background imagesHd wallpapersHd phone wallpapers
writingHd dark wallpapersHd black wallpapers
HD белые обоиHD дизайн обоиБумажные фоны
workstationaryflat
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.
Hd sky wallpapersHd blue wallpapersMountain images & pictures
officeHd minimalist wallpapersminimalism
deskminimalWebsite backgrounds
Texture backgroundswallHd brick wallpapers
businessblogHd desktop wallpapers
Hd wallpapersHd pink wallpapersHd color wallpapers
Landscape images & picturesHd pastel wallpaperscolorful
Nightspace Images & Picturth Images & Pictures
HQ фоновые изображения. Фон веб-сайта 24 фото · Куратор Мишель Браун0011
3d renderHd 3d wallpapersred and white
officeHd minimalist wallpapersminimalism
digital imagerenderdisplay product
Landscape images & picturesHd pastel wallpaperscolorful
writingHd dark wallpapersHd black wallpapers
Cloud pictures & imagesNature imagesZoom backgrounds
workstationeryflat
Hd sky wallpapersHd blue фоткиГора фото
интерьерДомашнее растение
бизнесблогHd обои на рабочий стол
Hd узор обоиHd абстрактные обоиHd художественные обои
ночьКосмос картинки и картинкиЗемля картинки и картинки
Hd белые обоиHD дизайн обоиБумажные фоны
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.
Hd серые обоиHd чикаго обоиповерхность
рабочий столминимальныйВеб-фоны
Текстурные фоныстенаHd кирпичные обои
Hd обоиHd розовые обоиHd цветные обои
Связанные коллекции
Фон веб-сайта
45 фотографий · Куратор Marie Griehl
Фоновые изображения для сайта
55 фотографий · Куратор Eventdrive
Фото Michelle Brown Кураторский фон 2 90467 Веб-сайт
Hq фон фотографииHd картинкиHd обои на телефон
Hq фон фотоГалактика фотоЗвезды картинки0011
Просмотр премиальных изображений на iStock | 20% off at iStock
Unsplash logo
Make something awesome
Website Background — Illustrationen und Vektorgrafiken
Grafiken
- Bilder
- Fotos
- Grafiken
- Vektoren
- Videos
Durchstöbern Sie 431.
554 website background lizenzfreie Stock- und Vektorgrafiken. Oder starten Sie eine neuesuche, um noch mehr faszinierende Stock-Bilder und Vektorarbeiten zu entdecken.
Номер телефона:
Доверенный
нейтральный абстрактный фон. минимальный постер с диагональными формами. ruhiges design mit verlaufselementen. веб-сайт weißes-hintergrundbild. современная белая текстура. vektorillustration — фон веб-сайта сток-графика, клипарт, мультфильмы и символы
Нейтральная абстракция Hintergrund. Minimale Postervorlage mit…
Нейтральная абстракция Hintergrund. Минимальный постер с диагональными формами. Ruhiges Design mit Verlaufselementen. Веб-сайт Weißes-Hintergrundbild. Современная белая текстура. Вектордарстелунг.
weiß und blau modernes abstraktes breites banner mit geometrischen formen. dunkelblau-weißer абстрактный фон. — фон веб-сайта графика, клипарт, мультфильмы и символы
Цветные и синие современные абстракции баннеров с. ..
Белые и синие современные абстракции баннеров с геометрическими формами. Dunkelblauer und weißer abstrakter Hintergrund. Vektorillustration
punkt abstraktes pixel moderner randhintergrund — фон веб-сайта — графика, -клипарт, -мультфильмы и -символ
Punkt Abstraktes Pixel Moderner Randhintergrund
Modernes Hintergrunddesign for Pixelrandkanten.
Синий абстрактный фон веб-сайта — фон веб-сайта графика, -клипарт, -мультфильмы и символы
Синий абстрактный фон
Синий абстрактный фон Hintergrundpräsentationsvorlage
Диагональ абстрактных линий. Weißer Hintergrund mit Glatten Streifen. минимальный сайт-hintergrundvorlage. Кларес дизайн брошюры или плаката. векторные иллюстрации — фон веб-сайта сток-графика, клипарт, мультфильмы и символы
Абстрактные диагональные линии. Weißer Hintergrund mit glatten…
Abstrakte диагональная линия. Weißer Hintergrund mit glatten Streifen. Минимальный веб-сайт-Hintergrundvorlage. Klares Design für Broschüre oder Poster. Вектордарстелунг.
облачные технологии, концептбаннер. benutzerin, die informationen vom remote-server hoch- und herunterlädt. rechenzentrum mit servern. sichere speicherung von informationen. — фон веб-сайта, графика, клипарт, мультфильмы и символы
Cloud-Technologie, Konzeptbanner. Benutzerin, die Informationen…
Облачные технологии, Концептбаннер. Benutzerin, die Informationen vom Remote-Server hoch- und herunterlädt. Rechenzentrum mit Servern. Sichere Speicherung фон Informationen. Облачные вычисления. Flache Vektorillustration
креативная обложка или горизонтальный плакат в современном минималистичном стиле для фирменного стиля, брендинга, рекламы в социальных сетях, промо. современный макет-дизайн-ворлаж — фон веб-сайта сток-графика, -клипарт, -мультфильмы и -символ
Креативная обложка или горизонтальный плакат в современном минималистском стиле для
Креативная обложка или горизонтальная пластина в современном минималистском стиле для фирменного стиля, брендинга, рекламы в социальных сетях, промо. Moderne Layout-Designvorlage mit dynamischen, farbigen Overlay-Linien
abstraktes geometrisches weiß und grau auf hellem silbernem farbverlaufshintergrund. современный баннерный дизайн. vektorillustration — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole
Абстрактные геометрические изображения Weiß und Grau auf hellem silbernem…
Геометрические изображения Weiß und Grau auf hellsilbernem Farbverlaufshintergrund. Современный баннерный дизайн. Векториллюстрация.
синий современный абстрактный баннер с геометрическими формами. dunkelblauer abstrakter hintergrund. — фон веб-сайта графика, клипарт, мультфильмы и символы
Синий современный абстрактный баннер с геометрическими формами…
Синий современный абстрактный баннер с геометрическими формами. Dunkelblauer abstrakter Hintergrund. Vektor-Illustration
Flussiger Stil Bunte Pastell Abstrakte Hintergrund mit Elementen Vector. — фон веб-сайта — графика, -клипарт, -мультфильмы и -символ
Flussiger Стильная красочная пастельная абстракция Второстепенные элементы с элементами…
Liquid Style Красочные абстрактные пастельные части Второстепенные элементы с элементами вектора.
hellblau türkis farbverlauf defokussierte unscharfe bewegung abstrakter hintergrundvektor — website background stock-grafiken, -clipart, -cartoons und -symbole
Hellblau Türkis Farbverlauf Defokussierte unscharfe Bewegung…
Hellblau Türkis Farbverlauf Unscharf Unscharfe Bewegung Abstrakter Hintergrund Vektorillustration, Breitbild, Horizontal
Violett Lila, Rosa und Marineblau Unscharfe bewegungsverlauf abstrakter hintergrundvektor — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole Vektorillustration
dunkelblauer abstrakterhintergrund mit dreieck, linienstreifen und lichtkomposition — фон веб-сайта — графика, -клипарт, -мультфильмы и -символ
Dunkelblauer abstrakter Hintergrund mit Dreieck, Linienstreifen. ..
Dunkelblauer abstrakter Hintergrund mit Dreieck, Linienstreifen und Lichtkomposition. Modernes polygonales Gestaltungskonzept. Vektorillustration
веб-сайт-header-oder banner-design с многоугольной абстракцией внутренних и полных точек и строк. Глобальная сеть Netzwerkverbindung. digitale technik mit plexushintergrund und platz für ihren text — фон веб-сайта сток-графика, -клипарт, -мультфильмы и -символ
Website-Header-oder Banner-Design с полигональной абстракцией…
Website-Header-oder Banner-Design с многоугольной абстракцией Hintergrund und Verbindungspunkten und Linien. Globale Netzwerkverbindung. Digitale Technik mit Plexushintergrund und Platz für Ihren Text.
Абстрактные фоны с природными линиями — Летняя тема — — Фон веб-сайта стоковые графики, -клипарты, -мультфильмы и -символы
Абстрактные фоны с природными линиями -…
Abstrakter Hintergrund mit natürlichen Linienbildern. Органическая форма. Designhintergrund для сообщений в социальных сетях, обложек, печатных изданий и обоев
satz von vorlagentrennlinien-forms для веб-сайта. кривые линии, капли, волновая коллекция элементов дизайна для верхней, нижней страницы веб-сайта. разделитель заголовка для приложения, баннер или плакат. vektorillustration — фон веб-сайта графика, клипарт, мультфильмы и символы
Satz von Vorlagentrennlinien-Shapes für Die Website. Кривые линии,
Satz von Vorlagentrennlinien Formen für Website. Kurvenlinien, Tropfen, Wellenauflistung des Designelements für die Website oben und unten Seiten. Тренируйтесь для приложения, баннера или плаката. Векториллюстрация.
Abstrakt ROT Vektor Hintergrund Mit Streifen -Стоимость веб -сайта Stock -grafiken, -clipart, -cartoons und -symbole
Abstrakt ROT Vektor Hintergrund Mit Streifen
Abstrakter rotter vektorhintergrund mit streifen
, teilen, kommentier, abonnierbrund nobhenemlor -vel -vel -vel -syl -vel -vel -leml иллюстрация. satz von social-media-taste oder symbol vektor-illustration design-vorlage für videokanal, blog und hintergrund-banner-konzept — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole
Like, Teilen, Commentieren, Abonnieren и Teilen Symbol Schaltflä
веб-дизайн и верстка каркаса — фон веб-сайта, графика, -клипарт, -мультфильмы и -символ
Веб-дизайн и верстка Wireframe
Веб-дизайн и верстка-макет Пользователям нравится дизайн Hintergrund.
Unscharfer großer Panorama-Sommerhintergrund mehrfarbiger farbverlauf — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole
Unscharfer großer Panorama-Sommerhintergrund mehrfarbiger…
abstrakter dunkler schwarzer farbverlauf geometrischer formhintergrund. современный футуристический фон. kann für zielseiten, buchcover, broschüren, flyer, zeitschriften, brandings, banner, header, präsentationen und Hintergrundbilder verwendet werd — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole
Abstrakter dunkler schwarzer Farbverlauf geometrischer. ..
Abstrakter Dunkelschwarzer geometrischer Farbverlaufshintergrund. Современный футуристический фон. Kann für Landingpage, Buchcover, Broschüren, Flyer, Zeitschriften, Brandings, Banner, Kopfzeilen, Präsentationen und Hintergrundbilder verwendet werden
комикс поп-арт группа радиальный хинтергрунд — фон веб-сайта сток-графика, -клипарт, -мультфильмы и -символ
комикс поп-арт группа радиальный хинтергрунд
поп-арт-комикс-полоса-обложка-дизайн. Взрыв, изолированные комиксы в ретро-стиле радиальный круг Hintergrund. Halbtonfarbener Hintergrundrahmen.
abstraktes fließendes wellenbanner — фон веб-сайта стоковая графика, -клипарт, -мультфильмы и -символ
Abstraktes fließendes Wellenbanner
оранжевый абстрактный фон баннера — фон веб-сайта стоковая графика, -клипарт, -мультфильмы и -символ
Оранжевый абстрактный фон
морской абстрактный баннер. минимальный вектор хинтергрунда с пфайлином. facebook-обложка, социальные медиа-заголовок, веб-баннер — фон веб-сайта графика, -клипарт, -мультфильмы и -символ
Marineblau абстрактные языки Баннер. Minimaler Vektorhintergrund…
Marineblaues abstraktes langes Banner. Minimaler Vektorhintergrund mit Pfeilen und Kopierplatz für Text. Facebook-Cover, Social-Media-Header, Web-Banner
abstrakter grauer Moderner Hintergrund — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole
Abstrakter grauer moderner Hintergrund
abstrakter moderner sechseckhintergrund. Геометрическая текстура мит weißem und grauem honigmuster. векторная иллюстрация — фон веб-сайта, графика, клипарт, мультфильмы и символы
Abstrakter moderner Sechseckhintergrund. Geometrische Textur mit…
abstraktes nahtloses muster auf einem zeitungsthema — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole
abstraktes nahtloses muster auf einem Zeitungsthema
подкаст, аудио-программа онлайн-трансляции, лендинг пейдж ворлаж. winzige männchen, weibliche charaktere mit mikrofon, гарнитура — фон веб-сайта, графика, клипарт, мультфильмы и символы
Подкаст, аудиопрограмма, онлайн-вещание, целевая страница Vorlage.
Подкаст, Аудиопрограмма Интернет-вещание Landing Page Vorlage. Winzige männliche, weibliche Charaktere mit Mikrofon und Headset bei Huge Tablet, Livestream Entertainment. Cartoon Menschen Vektor Illustration
abstrakte blaue weichehintergrund — фон веб-сайта — графика, -клипарт, -мультфильмы и -символ
Abstrakte blaue weiche Hintergrund
Abstrakter Hintergrund
abstrakter blauer farbverlauf geometrischer form kreishintergrund. современный футуристический фон. kann für zielseiten, buchcover, broschüren, flyer, zeitschriften, brandings, banner, header, präsentationen und Hintergrundbilder verwendet werden — фон веб-сайта — графика, -клипарт, -мультфильмы и -символ
Abstrakter blauer Farbverlauf geometrischer Form KreisHintergrund.
Abstrakter geometrischer Verlaufskreishintergrund mit blauem Farbverlauf. Современный футуристический фон. Kann für Landingpage, Buchcover, Broschüren, Flyer, Zeitschriften, Brandings, Banner, Kopfzeilen, Präsentationen und Hintergrundbilder verwendet werden
papierschicht blue abstrakter hintergrund. verwenden sie für banner, abdeckung, poster, tapete, design mit platz für text. — фон веб-сайта графика, -клипарт, -мультфильмы и -символ
Papierschicht синий абстрактный Hintergrund. Verwenden Sie für…
dunkelblau unscharfer bewegungsverlauf weicher abstrakter hintergrundvektor — website background stock-grafiken, -clipart, -cartoons und -symbole
Dunkelblau Unscharfer Bewegungsverlauf Weicher abstrakter…
Dunkelblau Unscharfer Bewegungsverlauf Weicher abstrakter Hintergrund Vektorillustration
абстрактный монохромный векторный фон, брошюра для дизайна, веб-сайт, флаер. Geometrische Weiße Tapete für zertifikat, präsentation, zielseite — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole
Abstrakte weiße монохромный Vektor Hintergrund, für Design-Broschür
konzentrische neumorphe kreise Hintergrund abstract — background background stock-grafiken, -clipart , -cartoons und -symbole
Konzentrische neumorphe Kreise Hintergrund Abstract
Neumorphismus Schnittstelle GUI Interaktive Designelemente.
Weicher Hintergrund mit blauem farbverlauf — фон веб-сайта, графика, клипарты, мультфильмы и символы технология-дизайн. — фон веб-сайта, графика, клипарт, мультфильмы и символы
Dunkelblaue dynamische Verlaufslinien abstrakter Hintergrund….
Hintergrund der Diagonal Verlaufslinien. Абстрактный геометрический дизайн.
abstrakter, verschwommener, bunter verlaufsnetzhintergrund — фон веб-сайта сток-графика, -клипарт, -мультфильмы и -символ
Abstrakter, verschwommener, bunter Verlaufsnetzhintergrund
Abstrakter verschwommener farbiger Verlaufsgitterhintergrund
punkt-halbtonmuster-hintergrund. vektorabstrahmungskreiswellenraster oder geometrischer verlaufstexturhintergrund — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole
Punkt-Halbtonmuster-Hintergrund….
vektor weißerhintergrund — фон веб-сайта stock-grafiken, -clipart, -cartoons und -symbole 900 Вайссер Хинтергрунд
punkt-halbtonmuster-hintergrund. vektorabstrahmungskreiswellenraster oder geometrischer verlaufstexturhintergrund — фон веб-сайта фондовая графика, клипарт, мультфильмы и символы
Punkt-Halbtonmuster-Hintergrund….
vektorabstrahieren bunte flyeßende wellenlinien isoliert auf weißemhintergrund. gestaltungselement für hochzeitseinladung, grußkarte — фон веб-сайта стоковая графика, -клипарт, -мультфильмы и -символ
0011 шаблон целевой страницы — абстрактная геометрическая подсказка с блестящей иллюстрацией — фон веб-сайта стоковая графика, -клипарт, -мультфильмы и -символ
Шаблон целевой страницы — абстрактная геометрическая подсказка с… , der wie der Kosmos или Mikrokosmos aussieht. Современный и модный абстрактный Hintergrund mit Verlaufskreisern. Diese Vorlage kann für Ihr Design verwendet werden, mit Platz für Ihren Text (verwendete Farben: Gelb, Orange). Векторная иллюстрация (EPS10, общий формат и группа), общий формат (3:2). Einfach zu bearbeiten, zu manipulieren, in der Größe zu ändern oder einzufärben.
abstrakter unschärfe-hintergrund — фон веб-сайта, графика, клипарт, мультфильмы и символы компьютерное винтажное хипстерское почтовое облако, 1990-е годы, когда технология содержит элементы интерфейса. изменить компьютербраузер аккуратный векторный набор шаблонов — фон веб-сайта — графика, -клипарт, -мультфильмы и -символ
Retro-Nachrichtenfenster. PC Vintage Hipster Mail Cloud, 1990er…
Retro-Meldungsfenster. Винтажное хипстерское почтовое облако для ПК, 19 лет90er Jahre Technologie Nachrichten Schnittstellenelemente. Модифицирует альтернативы Компьютер-Браузер-Tidy-Template-Vektor-Kit. Иллюстрация к Bildschirmcomputermeldung
menschen reiten Golden Rockes in Sky набор целевых страниц веб-сайта.