Добавление фона на сайт | Weblium Help Center
Эта статья также доступна на:
Правильно подобранный фон поможет задать нужный тон для сайта, а также подчеркнуть имеющийся контент. На Weblium вы можете добавить картинку, видео или сплошную заливку на фон своего сайта.
Следуйте инструкциям ниже, чтобы добавить фон на сайт.
Важно: имейте в виду, что на данный момент нет возможности добавить единый фон ко всему сайту. Фон должен быть установлен для каждого блока на странице отдельно.
Добавление фона на сайт
Для этого наведите на нужный блок и перейдите в его настройки, кликнув на появившийся «бегунок»:
В новом окне откройте вкладку Фон и выберите одну из трёх опций — Цвет, Изображение, Видео:
Добавление цветного фона
Опция Цвет даёт возможность залить фон блока сплошным цветом либо же выбрать градиент.
После включения этой опции выберите один из предложенных цветов из существующей палитры сайта:
Подсказка: чтобы изменить текущую палитру сайта, обратитесь к статье Изменение цвета текста.
Если вы хотите выбрать собственный цвет, нажмите на иконку заливки и подберите нужный цвет. Вы также сможете настроить прозрачность заливки справа от палитры:
Если вы выбрали собственный градиент, здесь вы можете настроить два основных цвета, а также градус градиента, чтобы обозначить его направление:
Добавление картинки на фон
С помощью опции Изображение вы можете загрузить собственную картинку или же выбрать одну из стоковых изображений в галерее.
Кликните Загрузить и выберите файл с вашего устройства. При клике на кнопку Галерея вы перейдёте к уже загруженным изображениям на сайт, или же сможете добавить бесплатные стоковые изображения с платформы Unsplash:
Как только добавите картинку, у вас откроются новые инструменты для настройки изображения — эффекты прокрутки, фильтры и заливка:
Подсказка: узнайте больше о том, как создать иллюзию объёма для фоновых изображений, в статье Настройка параллакс эффекта.
Нажмите на Настройки позиционирования, чтобы выбрать масштаб фоновой картинки, а также точку фокуса для отображения на мобильных устройствах:
Добавление видео на фон
В разделе Видео вы сможете добавить видео на фон только с платформ Youtube или Vimeo.
Подсказка: YouTube видео в формате shorts не поддерживается, поэтому нужно будет в ссылке заменить shorts/ на watch?v= чтобы преобразовать его в стандартный формат.
Для этого вставьте соответствующую ссылку в нужное поле:
Подсказка: после добавления фонового видео оно будет отображаться статичным для поддержания скорости работы редактора. На опубликованном сайте видео будет проигрываться как нужно.
Как только видео будет добавлено, у вас появится возможность наложить на него другой цвет, чтобы оно соответствовало выбранной цветовой палитре сайта:
Примечание: для фоновых видео по умолчанию выключен звук, чтобы не портить взаимодействие пользователей с сайтом.
Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Обновлено на: 07 / 12 / 2022
Где найти хорошие и легальные бесплатные картинки
10 февраля 2020 Веб-сервисы
Больше 50 ресурсов с изображениями на все случаи жизни.
Все перечисленные сайты позволяют использовать фотографии бесплатно.
Но для разных изображений условия копирования могут отличаться. К примеру, некоторые авторы требуют их упоминания или запрещают изменять оригинал. Поэтому не забывайте просматривать справочную информацию на странице скачивания.
Универсальные фотостоки
Мультитематические ресурсы с изображениями на любой цвет и вкус.
- Unsplash. Около миллиона снимков, сгруппированных по тематическим коллекциям и тегам.
- Wikimedia Commons. База из более чем 20 миллионов фотографий, загруженных пользователями в «Википедию». Здесь много исторических снимков и фотокопий картин.
- Free Images. Большое количество отличных снимков, многие из которых доступны в очень высоком разрешении.
- Flickr. Огромное сообщество фотографов и одновременно хранилище их снимков. Многие авторы разрешают использовать свои работы бесплатно — вы можете выполнять поиск по таким фото.
- Picjumbo. Частная коллекция фотографа и дизайнера Виктора Ханасека, выложенная автором в открытый доступ.
- Morguefile. Крупный архив изображений, пополняемый сообществом профессиональных фотографов и фотолюбителей.
- Free Stock Images. Российский фотосток со 100 000 снимков в высоком разрешении. Файлы загружаются пользователями, но проходят тщательную модерацию.
- Public Domain Photos. Хранилище бесплатных картинок, созданных командой фотографов PDP.
- Pexels. Сотни тысяч бесплатных изображений, тщательно сгруппированных с помощью категорий и меток. Команда ресурса агрегирует снимки с других бесплатных стоков и модерирует фото, которые добавляют пользователи Pexels.
- Burst. Большая коллекция качественных, профессиональных снимков. Сайт принадлежит Shopify — платформе для создания онлайн‑магазинов. Поэтому на Burst очень много фотоконтента, ориентированного на бизнес.
- Reshot. Ресурс делает акцент не на количестве, а на качестве снимков. Картинки проходят строгий ручной отбор, поэтому не выглядят как типичные фото с бесплатных стоков.
- Stockvault. Коллекция фотографий, текстур и иллюстраций, которую пополняют пользователи. Этот сток в первую очередь ориентирован на дизайнеров, но и остальные найдут здесь много хороших картинок.
- Negative Space. Каталог разнообразных фотографий, которые можно фильтровать по категориям, цветам и тегам.
- Kaboompics. Авторская коллекция девушки по имени Каролина — дизайнера и фотографа из Польши. На сайте доступно более 14 тысяч снимков.
- Rawpixel. После регистрации любой пользователь может скачивать по 10 изображений в день из бесплатного раздела.
- StockSnap. Много качественных фотографий на самые разные темы. Лучшие из них можно найти в разделе Trending.
- Life of Pix. Фотографии канадского рекламного агентства LEEROY Creative Agency, которые компания разрешает использовать бесплатно.
- Picography. Небольшая, но разнообразная коллекция качественных снимков.
- FOCA. Огромная фототека дизайнера Джеффри Бетса, которой он любезно делится со всеми желающими.
- Jay mantri. Ещё одна персональная коллекция в открытом доступе. Снимки принадлежат фотографу Джею Мантри. На сайте нет удобной навигации, зато всё содержимое бесплатно.
- ISO Republic. Тысячи снимков в высоком разрешении, сгруппированных по тематическим коллекциям.
- Rgbstock. Более 100 000 снимков от коллектива профессиональных фотографов и дизайнеров.
- Death to Stock. На этом сайте вы не найдёте бесплатных фотографий. Но если подпишетесь на почтовую рассылку, администрация будет присылать вам по 20 крутых снимков ежемесячно.
- DesignersPics. Небольшая авторская фототека дизайнера и предпринимателя Джошуа Джона. Много креативных фотографий.
- Gettyimages. Один из крупнейших фотобанков в мире. Скачивать снимки можно только за деньги. Но Gettyimages разрешает использовать свои материалы бесплатно на некоммерческих сайтах. Чтобы добавить фотографию на ваш ресурс, нужно скопировать специальный код и вставить его на целевой странице.
- Freerange. Здесь можно найти большое количество любительских снимков. Многие из них нельзя назвать произведениями искусства, но в качестве иллюстраций они вполне подойдут.
- Libreshot. Частная коллекция фотографа Мартина Ворелла, которая включает снимки людей, архитектуры, природы и технологий.
- Freestock. Тысячи фотографий, иконок и векторных иллюстраций. Изображения для ресурса отбирают профессиональные фотографы и дизайнеры.
- Public Domain Pictures. Масса любительских снимков. Большинство изображений не лучшего качества, но попадаются и достойные внимания работы.
- Pickup Image. Большая база снимков разного качества. Контент не упорядочен по категориям, но вы можете искать нужные изображения по ключевым словам.
- Pikwizard. Хорошо структурированная база с миллионом качественных фотографий и видео.
Нишевые фотостоки
Сайты с подборками изображений на определённую тематику, будь то природа, кулинария или история.
- Google LIFE. Специальный раздел на сайте Google, в котором хранятся миллионы исторических фотографий.
- New Old Stock. Множество винтажных снимков из публичных архивов.
- Foodiesfeed. Коллекция снимков на кулинарную тематику. Многие картинки так хороши, будто взяты из глянцевых журналов.
- Paris Musées. Фотографии картин и других старинных экспонатов из нескольких французских музеев.
- Gratisography. Сток смешных, необычных и креативных фотографий. Причём все изображения отличного качества и доступны в высоком разрешении.
Специальный раздел на сайте Google, в котором хранятся миллионы исторических фотографий.- NASA HQ PHOTO. Снимки Национального управления по аэронавтике и исследованию космического пространства США. Коллекция состоит из архивных и современных фото на тему космонавтики. Большую часть снимков можно использовать свободно, но только на некоммерческих ресурсах.
- NASA on The Commons. Ещё одна фотоколлекция агентства, но эти файлы разрешено скачивать и публиковать без ограничений.
- Official SpaceX Photos. Коллекция изображений известной космической компании. Фотографии техники и космоса — всё можно использовать бесплатно, но только в некоммерческих целях.
- The Met Collection. Фотоколлекция на сайте нью‑йоркского Метрополитен‑музея. Много оцифрованных картин и снимков различных музейных экспонатов.
- BigFoto. Галерея одноимённого фотоагентства с любительскими и профессиональными снимками на туристическую тему. Изображения отсортированы по регионам, странам и городам.
Коллекция изображений известной космической компании. Фотографии техники и космоса — всё можно использовать бесплатно, но только в некоммерческих целях.- Ancestry Images. Множество старинных иллюстраций и карт.
- The Pattern Library. Небольшая авторская подборка паттернов. Может пригодиться, если вам понадобится изображение для фона.
- Old Book Illustrations. Тысячи оцифрованных иллюстраций из старинных книг.
- The Public Domain Review. Цифровые копии старых картин, иллюстраций, снимков, открыток и другого графического контента, авторские права на который больше не действуют.
- British Library on Flickr. Огромная коллекция старинных изображений, оцифрованных Национальной библиотекой Великобритании.
Огромная коллекция старинных изображений, оцифрованных Национальной библиотекой Великобритании.Поисковики бесплатных изображений
Эти сайты не содержат собственных фотобаз, но помогают находить бесплатные снимки на других ресурсах.
- CC Search. Официальный поисковик организации Creative Commons, которая разрабатывает открытые лицензии для изображений.
- The Stocks. Сервис ищет бесплатные картинки одновременно на 30 разных фотостоках.
- Image Finder. Этот сервис начинал свой путь как удобный поисковик по Flickr, но позже стал индексировать и другие ресурсы.
- PhotoPin. На этом сайте вы также можете быстро найти бесплатные фотографии с Flickr.
- «Google Картинки». Старый добрый поиск по картинкам в Google. Если кликнуть «Инструменты» → «Права использования», можно выбрать режим поиска по изображениям, которые разрешено использовать бесплатно.
Читайте также 🧐
- 16 сайтов с бесплатными стоковыми видео
- 15 сайтов, где можно скачать шрифты бесплатно и легально
- 5 сервисов для быстрой оптимизации изображений перед публикацией
Руководство по размеру изображения веб-сайта на 2023 год
Интернет сейчас пронизывает весь земной шар, и люди используют множество различных устройств для доступа к нему.
В прошлые дни настольные компьютеры были основным способом выхода в Интернет, а сейчас? В 2022 году почти 60% глобального веб-трафика будет осуществляться через мобильные устройства.
Это означает, что вам необходимо правильно оптимизировать изображения для мобильных покупателей. Если вы этого не сделаете, они могут увидеть изображения меньше идеального размера, что заставит их прокручивать и масштабировать, или, что еще хуже, вообще не увидеть изображений.
Хорошей новостью является то, что не требуется много усилий, чтобы ваши изображения были совместимы с несколькими устройствами. Основные методы включают в себя использование правильных размеров изображения для начала (пиксели и объем памяти) и использование онлайн-инструментов для оптимизации изображений.
Следуйте нашему пошаговому руководству ниже, чтобы правильно оптимизировать изображения как для мобильных, так и для настольных устройств.
Оптимальный размер изображения для веб-сайтов
Ширина в пикселях: 2500 пикселей в большинстве случаев идеально подходят для растягивания на весь экран в браузере.
Любое изображение меньшего размера может быть обрезано или выглядеть размытым, если ему нужно заполнить ширину браузера.
Размер изображения: Наилучший общий (в пикселях) размер ваших изображений зависит от вашего варианта использования, например, фоновые изображения должны быть больше, чем изображение сообщения в блоге.
Размер файла: Все, что больше 20 мегабайт, может сильно повлиять на скорость вашего сайта. Меньшие изображения (размером до 2 мегабайт) лучше в большинстве случаев.
Атрибут изображения: Атрибуты изображения (замещающий текст или замещающий тег) основаны на тексте и не влияют на производительность вашего веб-сайта. Тем не менее, они используются для слабовидящих с помощью программного обеспечения для чтения с экрана, поэтому текст атрибута должен быть коротким и лаконичным.
Почему размер изображения важен для веб-сайтов?
Для веб-сайтов размер изображения важен по трем основным причинам: взаимодействие с пользователем, скорость страницы и рейтинг.
Неправильный выбор размера изображения может повлиять на все три показателя, как правило, одновременно.
Это означает, что использование наилучших размеров изображений на вашей веб-странице для каждого варианта использования может помочь улучшить их все одновременно.
Улучшает взаимодействие с пользователем
Правильный размер изображения для каждого варианта использования помогает улучшить взаимодействие с пользователем, делая его более приятным для глаз — без необходимости увеличивать масштаб для просмотра деталей или прокручивать изображение, чтобы увидеть его целиком.
Вот пример того, что происходит, когда вы используете фоновое изображение, которое слишком мало для масштабирования по всей странице (что приводит к «повторяющимся» изображениям, используемым для заполнения экрана):
Если владелец этого веб-сайта решил попробуйте разместить маленькое изображение на экране, оно будет слишком размытым, чтобы его можно было увидеть. Повторяющиеся изображения также непривлекательны, что создает плохой пользовательский опыт.
Повышает скорость страницы веб-сайта
Если на вашем веб-сайте размещены изображения большого размера, серверу требуется больше времени для загрузки страницы, когда на нее переходит пользователь. В терминах SEO изображений это называется «контентной краской». Изображения меньшего размера (в основном размер файла изображения) быстрее загружаются на разных устройствах.
Вот пример плохой скорости загрузки страницы.
Отсюда видно, что скорость загрузки сервера составляет 2,1 секунды для загрузки первого изображения и 4,1 секунды для загрузки самого большого изображения. Когда половина клиентов отказывается от корзины покупок, если загрузка страниц занимает более 6 секунд, важно ускорить работу страницы, чтобы избежать высокого показателя отказов.
Повышает рейтинг веб-сайта
Рейтинг веб-сайта может относиться к общему рейтингу вашего веб-сайта (например, рейтинг домена) или к тому, насколько близко к первой странице (или верхней части первой страницы) результатов поиска находится ваша веб-страница, когда пользователь выполняет поиск на конкретные условия.
Google использует в своем алгоритме множество метрик, чтобы определить, что находится на первой странице результатов поиска, а качество ваших изображений (и пользовательский опыт, который они создают) являются частью текущего алгоритма.
Рекомендации по размеру изображений для веб-сайтов
В этом разделе мы рассмотрим требования к размерам для определенных типов изображений для Интернета, поскольку они не все одинаковы. Существует пять основных типов изображений, которые вы увидите на веб-сайте: фоновые изображения, главные изображения, баннеры, изображения блогов и логотипы.
Фоновое изображение
Фоновое изображение — это самый большой тип изображений, который вы увидите, как следует из названия, он служит фоном для вашей домашней страницы (хотя вы также можете найти их на основных «основных» страницах).
Макс. изображение на сайте электронной коммерции:
Продавец велосипедов Cowboy позволяет своему продукту-герою занять центральное место в этом изображении.
Он заполняет экран, рассчитанный на то, чтобы растягиваться независимо от того, на каком устройстве он просматривается.
Главное изображение
Возможно, раньше вы ошибочно принимали главное изображение за фоновое изображение, но главное отличие состоит в том, что они обычно меньше по высоте — примерно вдвое меньше. Этот тип изображения — отличный вариант, если вам нужно сразу вывести на экран больше текста, чтобы пользователям не приходилось прокручивать его, чтобы увидеть.
Макс. но в идеале меньшего размера (без ущерба для качества)
Вот пример основного изображения в действии:
Как видите, BLK & Bold решил сделать максимально широкое изображение с меньшим фиксированным соотношением высоты .
Баннер веб-сайта
Изображения баннеров немного сложнее, чем другие типы изображений, потому что они могут быть разных размеров и форм, в зависимости от того, что вам нужно показать посетителю. Однако наиболее типичным типом баннеров на веб-сайтах являются рекламные объявления.
Так как Google Ads является одним из самых популярных сервисов в этой сфере, у сотрудников Google есть несколько рекомендаций по оптимальным размерам баннеров:
Как видите, вариантов множество. Однако, если вы думаете о баннере, который , а не , прямоугольные варианты (например, 300 на 200 пикселей или 970 на 90 пикселей), как правило, лучше. Небольшой размер файла помогает повысить скорость веб-страницы, поэтому оптимальным будет максимальный размер 5 мегабайт.
Изображение для блога
Изображения для блога также могут различаться по типу и размеру. Однако стоит отметить, что если мы говорим об основном «шапочном» изображении (тот, который отображается вверху, «над сгибом»), все они должны быть одинакового размера в вашем блоге.
Максимальная ширина изображения: 2240 пикселей
Максимальная высота изображения: 1260 пикселей
Соотношение сторон: 16:9
Размер файла: без уменьшения30 качества 3 МБ, но в идеале меньше
Вы можете посмотреть в верхней части этой страницы пример изображения для блога, но вот еще одно:
Этот пост создан Кулалой, и хотя внутренний размер этого изображения составляет 1200 на 620 пикселей, визуализированный размер составляет гораздо меньше (894 на 462 пикселя), в результате чего размер файла составляет всего 95,1 килобайта.
Логотип
Ваш логотип, вероятно, будет одним из самых маленьких изображений на вашем веб-сайте (если вы не считаете фавикон на панели вкладок). И в зависимости от типа логотипа следует идти одним из двух путей: прямоугольным или квадратным.
Большинство логотипов поддаются квадратному соотношению 1:1, которое вы можете видеть в левом нижнем углу примера Кулалы выше. Но более прямоугольный логотип мог бы использовать соотношение изображения 2:3 для почти квадратный вид или даже соотношение 4:1.
Макс. ширина изображения: 250 пикселей
Макс. высота изображения: 250 пикселей
Соотношение сторон: 1:1, 2:3, 4:1
, макс. но в идеале меньше (без ущерба для качества)
Логотип собственного веб-сайта Shopify использует более длинное соотношение 4:1:
Этот размер изображения подходит для логотипов более длинных торговых марок или когда логотип состоит только из слов, а не из графики.
Рекомендации по изображениям для мобильных устройств
1. Выберите правильные размеры изображения
Крайне важно соблюдать баланс между большими изображениями, чтобы пользователи могли их увеличивать, и изображениями оптимального размера, чтобы они не занимали слишком много места. пространство и замедлить время загрузки страницы.
На Shopify вы можете загружать изображения размером до 4472 на 4472 пикселей с размером файла до 20 мегабайт. Но создатель веб-сайта обычно рекомендует использовать 2048 на 2048 пикселей для квадратных фотографий продукта.
Эти изображения с высоким разрешением придают вашему магазину профессиональный и всесторонний вид, а также обеспечивают большие возможности масштабирования. Помните, что для работы функции масштабирования ваши изображения должны иметь размер более 800 на 800 пикселей.
Сохраняйте соотношение сторон по ширине и высоте для всех ваших тематических изображений, чтобы сохранить единообразный вид всей линейки продуктов и страниц коллекций.
Например, вы можете сделать их все квадратными.
Основное изображение — это первое изображение продукта, которое будет отображаться в вашем магазине — на главной странице, странице корзины, странице оформления заказа и на различных страницах коллекций. Сохраняйте все миниатюры одинакового размера и формы, чтобы придать магазину изысканный вид.
Имейте в виду, что многие из ваших клиентов будут просматривать сайты и на мобильных устройствах, а квадратные изображения легче перемещать для небольших экранов. Кроме того, квадратные и вертикальные изображения занимают большую часть экрана мобильного телефона, что позволяет клиентам видеть еще больше вашей фотографии.
2. Помните о размере файла
Изображения с большим размером файла могут сильно повлиять на скорость вашего сайта, особенно когда посетители пытаются получить к нему доступ со своего смартфона. И если ваш сайт слишком медленный, это увеличивает вероятность того, что кто-то покинет ваш сайт и вместо этого перейдет к другому варианту поиска в Google.
Вот почему вы хотите сжимать большие изображения, чтобы размер их файлов не был таким большим, особенно потому, что многие сайты имеют максимальный размер файла, который они позволяют загружать. Shopify, например, имеет максимальный размер файла 20 мегабайт.
Существуют онлайн-инструменты, например TinyPNG или Compress JPEG. С помощью этих инструментов вы можете легко перетаскивать большие файлы изображений в область загрузки, сжимать их, чтобы они были меньше (с сохранением качества изображения), и повторно загружать новый файл.
По большей части вы хотите, чтобы все ваши заголовки или фоновые изображения были не больше 1 мегабайта, а фотографии ваших продуктов — около 300 килобайт.
3. Изменение размера фотографий для экрана мобильного телефона
Shopify автоматически изменяет размер ваших изображений, чтобы они подходили для небольших экранов, но некоторые изображения иногда требуют редактирования вручную. Имейте в виду, что экраны настольных компьютеров и мобильных устройств не только разного размера, но и имеют противоположную ориентацию.
И хотя Shopify пытается приспособиться к этому с помощью аккуратной обрезки, будет лучше, если ваши изображения будут квадратными, а ваш продукт будет центрирован по вертикали и горизонтали.
Кроме того, изображения со слишком большим разрешением, например изображения, сохраненные в Shopify с максимальным размером 4000 на 4000 пикселей, могут стать размытыми при изменении размера для мобильных устройств. Таким образом, уменьшение вашего изображения до более удобного размера и формы с учетом мобильных устройств может помочь вашему магазину выглядеть лучше на всех устройствах.
Помните, что большие файлы также замедляют загрузку вашего сайта. А в электронной коммерции, особенно в мобильной, важна каждая секунда, поэтому оптимизация ваших изображений должна быть приоритетом.
Хотя сжатие без потерь может обеспечить изображение самого высокого качества, оно часто создает большие файлы, загрузка которых занимает целую вечность (особенно в пакетном режиме), и может замедлить время загрузки вашей страницы, заставляя посетителей покинуть ваш магазин.
Это особенно актуально для мобильных устройств, где скорость интернета может быть ниже, а ожидание появления изображения расстраивает покупателей.
В то время как адаптивный дизайн и алгоритмы Shopify хороши для изменения размера и отображения ваших изображений на разных устройствах, предоставление им продуманных размеров файлов может сделать процесс покупок еще более плавным.
Лучшие форматы изображений для Интернета
Давайте рассмотрим форматы файлов, наиболее широко используемые в предметной фотографии, и то, что каждый из них дает. Они перечислены здесь по тому, насколько часто они используются в фотографии продукта.
JPG
JPG является наиболее распространенным форматом файлов цифровых изображений. Он широко поддерживается и может похвастаться небольшим размером файла с хорошей цветовой гаммой. Его сжатие позволяет сбалансировать размер файла и качество изображения.
PNG
PNG был создан для улучшения формата GIF за счет снятия ограничения на 256 цветов.
Он широко распространен, без потерь (уменьшает размер файла без снижения качества) и поддерживает прозрачность (скажем, для прозрачного фона). Недостатком является то, что размеры файлов PNG могут быть большими из-за сжатия без потерь, а формат не так универсально совместим, как JPG.
HEIC
Файлы HEIC представляют собой компактный файловый формат, который занимает примерно половину места по сравнению с эквивалентным файлом JPEG с использованием передовой технологии сжатия. Чаще всего он используется для хранения фотографий на устройствах iOS, поскольку это стандартный формат файлов Apple.
WebP
WebP — это современный формат изображений, который обеспечивает превосходное сжатие изображений в Интернете, при этом средний размер файла экономится более чем на 30 % по сравнению с традиционными форматами файлов, такими как PNG и JPEG.
GIF
GIF предлагает небольшой размер файла за счет сжатия и сокращения изображений до 256 цветов. Хотя он был широко заменен PNG, он по-прежнему используется для анимации, поскольку это единственный формат, который поддерживает его и повсеместно распознается браузерами.
ТИФФ
TIFF — это формат сжатия без потерь, который широко поддерживается рядом редакторов и веб-приложений. Он обеспечивает высокое разрешение изображения, а несколько изображений и страниц можно удобно сохранить в одном файле. Однако размер файла имеет тенденцию быть большим.
Резюме:
- JPG является наиболее удобным для сочетания меньшего размера с достойным качеством.
- GIF полезен, если вы предлагаете 360-градусные снимки и хотите легковесные файлы.
- TIFF, для сравнения, может предложить отличное качество, но размеры файлов обычно довольно тяжелые и непрактичные.
Как узнать размер изображения на вашем веб-сайте
Самый быстрый способ узнать размер изображения на любой заданной веб-странице (без загрузки изображения и просмотра его характеристик) — использовать инструменты разработчика/инспектора браузера.
Этот метод работает независимо от того, используете ли вы операционную систему Mac, Windows или Linux, поскольку он зависит от браузера, что также имеет оговорку. Он работает с использованием Safari, браузеров на базе Chrome и Firefox.
Все, что вам нужно сделать, это перейти на веб-страницу и навести курсор на изображение, о котором вы хотите получить информацию, затем либо щелкнуть правой кнопкой мыши, либо использовать Control/CTRL + щелчок, чтобы вызвать параметры.
Оттуда найдите опцию Inspect:
При нажатии на Inspect появится вся информация о коде веб-страницы (это может выглядеть пугающе, но не волнуйтесь).
На панели проверки информация об изображении, на которое вы нажали, должна быть выделена, и вы заметите, что при наведении курсора на выделенный текст изображение приобретает голубоватый оттенок, чтобы показать вам, какую часть кода вы изучаете. смотрю:
В этом случае вы можете видеть, что браузер (Brave) сообщает вам над изображением, сколько пикселей использует изображение.
Но эта цифра изменится, если вы измените размер веб-страницы. Однако, если вы наведете курсор на ссылку хранилища изображений, отобразятся фиксированные свойства изображения:
И все. Вам не нужно загружать изображение или специальный инструмент — все это прямо в браузере. Чтобы выйти из панели инспектора, просто нажмите красный крестик в верхнем правом или левом углу.
Инструменты для оптимизации изображений
Наилучший подход — использовать инструмент оптимизатора для изменения размера изображений. Вот два отличных инструмента, которые помогут вам сделать это в вашем Shopify Admin.
Оптимизатор изображений от Squirai
Инструмент Оптимизатор изображений от Squirai протестирован на скорость и гарантирует, что ваши изображения готовы к поисковой оптимизации, и автоматически оптимизирует все изображения на вашем веб-сайте, включая новые, которые вы добавляете позже.
Кроме того, вы также можете настроить и применить водяной знак для защиты фотографии вашего продукта без необходимости знать какой-либо код.
LoyaltyHarbour Image Optimizer
Плагин LoyaltyHarbour Image Optimizer работает аналогично инструменту Squirai, сжимая ваши изображения на вашем веб-сайте для вас.
Однако у него нет такой же функции водяных знаков. Вместо этого углубленная информационная панель позволяет автоматически устанавливать замещающий текст для ваших изображений и преобразовывать их в лучший тип файла изображения для повышения скорости страницы.
В качестве альтернативы, если у вас есть возможность, вы также можете использовать Photoshop, чтобы уменьшить размер файла, но это может оказаться более сложным процессом, чем вышеупомянутые инструменты.
Используйте лучшие изображения веб-сайта для своего бренда
Наличие изображений на вашем веб-сайте для экранов разных размеров необходимо для того, чтобы страницы выглядели интересно и чтобы ваш сайт был ранжирован на страницах результатов поиска. Но размер ваших изображений имеет значение — слишком большой, и вы рискуете, что ваш сайт будет загружаться слишком медленно; слишком маленький, и вы рискуете получить плохой пользовательский интерфейс.
Однако существуют разные рекомендации по размерам изображений в зависимости от того, какой тип изображения вы хотите. Вместо того, чтобы пытаться запомнить их все, вы можете добавить это руководство в закладки, чтобы обращаться к ним, когда вам нужно загрузить изображения.
Но если вы используете Shopify и один из рекомендуемых инструментов оптимизатора вместе, вам не нужно беспокоиться о размере файла, из-за которого ваш веб-сайт будет работать медленно.
Готовы создать свой бизнес? Начните бесплатную пробную версию Shopify — кредитная карта не требуется.
Часто задаваемые вопросы о оптимальных размерах изображений
Какой размер изображения лучше всего подходит для веб-сайта?
Если вам нужно изображение во всю ширину, лучшим вариантом будет ширина 2500 пикселей. Различные размеры изображений зависят от основного изображения, баннера веб-сайта, изображения блога или логотипа веб-сайта, а также от общего веб-дизайна.
Как лучше всего сохранить изображение для Интернета?
Лучший способ сохранить готовое для Интернета изображение — использовать инструмент оптимизатора, такой как Squirai Image Optimizer или LoyaltyHarbour Image Optimizer. Это гарантирует, что вы получите отличное изображение, а размер файла достаточно мал, чтобы не влиять на скорость вашего сайта.
24 сайта для поиска бесплатных изображений, которые вы действительно использовали бы для своего маркетинга
Мы в Buffer много думаем о визуальном контенте.
Мы поделились нашим собственным исследованием важности изображений в сообщениях Twitter для более широкого распространения в социальных сетях. Мы изучили инструменты, которые помогают любому создавать визуальный контент. Наш инструмент управления социальными сетями включает в себя публикацию изображений, потому что мы знаем, насколько важен этот элемент для привлечения ваших подписчиков и поклонников.
Но есть один вопрос, который нам задают довольно часто: Где можно найти бесплатные изображения высокого качества, разрешенные для использования в ваших сообщениях в блогах или в социальных сетях?
Это вопрос с множеством разных ответов и оговорок.
Почти каждое изображение, созданное за последние 30 лет, по-прежнему защищено авторским правом — защитой, которая дает практически каждому автору исключительное право использовать или воспроизводить свою работу. Но вы можете найти общедоступную фотографию, использовать изображение Creative Commons, для которого может потребоваться указание авторства, или даже создать собственное изображение с нуля.
В этом посте мы поделимся более чем 20 различными источниками и инструментами для бесплатных изображений, включая сайты изображений с возможностью поиска, инструменты для создания собственных изображений и многое другое.
(См. также: Если вы хотите узнать, как выбирать и использовать такие изображения, вам может понравиться наше полное руководство по использованию стоковых изображений в маркетинге.)
Ознакомьтесь с этими терминами, прежде чем использовать любые бесплатные изображения знать, прежде чем мы начнем. Следующие термины будут часто встречаться при обсуждении бесплатных источников изображений.
Ознакомьтесь с условиями каждого сайта, который вы пробуете, чтобы точно знать, когда и какой тип атрибуции требуется.Что такое Creative Commons?
Creative Commons — некоммерческая организация, которая позволяет делиться и использовать творчество и знания с помощью бесплатных юридических инструментов. Существуют различные типы лицензий Creative Commons, которые варьируются от разрешения любого типа использования без указания авторства до разрешения только определенных видов использования без внесения изменений.
Что является общественным достоянием?
Произведениями, находящимися в общественном достоянии, являются произведения, авторские права на которые истекли, были утрачены или неприменимы. Нахождение чего-либо в Интернете не означает, что оно находится в открытом доступе.
Что бесплатно?
Изображения без лицензионных отчислений не обязательно бесплатны. В большинстве случаев вам придется заплатить единовременную плату за получение прав на использование изображения.
Затем вы можете использовать его столько раз, сколько захотите. «Бесплатно» в «без лицензионных отчислений» означает только то, что вам не нужно платить гонорары владельцу изображения каждый раз, когда вы его используете. Для полного ознакомления с бесплатными изображениями ознакомьтесь с этим руководством от Амоса Струка.
Теперь к списку! Чтобы помочь вам лучше оценить эти сайты, я по возможности выполнял одинаковый поиск на каждом из них, используя термин «счастливые люди».
Unsplash — Бесплатный поиск изображений.Unsplash имеет собственную лицензию, которая, по сути, позволяет вам использовать изображения бесплатно любым способом, за исключением использования их для создания конкурирующего веб-сайта. (Здесь, в Buffer, мы большие поклонники Unsplash!)
2. Burst (от Shopify)
Burst — бесплатный поиск изображений, созданный Shopify Burst — это бесплатная фотоплатформа для предпринимателей от Shopify. Изображения являются бесплатными и безвозмездными.
(В Burst есть классный раздел бизнес-идей с советами и изображениями в высоком разрешении для начала вашего бизнеса.)
Pexels также имеет собственную лицензию, в которой указано, что вы можете и что не можете делать с изображениями. Вы можете бесплатно использовать и изменять изображения как в коммерческих, так и в личных целях без указания авторства.
Pixabay – бесплатные стоковые фотографииИзображения на Pixabay находятся под лицензией Creative Commons Zero (CC0), что означает, что вы можете использовать изображения, не спрашивая разрешения и не отдавая должное художнику (хотя это всегда приветствуется). Pixabay мягко напоминает о необходимости проверить, не нарушает ли контент, изображенный на изображениях, каких-либо прав.
Free images – стоковые фото Free Images предоставляет более 300 000 бесплатных стоковых изображений под собственной лицензией. Лицензия допускает очень широкий спектр использования, хотя и перечисляет несколько ограниченных вариантов использования (которые довольно распространены на большинстве сайтов с бесплатными изображениями).
Kaboompics использует собственную лицензию, аналогичную Creative Commons Zero, за исключением того, что вы не можете распространять ее фотографии. В Kaboompics мне нравятся две вещи: во-первых, он позволяет мне искать по цвету, а во-вторых, он предоставляет дополнительную палитру цветов на фотографии.
Бесплатные фотографии StocksnapStocksnap использует лицензию Creative Commons CC0, поэтому его фотографии можно бесплатно загружать, редактировать и использовать как в коммерческих, так и в некоммерческих проектах.
Canva — бесплатный поиск фотографий и редактор изображенийCanva — это онлайн-инструмент для графического дизайна, который также предлагает бесплатные стоковые фотографии. Одним из преимуществ использования Canva является то, что вы можете быстро превратить изображение в пользовательскую графику для использования в социальных сетях или в своем блоге.
Life of Pix — бесплатные фотографии и фотографии премиум-класса Life of Pix перечисляет бесплатные фотографии высокого разрешения и является партнером Adobe Stock для получения дополнительных (платных) стоковых фотографий.
Гратисография также имеет собственную лицензию на бесплатную фотографию, которая позволяет вам делать «почти все, что вы можете придумать». Хотя сейчас у них довольно ограниченное количество изображений, многие из них являются изображениями высокого качества, которые я бы использовал.
Фотобиблиотека FlickrFlickr — это платформа для размещения изображений, где вы можете найти изображения, которые можно использовать и изменять в коммерческих целях. Выберите «Коммерческое использование и моды разрешены» в фильтре «Любая лицензия», чтобы найти эти изображения, и не забудьте проверить лицензию для каждого изображения, поскольку они различаются.
Фотографии сообщества JopwellКоллекция Jopwell содержит несколько альбомов с сотнями изображений людей из сообщества Jopwell. Изображения можно бесплатно загружать и использовать, если вы явно укажете Джопвелла. (Вы можете прочитать историю этой коллекции здесь.)
Коллекция изображений WOCinTech на Flickr Это альбом фотографий цветных женщин в сфере технологий, созданный Кристиной и Стефани, основателями чата #WOCinTech.
Изображения можно использовать, если вы укажете #WOCinTech Chat или wocintechchat.com. (Хотя команда больше не обновляет альбом, на выбор предлагается более 500 изображений!)
Команда CreateHER Stock вручную отобрала более 200 высококачественных изображений цветных женщин, которые могут использоваться только для личного использования. (Проверьте их лицензию здесь.) Вы также можете получать новые бесплатные изображения каждый месяц, когда подписываетесь на их информационный бюллетень.
Death to Stock — бесплатные фотографии, рассылаемые по электронной почте каждый месяцВ отличие от большинства веб-сайтов, упомянутых в этом посте, Death to Stock не имеет галереи изображений. Он отправляет вам 20 новых фотографий каждый месяц, когда вы подписываетесь на его информационный бюллетень.
Getty Images – бесплатные встраивания изображений Это может стать для вас неожиданностью (как и для меня).
Вы можете бесплатно использовать изображения из Getty Images на своих некоммерческих веб-сайтах путем их встраивания. Загрузка изображения и загрузка его на ваш веб-сайт по-прежнему невозможна — вы должны встроить его. Встраивание немного более навязчиво, чем просто добавление фотографии в ваш пост — встраивание сохраняет свою собственную рамку, кнопки «Поделиться» и брендинг. Тем не менее, для многих блогов это вариант, на который стоит обратить внимание.
PicJumbo предлагает множество бесплатных изображений для любого использования – бесплатно и без регистрации. Вы также можете получать новые бесплатные изображения, подписавшись на их рассылку. (Если у вас есть лишний бюджет, обязательно посмотрите их премиум-коллекции фотографий, такие как эта, которая мне кажется потрясающей! В ней даже есть вертикальные изображения для контента Stories.)
Crello — бесплатный инструмент для создания изображений Похожий на Canva, Crello бесплатный инструмент для графического дизайна от Depositphotos, в котором есть множество бесплатных изображений.
Depositphotos предлагает образцы бесплатных изображений, векторов, редакционного контента и видеороликов, которые обновляются каждую неделю. Вы также можете зарегистрировать учетную запись, чтобы еженедельно получать бесплатные стоковые файлы.
Пример фотографии iStockКаждую неделю, когда вы подписываетесь на бесплатное членство, iStock выпускает новую партию бесплатных стоковых файлов.
New Old Stock – старинные фотографии для бесплатного использованияNew Old Stock – это коллекция старинных фотографий из публичных архивов, на которую не распространяются известные ограничения авторского права.
Пример результатов расширенного поиска изображений GoogleРасширенный поиск изображений Google — это метод поиска бесплатных изображений с помощью собственных инструментов поиска Google. Вот краткое руководство.
Более 23 постов в Facebook, постов в Instagram, твитов и т. д. Стоит также отметить, что вы можете вставлять посты в Facebook, посты в Instagram, твиты, видео на YouTube и даже колоды Slideshare в свои посты в блоге.
Доски Pinterest немного сложнее встроить, но это можно сделать с помощью конструктора виджетов, скопировав и вставив код в сообщение блога. (Для пользователей WordPress я заметил, что мне нужно опубликовать сообщение в блоге в режиме «Текстового» редактора после вставки кода, чтобы это работало.)
Часто читатели могут взаимодействовать со встроенными сообщениями более глубоко, чем со статическим контентом, подписываясь на пользователей, ставя лайки или комментируя сообщения.
Рассмотрите возможность замены скриншотов встроенными сообщениями, чтобы читатели могли взаимодействовать с вашими примерами.
Планируйте свои изображения с помощью буфера
Большое спасибо за то, что дочитали до конца сообщение в блоге. В качестве благодарности я хотел бы поделиться отличной функцией, которую мы встроили в Buffer, чтобы помочь вам делиться своими изображениями как можно быстрее.
Всякий раз, когда вы делитесь своими сообщениями в блоге или маркетинговыми веб-сайтами с помощью Buffer (через панель инструментов или расширение браузера), мы автоматически получаем изображения с этих веб-сайтов и предлагаем их вам для ваших сообщений в социальных сетях.