Оптимизация изображений для сайта: как оптимизировать картинки
21 ноября 148 просмотров
Изображения на страницах сайта способствуют повышению качества веб-страницы в глазах поисковых систем и реальных пользователей, увеличивают релевантность страницы, улучшают восприятие и положительно сказываются на поведенческих факторах и ранжировании сайта в поисковых системах.
Для чего нужна оптимизация изображений на сайте
Оптимизация изображений на сайте позволяет снизить общий вес страниц и увеличить скорость загрузки страницы, что является важным фактором как для пользователей, так и для поисковых систем.
Низкая скорость загрузки страниц приводит к отказам (уходам пользователей с сайта). А поисковые системы при низкой скорости загрузки страниц могут не проиндексировать часть контента, что снижает релевантность страницы и, соответственно, её положение в поисковой выдаче.
Кроме того низкая скорость загрузки страницы может негативно сказаться на аналитике, так как при низкой скорости загрузки страницы, данные о пользователях могут не подгрузиться в системы аналитики.
Оцените количество картинок на сайте и их необходимость
Перед тем как приступить к оптимизации изображений на сайте оцените количество картинок на вашем сайте.
Изображения необходимо размещать там, где они уместны. Картинки на страницах должны соответствовать содержанию страницы и интенту запросов пользователей. Картинки должны дополнять текстовый контент.
На страницах может использоваться слишком много изображений, при этом они никак не помогают пользователям в решении их вопроса.
В таких случаях будет более правильным решением удаление картинок, а не их оптимизация.
Используйте векторные изображения
Для некоторых элементов веб-страницы можно использовать векторные изображения в формате svg.
Векторная графика подходит для оформления оформления значков, логотипов и других элементов, которые позволяют разбавить контент страницы, например преимущества или этапы работ.
Графические элементы в формате svg адаптивны, они остаются четкими при любом масштабировании. Создать такие картинки можно в текстовом редакторе и редактировать с помощью тега <svg>.
Оптимизировать и уменьшить вес svg графики можно с помощью решения SVGO.
SVGO (SVG Optimizer) – это консольное приложение для оптимизации векторной графики svg, которое очищает файлы svg от лишнего кода без ущерба отрисовки графики.
Оптимизируйте растровые изображения
Растровые изображения – это изображения, состоящие из сетки пикселей (цветных точек).
Растровые изображения имеют следующие характеристики:
- Размер в пикселях
- Количество цветов и оттенков (глубина цвета)
- Цветовое пространство (цветовая модель, например RGB, XYZ и т.д.)
- Разрешение (количество точек в изображении)
Каждый пиксель растрового изображения содержит в себе информацию о цвете и прозрачности (оттенок).
Такие картинки используются в случае, когда необходимо разместить более детализированное изображение, для которого не подходит векторная графика.
Как рассчитывается вес растровых изображений?
В браузере 256 оттенков на каждый канал цвета. Один канал занимает 8 бит. Пиксель состоит из 4 каналов и весит 32 бита или 4 байта.
Таким образом можно легко рассчитать вес файла.
Например, изображение размером 100*100 пикселей состоит из 100 000 пикселей.
1 пиксель весит 4 байта, соответственно изображение из 100 000 пикселей будет весить 400 000 байт или 390 кб (400 000 / 1024).
Детализированные изображения состоят из большого количества пикселей. В связи с этим такие изображения имеют большой вес.
Снижение разрешения (уменьшение количества пикселей) приведет к снижению качества изображения, так как картинка распадется на пиксели и будет выглядеть нечетко и размыто.
Как снизить вес растрового изображения без потери качества?
Снизить глубину цвета
Если изображение не требует широкой палитры оттенков, например 256 оттенков на каждый канал, сократите количество цветов до 256. Таким образом вес изображения будет уменьшен в 2 раза.
Применить дельта-кодирование пикселей
Соседние пиксели в изображении могут состоять из похожих цветов. Глаз человека не всегда может уловить разницу, между цветами и оттенками пикселей. В связи с этим можно указать разницу между соседними пикселями. В случае, если пиксели будут иметь схожие значения, дельта между пикселями будет равна нулю. Это означает, что пиксель будет весить всего один бит.
Уменьшить масштаб картинок
Размер исходного файла может отличаться от того, который отображается в браузере. Проверьте, совпадает ли исходный размер файла с тем, что отображается в браузере.
Как выбрать формат растрового изображения?
PNG – не сжимается с потерей данных. Изображения в формате PNG всегда весят много. В связи с этим рекомендуем использовать изображения в формате PNG в случаях, когда необходимо показать мелкие детали.
Если картинка не содержит мелких деталей и не подразумевает увеличение и масштабирование, используйте форматы
Формат GIF, как правило, используется для анимированных изображений.
WebP – формат изображений, разработанный Google. Такой формат использует алгоритм сжатия изображений, что позволяет снизить размер файла без потери качества.
WebP считается более современным и прогрессивным форматом изображений, чем другие форматы.
Недостатком данного формата является то, что некоторые браузеры и приложения не умеют поддерживать данный формат.
Оптимальный вес изображений
Оптимальный вес изображения – 100-200 кб. Большие изображения в высоком разрешении могут быть весом 500-1 000 кб. В некоторых случаях картинки необходимо размещать в высоком разрешении, например фото товаров, где требуется увеличение изображения. Оптимальный вес таких файлов – до 3 мб.
Изображения весом более 3,5 мб не рекомендуется размещать на сайте. Наличие таких изображений может значительно снизить скорость загрузки страниц.
Как найти тяжелые изображения на сайте?
Проверить оптимизацию изображений и найти тяжелые изображения на сайте можно с помощью софта Screaming Frog.
Необходимо спарсить сайт через софт, перейти в навигационном меню справа во вкладку Images – All, отсортировать изображения по уменьшению размера.
Таким образом мы получим список всех изображений с сайта и их вес.
Заполните мета-данные для изображений
Оптимизируйте название файла изображения
Перед загрузкой файла с картинкой на сайт рекомендуем оптимизировать название файла изображения.
Название необходимо прописать латиницей, а в качестве разделителя использовать тире.
Название необходимо прописать транслитом (можно использовать сервис «Транслит».
Заполните атрибут Title
Содержимое атрибута title отображается при наведении курсора на изображение.
Правила заполнения атрибута title у изображений:
- Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
- Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
- Желательно наличие ключевых слов.
Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.
Что такое атрибут alt у картинок
Атрибут alt у изображений – это атрибут html-тега <img>, который описывает содержания картинки. Атрибут alt становится отображается на странице сайта в том случае, если картинка не загрузилась.
Пример оформления атрибута в html-коде:
<img src="image.png" alt="Описание изображения">
Как заполнить атрибут alt в html-коде
Изображения в html-коде размечаются тегом <img>.
После открытого тега указывается ссылка на изображение: src=”image.png”
Далее необходимо указать атрибут alt: alt=”Описание изображения”
<img src="image.png" alt="Описание изображения">
Для повышения релевантности страницы, рекомендуем указывать в атрибутах alt основные ключевые слова, по которым ранжируется страница.
При описание изображения должно отражать суть картинки.
Точных параметров по количеству символов в атрибуте alt нет. При этом рекомендуется использовать 3-5 слов, а общая длина атрибута – 75-80 символов. Это оптимальный размер описания изображения.
При автоматической генерации заполнения атрибута alt для изображений можно подтягивать в качестве описания заголовок h2. При этом содержание alt в ряде случаев будет не точно передавать содержание картинки. В связи с этим рекомендуем, по возможности, заполнять атрибут вручную, подбирая наиболее точное описание картинки.
Как атрибут alt отображается на странице
Если атрибут alt заполнено, то в случаях, когда изображения не загружаются, содержимое атрибута alt выводится вместо изображения в текстовом виде (изображение 1).
Если атрибут отсутствует, либо поле атрибута пустое, соответственно текстовое описание не выводится.
Как атрибут alt влияет на ранжирование
Поисковые системы и другие сервисы активно развивают поиск по картинкам.
Оптимизация изображений и заполнение атрибута alt может улучшить ранжирование сайта в поиске по картинкам и привлечь дополнительный трафик.
Подробнее о том, как оптимизировать изображения для сайта читайте в статье.
Создайте карту sitemap.xml для изображений
Sitemap.xml – это файл, который сообщает поисковым системам о структуре сайта и о том, какие страницы и ссылки необходимо проиндексировать.
Sitemap.xml содержит в себе ссылки на актуальные страницы сайта, которые доступны для индексации и отдают 200 код ответа сервера.
Сгенерируйте отдельный файл Sitemap.xml для изображений, который позволит улучшить индексацию картинок и улучшить ранжирование сайта в поиске по картинкам.
При создании xml-карты для картинок рекомендуем настроить автоматическую генерацию карты сайта (чтобы при добавлении на сайт новых изображений они добавлялись в карту сайта). Также рекомендуем автоматически обновлять карту сайта раз в неделю, что позволит ускорить индексацию новых картинок.
Более подробно ознакомиться с форматом можно в Документации Google и Яндекс Справке.
Пример кода xml-карты сайта для картинок
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://site.ru/page/kartinka.png</loc>
<lastmod>2022-08-01</lastmod>
</url>
</urlset>
Сервисы для оптимизации изображений
Compressor.io →
Сервис позволяет снизить вес картинки до 90%. Данный инструмент работает со всеми современными форматами, в том числе и WebP. С помощью сервиса можно сжать изображения без потери качества. В работе можно использовать ручные настройки.
Imagecompressor →
Бесплатный онлайн сервис, с помощью которого можно изменить разрешение изображения.
Tinyjpg →
Бесплатный оптимизатор изображений, который позволяет сжимать картинки без потери качества.
Сервис преобразовывает PNG изображения из 24 битных в 8 битные. Такой способ позволяет снизить вес картинки без потери качества.
Compressjpeg →
Простой онлайн редактор, который позволяет оптимизировать до 20 файлов за раз. С помощью сервиса можно сжать картинки в формате JPEG и преобразовать PNG документы в JPEG, JPG в PNG и SVG в PNG.
WebP Converter →
С помощью инструмента можно преобразовать картинки в форма WebP.
WebP Converter позволяет снизить вес файла до 30% без потери качества.
Оптимизация изображений позволит улучшить ранжирование сайта в поисковых системах, участвовать в поиске по картинкам, выводить изображения в сниппет и улучшит поведенческие факторы.
Как редактировать изображения для блога и сайта: пример в Figma
05 июля 2021 г.
Когда дело доходит до заполнения блога или создания страниц сайта — встает задача создания визуальных изображений.
И часто маркетологи не знают, как сделать красивые картинки. Как подготовить качественные изображения для новостей или сайта?
Какие бывают варианты работы:
— Создатели сайта сразу готовят шаблоны изображений и маркетолог вносит контент в данные шаблоны
— Фирма заказывает разработку уникальных изображений для каждой отдельной новости
— Маркетинг готовит изображения своими усилиями
Многие специалисты думают, что для того, чтобы редактировать фотографии и графику им требуется освоить сложные инструменты для редактирования Adobe Photoshop или Illustration. На самом деле манипуляции с изображением можно осуществлять в современных простых для использования инструментах, например Figma.
Рассмотрим техники работы с фотографиями:
1. Обрезка фотографии
С помощью обрезки вы можете удалить нежелательные или отвлекающие элементы, улучшить композицию или выделить фокус.
Также, вы можете сделать визуальное представление нетривиальным.
Чтобы обрезать изображение в Figma используйте функцию Crop, находящуюся в верхней панели по центру.
Для того, чтобы сделать обрезку по фигуре — нужно создать фигуру с помощью ряда стандартных фигур — квадрата, круга, прямоугольника и т.д. > объединить их в Union > вставить изображение с помощью поля заливки (заменяем Solid на Image).
Советы:
- При выборе изображения важно проверить прямая ли фотография.
- Использовуйте «правило третей» или правило золотой сетки. «Правило третей» — метод выравнивания, популярный в фотографии и кинематографии. По нему, объект фокусировки изображения должен приходиться в одной из точек пересечения или близко к ним.
2. Нанесение теней
Вы можете сохранить узнаваемые фигуры или силуэты на ваших фоновых фотографиях с использованием теней.
В Figma тени наносятся следующим образом: Design > Effects > Inner Shadow / Drop Shadow.
На первом изображении используется эффект внешних теней — объект выглядит утопленным внутрь, при нанесении текста изображение будет смотреться глубоким.
На втором изображении используются внешние тени — создается ощущение трехмерности, подчеркиваются границы, видно направление источника света.
3. Размытие фона
Во многих случаях на сайте, в корпоративном блоге или в брошюре на изображение нужно нанести текст. Особенно когда дело касается публикации новости в социальных сетях.
Для того, чтобы фотографии создавали эстетически привлекательный фон используется инструмент размытия.
Этот эффект также часто используется для интерактивных меню в iOS.
Путь в Figma следующий: Design > Effects > Layer Blur / Background Blur.
4. Насыщенность
Чем насыщеннее изображение — тем интенсивнее его цвет и яркость. С другой стороны, чем ниже насыщенность, тем изображение ближе к оттенкам серого.
Насыщенность, возможно, даже больше, чем контраст, — важнейшая особенность фотографии. Вы можете выбрать насыщение отдельных частей изображения или цветов, в то время как остальную часть изображения сделать недонасыщенной, чтобы привлечь внимание к этим областям.
Перенасыщенные изображения интенсивны до такой степени, что на них невозможно смотреть. В этом смысле важно знать меру.
5. Контраст
Контрастность — важный компонент редактирования фотографий, позволяющий передать определенное настроение через ваши фотографии.
Высокая контрастность используется для создания четкого соотношения между фотографиями, белыми и темными частями. Низкая контрастность — убирает четкость. Используется в рекламе для устранения любого конфликта между текстом и изображением.
Цветовой контраст — используется с цветными фотографиями, он помогает вашему объекту выделиться на фоне.
Недавние публикации
© Все права защищены. Smartiee Agency
e-mail us: [email protected]
20 мест, где можно получить потрясающие фотографии для вашего проекта веб-дизайна
Дизайн
Автор: Clint Mally
Если вы создаете веб-сайт, или если ваш веб-сайт разрабатывает кто-то другой, вам необходима коллекция фотографий и изображений, готовых к использованию.
Если есть что-то, во что стоит инвестировать для вашего бизнеса, так это профессиональная фотосессия.
Однако, если у вас сейчас нет времени или денег на этот вариант, вам понадобятся некоторые варианты для вашего сайта.
Вот мои лучшие бесплатные и платные рекомендации по поиску высококачественных изображений для вашего проекта веб-дизайна.
Главы:
4. Платные сайты с изображениями
5. Лучшие практики SEO для изображений
6. Лучшее программное обеспечение для редактирования фотографий
1. Сайты с бесплатными фотографиями
2. Сайты с бесплатными изображениями и иконками
3. Сайты с частично бесплатными фотографиями
Где я могу получить бесплатные стоковые фотографии для своего веб-сайта?
Pexels.com
Pexels — отличное место для начала. У него есть панель поиска, которая отображает множество вариантов результатов.
Вы можете загружать изображения одним щелчком мыши без необходимости создания учетной записи.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их везде и использовать в коммерческих целях.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
Pixabay.com
Pixabay содержит множество фотографий и изображений с высоким разрешением и дает вам немного больше контроля над типом качества и размера фотографии, которую вы можете использовать. Pixabay находится в верхней части моих стоковых фотосайтов, потому что вы также можете загружать стоковые видеоролики, которые можно использовать в социальных сетях.
Вам необходимо войти в учетную запись , чтобы загрузить эти изображения.
Вы также можете скачать SVG или стандартную векторную графику для некоторых изображений.
Бесплатно для коммерческого использования, указание авторства не требуется.
Следует обратить внимание на то, что Pixabay обычно сначала показывает фотографии iStock в результатах поиска. Они платные, поэтому не слишком радуйтесь первому ряду стоковых фотографий, которые вы видите, если вы не хотите платить за них.
Unsplash.com
Unsplash — еще один надежный вариант бесплатных изображений. Если у вас есть веб-сайт Squarespace, вы можете получить автоматический доступ ко всем этим фотографиям с помощью параметров блокировки изображений бесплатно.
Вам не нужно входить в учетную запись, чтобы загрузить эти изображения.
Вы также можете скачать SVG или стандартную векторную графику для некоторых изображений.
Может использоваться в коммерческих и некоммерческих целях.
Разрешение не требуется (хотя авторство приветствуется!)
Picjumbo.
comPicjumbo уникален тем, что позволяет легко находить коллекции фотографий по похожей теме. Как правило, когда вы используете сайты с бесплатными фотографиями, может быть трудно найти коллекции фотографий схожей темы, однако за загрузку коллекции требуется ежемесячная плата.
Таким образом, вы можете загружать отдельные фотографии бесплатно, но за загрузку коллекций взимается плата.
Вы можете загружать изображения одним щелчком мыши без необходимости создания учетной записи.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их везде и использовать в коммерческих целях.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
Negativespace.com
Negative Space предлагает хороший выбор бесплатных фотографий, которые находятся в открытом доступе.
У них также есть ряд ловушек для кликов, которые пытаются заставить вас подписаться на акции Adobe, так что будьте начеку.
Вы можете загружать изображения одним щелчком мыши без необходимости создания учетной записи.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их везде и использовать в коммерческих целях.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
Gratisography.com
Отличительной чертой Gratisography, помимо забавных цветов их веб-сайта, является то, что они показывают только уникальные фотографии.
Фотографии, которые я увидел здесь с помощью функции поиска, отличались от фотографий, которые я видел в других местах.
Кроме того, эти фотографии имеют абстрактный и художественный оттенок. Так что, если вы хотите выделиться чем-то немного другим, это может быть хорошей ставкой.
Вы можете загружать изображения одним щелчком мыши без необходимости создания учетной записи.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их везде и использовать в коммерческих целях.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
Stocksnap.io
В Stocksnap есть большое разнообразие фотографий, которые также отличаются от типичного отображения, которое вы можете увидеть на чем-то вроде Unsplash. У них есть редактор на месте, который вы можете использовать для изменения фотографий в их галерее.
Вы можете загружать изображения одним щелчком мыши без необходимости создания учетной записи.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их где угодно и использовать их в коммерческих целях.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
Vintagestockphotos.com
Здесь вы можете найти винтажные фотографии, которые точно не похожи на стоковые. Их библиотека изображений не очень большая, но если вы ищете уникальные черно-белые фотографии или случайную фотографию гостиной из семидесятых, это хороший вариант.
Вам потребуется создать учетную запись, но как только вы это сделаете, вы сможете бесплатно загружать изображения в разных разрешениях.
Morguefile.com
Morguefile — это веб-сайт с фотографиями, на котором есть хороший выбор изображений, выходящих за рамки вашего типичного внешнего вида стоковой фотографии, но он не даст вам массу вариантов. Кроме того, в нем есть много мест, которые выглядят как варианты фотографий, но когда вы нажимаете на них, они перенаправляют вас на другой сайт.
Бесплатные места для получения графики и значков для вашего веб-сайта
Технические стартапы и нишевые блоггеры могут столкнуться с проблемой отсутствия коллекции изображений, которые действительно представляют то, чем они занимаются.
Поэтому многие веб-дизайнеры, в том числе Headspace, Zoom и Google Skillshop, обращаются к графике и значкам, чтобы иметь возможность символизировать свой контент.
Если я не могу найти графику, которую я копаю в своей платной учетной записи Canva, я обращаюсь к этим веб-сайтам.
Undraw.co
Здесь вы можете получить простую, современную и минималистическую графику для использования на своем веб-сайте. У них есть солидное количество опций, и вы можете легко изменить цвет изображений, вставив свой шестнадцатеричный код.
Вы можете загружать изображения, в том числе SVG (стандартная векторная графика, которая не будет размытой даже при просмотре на большом экране) одним щелчком мыши без необходимости создания учетной записи.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их везде и использовать в коммерческих целях.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
Румяна. Дизайн
Что мне нравится в румянах, так это возможность настраивать уникальную графику, помимо простого изменения цвета.
У них есть платный уровень, где вы можете разблокировать еще больше графики и шаблонов, но если у вас нет времени заниматься графическим дизайном самостоятельно, это может значительно сэкономить время.
Вы можете загружать изображения, включая SVG (стандартную векторную графику, которая не будет размытой даже при просмотре на большом экране) в один клик после создания учетной записи.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их везде и использовать в коммерческих целях.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
Flaticon.
comFlaticon — отличное место, где можно найти огромный выбор иконок и наклеек для вашего сайта. Возможно, самая большая часть Flaticon заключается в том, что вы можете искать каталоги или группы значков и получать только те, которые соответствуют вашим потребностям.
Мне особенно нравятся анимированные значки, которые придают легкое движение браузеру на вашем веб-сайте.
Storyset.com
Storyset позволяет вам искать уникальные изображения и графику для рисования персонажей, которые вы можете настраивать, изменяя цвет, добавляя и удаляя элементы и даже анимируя их.
Что мне больше всего нравится в этом контенте, так это возможность фильтрации по стилю иллюстрации. Когда дело доходит до рисунков персонажей, вы хотите убедиться, что ваш веб-сайт и бренд соответствуют друг другу, это позволяет вам сделать именно это.
Частично бесплатные стоковые фотосайты Для вашего сайта
Shutterstock.
comShutterstock имеет огромную библиотеку изображений, но вы можете скачать только десять из них бесплатно. Из всех веб-сайтов со стоковыми фотографиями я использую Shutterstock меньше всего, потому что я считаю, что у него ограниченные возможности, и он может быть дорогостоящим, если вы пытаетесь использовать его постоянно.
После создания учетной записи вы можете загрузить до 10 изображений одним щелчком мыши.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их везде и использовать в коммерческих целях.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
Rawpixel.com
Rawpixel содержит множество отличных и уникальных изображений, которые вы можете скачать бесплатно с дневным лимитом загрузки
Вы можете загружать до 5 изображений в день после создания учетной записи.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их везде и использовать в коммерческих целях.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
CreativeCommons.org
The Creative Commons, пожалуй, мое наименее любимое место для поиска бесплатных изображений по нескольким причинам. Его домашняя страница немного сложна для навигации, и когда вы нажимаете, чтобы попытаться найти стоковые изображения для использования, вы попадаете на WordPress.org.
Иногда вы можете найти действительно уникальные новые фотографии, потому что самые разные люди загружают сюда свои материалы.
Каждая фотография имеет свою собственную лицензию Creative Commons License, каждая с различными ограничениями авторского права, и вам нужно прочитать мелкий шрифт, чтобы узнать, можете ли вы использовать ее для своего сайта или нет.
Так что, хотя технически это место для поиска бесплатных стоковых изображений, оно может быть очень удачным или неудачным.
Примечание: Creative Commons cc0 должен быть универсальной лицензией, прикрепленной ко всем изображениям на платформе. Но юридический жаргон вокруг этого также очень сложен для большинства пользователей.
Платные фотосайты для вашего сайта
Я не пользуюсь этими сайтами, но они могут предоставить уникальные фотографии, которые можно только купить. Так что, если у вас больше денег, чем времени, это может быть хорошим вариантом для вас.
Flickr
Adobe Stock
Уникальные видео и изображения iStock.
Улучшенные параметры поиска. ИИ на этих сайтах, как правило, даст вам то, что вы ищете, без необходимости прокручивать тонны.
Коммерческое использование для всех этих изображений является стандартным, поэтому вам не нужно беспокоиться о том, что вас пометят поисковые системы, если вы не укажете авторство.
Три передовых метода SEO для изображений
Изображения прекрасны, но даже если вы найдете идеальную фотографию, есть несколько вещей, которые стоит сделать, чтобы ваш блог или веб-страница отображались в поисковых системах.
Уменьшите размер изображения ниже 500 КБ (килобайт). Медленная загрузка страниц обычно вызвана большими размерами изображений. Уменьшая размер изображения ниже 500 КБ, вы создаете более быструю загрузку страницы, а Google любит более быструю загрузку страниц.
Простым способом сжатия изображения является использование бесплатного веб-сайта TinyPNG.com. Просто перетащите изображение в поле загрузки, и оно сообщит вам, насколько велико изображение до и после сжатия.
Платный уровень Canva также позволяет сжимать файлы перед загрузкой, что может быть полезно.
Наконец, если ничего из этого не помогает и ваш файл все еще слишком велик, откройте изображение на Mac, перейдите в верхнюю строку меню и щелкните инструменты , а затем уменьшить размер изображения .
Вы можете сделать что-то подобное и на ПК.Наличие изображения на каждой глубине прокрутки. Каждый раз, когда кто-то прокручивает вашу веб-страницу, на ней должно быть изображение. Чем больше ценности добавляет эта картинка, тем лучше.
Диаграммы, графики и диаграммы хорошо подходят для некоторых отраслей, потому что ими легко обмениваться и они помогают людям воспринимать информацию по-новому.
Дать изображениям альтернативный текст (альтернативный текст). Описание ваших изображений не только полезно для людей с нарушениями зрения или изображений, отключенных в их браузере, но также дает вам повышение SEO.
Опишите, что происходит с каждым изображением, удалите слова-заполнители и намеренно используйте ключевые слова без наполнения ключевыми словами.
С Squarespace это сделать очень просто.
Щелкните изображение, щелкните значок карандаша, а затем опишите изображение, где указано замещающий текст изображения.
Какое программное обеспечение для редактирования фотографий следует использовать для редактирования фотографий для моего веб-сайта?
Canva.comЯ люблю Canva всем сердцем и душой. Я не мог создавать сайты без него. Это делает графический дизайн более интуитивным и доступным для людей. Бесплатная версия Canva позволяет использовать формы и элементы для создания действительно уникальных изображений с высоким разрешением.
Я создаю все, от миниатюр для YouTube до фонов веб-сайтов, используя Canva. Их платный уровень составляет около 13 долларов в месяц и дает вам неограниченный доступ к огромной библиотеке высококачественных стоковых фотографий и потрясающей видеотеке.
Вы даже можете фильтровать результаты поиска по графике, фотографиям и элементам. С помощью Canva намного проще изменять фотографии и графику, накладывать элементы, менять цвета и многое другое — и все это без фотошопа.
Хотя есть бесплатный уровень, платная версия стоит каждой копейки.
Вы можете создавать уникальную графику и бесплатно загружать свои фотографии.
Все изображения здесь являются бесплатными, что означает, что вы можете использовать их везде и использовать их для коммерческого использования в рамках платного уровня.
Их лицензия гласит, что вам не нужно указывать авторство фотографа.
Befunky.com
Befunky — это более удобная версия фотошопа с изюминкой. Вы можете использовать невероятные фильтры, чтобы ваши изображения выглядели по-настоящему уникальными и художественными.
Это особенно полезно, если вы пытаетесь сделать изображения более рисованными или мультяшными.
Еще одним полезным инструментом является то, что вы можете заменить определенный цвет изображения другим цветом, чего еще нет в Canva.
Я использую Befunky, особенно при создании эскизов, потому что он может сделать ваш контент действительно популярным, а также сделать ваши изображения более привлекательными.
Сайты с изображениями, которые используют для вас другие веб-сайты с изображениями.
Kaboompics.com: на этом веб-сайте можно искать фотографии с помощью панели поиска и отображать фотографии с других сайтов изображений. Единственное, что мне нравится в этом, это то, что можно искать изображения по цвету, иначе это какой-то лабиринт.
Lifeofpix.com: Точно так же он получает фотографии из других мест, но в основном из Adobe Stock. Он имеет дополнительные квалификаторы поиска, такие как отрасль, ориентация, категория и цвет, но часто не дает результатов при использовании поиска изображений.
Запланировать звонок
Автор Клинт Малли
Запланировать бесплатный звонок
фотоизображенияграфика
Клинт Малли
Полное руководство по легальному использованию изображений в Интернете
Как опытный маркетолог вы понимаете, что визуальные элементы бесценны для вашей маркетинговой кампании.
Обладая способностью привлекать внимание, они могут принести вам больше кликов и продаж, чем любая текстовая реклама.
Это потому, что потребители учатся визуально. По сравнению с текстом, информация, представленная в виде фото и видео, с большей вероятностью запоминается дольше.
Это также повышает общее удобство для посетителей веб-сайта и помогает стимулировать их инстинктивное желание заниматься вашим бизнесом.
На самом деле спрос клиентов на визуальные эффекты настолько высок, что некоторым маркетологам сложно найти соответствующий контент и поделиться им. И в спешке они часто игнорируют один из самых важных аспектов использования изображений в Интернете — правовые нормы.
Законы об использовании изображений в Интернете
Правило простое: вы не можете просто взять любую картинку из поиска в Интернете и использовать ее в своей стратегии брендинга.
Каждый фрагмент контента (опубликованного и неопубликованного) получает авторские права сразу после его создания.
Это означает, что любое изображение, которое вы встретите во Всемирной паутине, может быть защищено законом об авторском праве. Даже селфи, которое вы сделали для своего аккаунта в Instagram, защищено законом об авторском праве, согласно которому автор (вы) являетесь единственным владельцем изображения.
Чтобы использовать изображение, защищенное авторским правом, сначала необходимо получить разрешение от его создателя. Несоблюдение этого правила может привести к суровым последствиям, таким как санкции, штрафы, судебные иски и уведомление об удалении DMCA. В тяжелых случаях нарушителям грозит даже тюремное заключение.
Похожий инцидент произошел между фотографом Даниэлем Морелем и медиа-компаниями Getty Images и Agence France-Presse (AFP). Фотография, опубликованная Морелем в Твиттере, была загружена AFP и позже распространена среди клиентов Getty без разрешения фотографа.
Фотограф заметил нарушение и подал в суд на компании. В результате федеральное жюри вынудило их выплатить Морелю 1,2 миллиона долларов.
Хорошее эмпирическое правило заключается в том, что иметь бизнес-страховку всегда полезно, но также не помешает доскональное знание законов.
Вывод: «Нет оправданий нарушению авторских прав», — говорит Кэролин Э. Райт, адвокат, специализирующийся на фотографии. Вы по-прежнему будете нести ответственность перед законом, даже если вы нарушите правила по ошибке.
Как я могу использовать изображение, защищенное авторским правом?
Ни в коем случае нельзя использовать фотографии, защищенные авторским правом. Все, что вам нужно сделать, это связаться с первоначальным создателем и получить разрешение. Предоставляет ли правообладатель «бесплатное» использование изображения, взимает ли он плату или устанавливает специальные ограничения, зависит от человека.
Получить информацию о правообладателе в Интернете довольно просто. Если вы найдете изображение на веб-сайте, просто свяжитесь с владельцем сайта для получения информации о фотографиях.
В качестве альтернативы, если вы найдете изображение через поиск Google, взгляните на сопутствующие детали в правой части экрана. Здесь вы, скорее всего, увидите веб-сайт, на котором размещено изображение, вместе с кредитами. Посетите веб-сайт, чтобы получить дополнительную информацию о том, кому принадлежит фотография или откуда она взята.
Не можете найти информацию о правообладателе? Не используйте изображение!
Чтобы оставаться под защитой закона, вы должны быть уверены, что у вас есть надлежащее разрешение, прежде чем загружать чужую работу на свой веб-сайт. Так что если у вас есть какие-либо сомнения, просто пропустите картинку, найдите другую или посмотрите другие варианты, описанные ниже!
Безопасные варианты использования изображений в Интернете
Помимо получения разрешения на использование изображения, защищенного авторским правом, существует множество альтернативных способов легального поиска и использования изображений в Интернете.
Некоторые из этих источников описаны ниже:
Общественное достояние
Изображения, относящиеся к категории общественного достояния, не защищены никаким законом. Либо их авторские права истекли, либо они никогда не были защищены авторскими правами. Лицензия общественного достояния также распространяется на произведения авторов, умерших более 70 лет назад.
Есть определенные авторы, чьи работы также автоматически становятся общественным достоянием. В США, например, все произведения, созданные правительством, являются частью общественного достояния. Вот почему широкая публика может свободно использовать фотографии официального Белого дома или изображения, предоставленные НАСА.
Проще говоря, эти изображения теперь принадлежат общественности. Автор передал свою работу публике и больше не будет претендовать на нее. Эти изображения доступны бесплатно и могут быть использованы как в коммерческих, так и в личных проектах. Вы также можете копировать, манипулировать, распространять и отображать общедоступные изображения любым удобным для вас способом.
Единственная проблема с использованием общедоступных изображений — это правила, которые различаются в разных странах. Лучше всего узнать о правилах в вашем географическом местоположении, прежде чем приступать к общедоступному достоянию.
Популярные платформы для общедоступных изображений включают Wikimedia Commons, Flickr Commons и Public Domain Review.
Хотя формальных требований нет, считается хорошей этикой указывать или указывать первоисточник изображений, являющихся общественным достоянием.
Creative Commons
Creative Commons — это некоммерческая организация, которая позволяет фотографам и художникам делиться своими работами для повторного использования. Тем не менее, создатели могут контролировать условия использования своих изображений с помощью различных типов лицензий:
CC BY — Attribution
В соответствии с этой лицензией вы можете свободно распространять, изменять и даже строить исходную работу до тех пор, пока как вы указываете автора.
Лицензия CC BY позволяет использовать работы художника как в личных, так и в коммерческих проектах.
Подобно лицензии с указанием авторства, вы можете использовать, редактировать и адаптировать эти изображения при условии указания авторства. Единственное изменение заключается в том, что вы лицензируете новые творения на тех же условиях. Это означает, что любая новая работа, в которой используется оригинальная фотография, должна быть подкреплена той же лицензией Creative Commons.
CC BY-ND — Attribution, NoDerivs
Этот тип лицензии позволяет распространять произведение как в коммерческих, так и в некоммерческих целях. Однако вам не разрешается каким-либо образом изменять изображение и использовать его целиком, без изменений. Вы также должны указать первоначального владельца.
CC BY-NC — Атрибуция, некоммерческое использование
Как следует из названия, вы можете использовать изображения, подпадающие под действие этой лицензии, только в некоммерческих проектах.
У вас есть свобода редактировать изображения любым удобным для вас способом, но не забудьте указать автора как на оригинальных, так и на недавно измененных изображениях.
CC BY-NC-SA – Атрибуция, некоммерческое использование, совместное использование
Изображения, подпадающие под действие этой лицензии, могут использоваться в некоммерческих проектах, аналогично лицензии CC BY-NC. Однако вы должны лицензировать новые творения на идентичных условиях.
CC BY-NC-ND — Атрибуция, некоммерческая, без производных
Это самая ограничительная лицензия из всех 6 лицензий Creative Commons. По этой лицензии изображения можно использовать в любых некоммерческих целях при условии указания авторства. Однако ни в коем случае нельзя изменять эти изображения.
Добросовестное использование
Другим местом, где можно получить фотографии без разрешения правообладателя, является коллекция добросовестного использования.
В соответствии с законодательством США добросовестное использование распространяется на изображения, используемые в определенных условиях, таких как образование, исследования, научные исследования, репортажи и пародии.
Чтобы уточнить, четыре основных критерия определяют, является ли изображение «честным» или нет.
- Цель и характер использования : Это определяет, используется ли изображение для некоммерческой или коммерческой деятельности.
- Характер произведения, которое будет использоваться : Например, законы предоставляют больше свободы фактическим произведениям, таким как биографии, по сравнению с художественными произведениями.
- Количество использованного изображения : Законы обычно разрешают использование небольшого фрагмента изображения или версии с низким разрешением.
- Рыночный эффект : Использование изображений, не снижающих рыночную стоимость изображений.
Как видите, правила добросовестного использования оставляют довольно большую серую зону для понимания. Я предлагаю использовать изображения добросовестного использования только тогда, когда они служат какой-либо образовательной или учебной цели.
Для других проектов, таких как электронная коммерция, веб-сайты и блоги, существует множество других вариантов.
Стоковые Фото
Стоковые фотографии — это фотографии, векторы и иллюстрации, которые легко доступны в любой нише, которую только можно вообразить. Вы можете скачать их бесплатно или приобрести на авторитетном веб-сайте. Вы должны иметь в виду, что некоторые изображения с бесплатных фотосайтов могут быть небезопасными с юридической точки зрения, особенно для коммерческого использования.
Наиболее значительным преимуществом использования стоковых фотографий является то, что они экономят много времени и усилий, затрачиваемых на создание новых изображений. Поскольку фотографы, которые делают эти снимки, являются профессионалами, фотографии обычно высокого качества.
В большинстве случаев стоковые фотографии можно использовать в любом удобном для вас формате. Вы также можете редактировать фотографии, обрезать и добавлять наложения в соответствии со своей стратегией брендинга.
Однако важно отметить, что вы НЕ являетесь владельцем образа. Изображение по-прежнему принадлежит создателю, и вы должны соблюдать лицензионное соглашение, прилагаемое к выбранному изображению.
К наиболее распространенным лицензиям на стоковые фотографии относятся:
- Роялти-фри: Этот тип лицензии дает вам свободу использовать изображение любым способом после единовременной фиксированной оплаты. Это самая доступная лицензия на стоковую фотографию, которая идеально подходит для владельцев малого бизнеса. Единственным недостатком бесплатных изображений является то, что они не являются эксклюзивными и часто покупаются многими маркетологами из-за их низкой стоимости.
- Управление правами : Эта лицензия адаптирована в соответствии с вашими конкретными потребностями. С этой лицензией вы защищены с точки зрения временных рамок, географического положения, размера аудитории и количества копий. Хотя это немного дорого, изображения, подпадающие под действие лицензии с управляемыми правами, являются эксклюзивными и могут дать вам исключительное право на использование определенного изображения.
- Расширенное использование : Эта лицензия особенно доступна для изображений, которые будут использоваться для перепродажи таких товаров, как футболки, чашки и календари.
- Редакционное использование : Эта лицензия позволяет использовать изображения только в достойных новостей публикациях. Поэтому их нельзя использовать для продвижения товара или услуги.
Еще один аспект, который следует учитывать при использовании стоковых изображений, — это внешний вид объектов, таких как люди, частная собственность, достопримечательности, товарные знаки и логотипы. Согласно закону, для изображения конкретного объекта на фотографиях необходима форма «разрешения» или согласие. В письме о согласии также указывается, что изображение может быть использовано в коммерческих целях и изменено в соответствии с предпочтениями пользователя.
Фотограф несет ответственность за получение всех необходимых разрешений для изображений, которые он отправляет на веб-сайт стоковой фотографии.
Агентства стокового фото обычно проявляют инициативу в этом вопросе и предоставляют изображения только после проверки релизов.
Однако будьте осторожны и перепроверяйте выпуски перед загрузкой изображений. Потому что даже если фотография принадлежит фотографу, юридическое нарушение использования изображения без надлежащего разрешения ляжет на пользователя — то есть на вас!
Ваши собственные изображения
Дополнительный и безопасный вариант — делать собственные фотографии.
Если вы фотограф, вам не нужно иметь дело с ограничениями авторского права. Они будут свежими и эксклюзивными, соответствующими стратегии вашего бренда.
Кроме того, вам не нужно вкладывать средства в профессиональное оборудование, чтобы делать отличные снимки. Качество камер в смартфонах такое же, как и в цифровых зеркальных фотокамерах, и вы без особых хлопот получите несколько великолепных фотографий.
Вы также можете нанять профессионального фотографа, который сделает индивидуальные снимки ваших продуктов, если позволяет бюджет.
Просто убедитесь, что вы взяли права на изображение фотографии у фотографа.
Контент, созданный пользователями
Знаете ли вы, что клиенты находят контент, созданный пользователями, более эффективным, чем контент влиятельных лиц? Исследование Stackla показывает, что 79% людей считают, что они сильно влияют на их решение о покупке.
Короче говоря, пользовательский контент, такой как изображения, является эффективной формой социального доказательства. Они также защищены от судебного преследования, поскольку ими делятся с разрешения ваших клиентов.
Существует множество способов побудить пользователей делиться своими фотографиями с использованием ваших продуктов или услуг в социальных сетях и на веб-сайтах.
Одним из лучших способов получить фотографии от пользователей является проведение конкурса. Помните конкурс Starbucks White Cup Contest, где потребителям предлагалось нарисовать каракули на простой кофейной чашке? Что ж, вы можете имитировать то же самое, создав конкурс, в котором люди должны делиться фотографиями, чтобы принять участие и выиграть потрясающие призы.
Еще один способ сбора изображений, созданных пользователями, — использование фирменного хэштега. Создайте легко запоминающийся хэштег, соответствующий названию вашего бренда. Затем попросите своих клиентов поделиться своими фотографиями в социальных сетях, используя данный хэштег.
Вы также можете использовать онлайн-обзоры для сбора пользовательского контента. Например, если вы продаете одежду в Интернете, вы можете попросить своих покупателей поделиться фотографиями в одежде, которую они купили.
Это даст потенциальному покупателю представление о том, как продукт выглядит в реальной жизни, и даст вам множество изображений, не защищенных авторскими правами, для использования на ваших маркетинговых платформах.
Могу ли я использовать изображения, которые появляются в результатах поиска Google?
Как мы упоминали выше, вы не можете использовать изображения, которые появляются при поиске в Интернете. Google, будучи одним из крупнейших агрегаторов контента, просто служит хостом для контента веб-сайта.
