Картинки для сайта

Применение оптимизированных изображений в контенте веб-страниц способствует их лучшему ранжированию за счет:

Улучшения поведенческих факторов

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

Ускорения загрузки сайта

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

Дополнительного трафика

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

Усиления релевантности контента

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

Фотографии, графические рисунки, фоновые изображения – это визуальные элементы веб-дизайна. Привлекательный дизайн способствует улучшению поведенческих факторов сайта, а уникальные картинки – это возможность попасть в результаты выдачи Google Картинок или Яндекс.Картинок и улучшить ранжирование страницы, на которой они размещены. Итак, откуда брать изображения для сайта? Есть несколько вариантов:

• Из результатов поиска в Google и Яндекс. Но учтите, что эти изображения не являются уникальными. Мы рекомендуем уникализировать их перед использованием для получения наилучшего эффекта от SEO.
• Из бесплатных фотостоков. Мы подобрали 18 бесплатных источников фотографий и видео, которые подойдут не только для сайта, но и для печатных изданий, социальных сетей и рекламных материалов.
  • Pixabay Коллекция из миллиона бесплатных изображений и видео для коммерческого использования. Картинку можно найти с помощью строки поиска, мы рекомендуем вводить ключевое слово на английском, так качество результатов будет лучше.
  • Unsplash Выборка из более 300 тысяч бесплатных изображений, которые для удобства разделены на темы. Можно использовать работы определенного автора, чтобы поддерживать единый стиль на сайте или в соцсетях.
  • Pexels Фотосток с бесплатными изображения и видео на множество разных тем, которые можно редактировать и использовать в коммерческих целях.
  • Сanva Сервис с бесплатными изображениями и видео, которые можно изменять и уникализировать прямо на сайте. Картинки сразу можно поставить в нужный формат и задать размеры, также можно добавить логотип, текст и прочие элементы. Есть возможности оформить печатные издания, визитки, портфолио и т. д.
  • Free Images Источник бесплатных дизайнерских фото на 26 тематик. Для использования нужна регистрация на сайте.
  • Life of Pix Бесплатный источник качественного видеоконтента и большого количества профессиональных фотографий для 15 категорий.
  • Reshot Фотосток с самыми оригинальными фотографиями. Использование бесплатно, при желании можно поделиться в своих социальных сетях, откуда взято фото.
  • Focastock Здесь можно найти релевантные картинки с точностью до деталей благодаря фильтру. На сайте есть видеоролики. Все можно скачивать и использовать в коммерческих целях.
  • StockSnapФотосток с большим количеством категорий и возможностью скачивания. На каждом изображении указано, сколько раз оно было скачано.
  • Magdeleine Сайт с бесплатными красивыми пейзажами. Большинство изображений находятся в свободном доступе, для некоторых нужно указать автора.
  • Foodiesfeed Более 1000 фото еды и продуктов, картинки можно скачивать и использовать для бизнес-целей
  • Kaboompics Бесплатный фотосток с качественными профессиональными фотографиями и статьями на тему дизайна и онлайн маркетинга.
  • Travel Coffee Book Отличный фотосток для тех, кому нужен яркий пейзаж. Огромный плюс в том, что под фотографией отмечено название местности, где был сделан снимок.
  • Freerange Stock Удобный фотосток с большим количеством изображений на разные темы. Скачивать картинку можно в нескольких размерах.
  • ISO Republic На сайте представлены профессиональные фотографии и видео, которые можно скачать бесплатно.
  • Pablo.buffer Фотосток с возможностью редактировать картинки для социальных сетей, подбирать размер и постить напрямую в социальные сети.
  • Mazwai Бесплатный источник профессиональных видеоматериалов для любого вида использования.
  • Burst Фотосток с материалами для коммерческого использования.
• Из платных фотобанков. Некоторые фотобанки предоставляют бесплатный пробный период, позволяющий скачивать любые изображения в течении ограниченного срока. Вот список самых популярных источников, предоставляющих Free Trial:
  • Shutterstock Около 200 млн изображений: фотографий, видео и векторных картинок. Также есть возможность редактирования изображений. Стоимость: от 29 $ за пакет из двух изображений или годовые подписки от 29 $ за 10 изображений в месяц. Можно оформить бесплатную пробную подписку на 30 дней и получить 10 изображений в подарок.
  • Adobe Stock Фотобанк с 1 млн векторных изображений, фото для сайтов, книг, журналов, блога и рекламы Стоимость: от 30 $ за пакет с 10 материалами. Можно воспользоваться бесплатным пробным периодом, а также получить 10 бесплатных изображений за регистрацию.
  • Bigstockphoto 70 млн фотографий на различные темы Стоимость: от 0,53 $ за изображение. Можно получить бесплатную неделю.

Картинки на веб-страницах могут применяться в качестве:

• Элементов дизайна. Речь идёт о логотипах, иконках и фоновых изображениях. Важно, чтобы эти элементы соответствовали дизайну сайта.
• Элементов контента. Изображения могут выступать в качестве незначимых, значимых или основных элементов контента.

Подробнее

Оптимизация картинок подразумевает работу над следующими факторами:

Качество

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

Уникальность

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

Оформление

Картинки должны гармонично сочетаться с дизайном сайта и контентом веб-страницы.

Название файла

Для усиления релевантности название файла должно соответствовать принципам ЧПУ. Помимо названий файлов Google учитывает пути в URL. Постарайтесь выработать логическую схему для URL изображений.

Атрибуты Alt и Title

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

Видимые подписи

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

Семантическая разметка

Картинки и подписи к ним в HTML-коде рекомендуется размечать через тег <figure>, который должен содержать тег <img> (само изображение) и <figcaption> (видимая подпись).

Микроразметка

Семантическую разметку можно дополнить применением микроразметки по стандарту Schema.org (сущность ImageObject).

Форматы файлов

Следует ответственно подходить к выбору формата, т. к. от этого во многом зависит размер файла в мегабайтах.

Вес файлов

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

Картинки на веб-страницах могут применяться в следующих форматах:

• WEBP - современный формат растровых изображений. Отличается новейшей технологией сжатия, обеспечивающей максимальное качество при минимальном размере файла. Однако данный формат, в силу новизны, поддерживается далеко не всеми графическими редакторами, CMS и браузерами, поэтому не следует спешить его применять.
• SVG - прогрессивный векторный формат, т. е. SVG-картинки не теряют качество при увеличении, отлично подходят для несложных изображений и иконок, а также для реализации анимации.
• PNG - растровый формат, поддерживающий прозрачность и полупрозрачность.
• JPG - лучше других подходит для картинок с большим количеством цветов и фотографий.
• GIF - устаревший формат, поддерживающий до 256 цветов, прозрачность и анимацию. Можно использовать для несложной анимации.

Подробнее

Под размером картинки может пониматься один из двух взаимосвязанных параметров:

• размер графического файла в мегабайтах («вес»)
• геометрический размер изображения в пикселях

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

Мы подобрали список сервисов, которые помогут сжать изображение до 90%. В некоторых из них изображение можно обработать: обрезать, нанести водяной знак или изменить цвет.

Подробнее

Копирайт в футере

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

Водяной знак

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

Быстрая индексация

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

Ни одна CMS в своём базовом функционале не поддерживает возможность создания файла Sitemap со специальным синтаксисом для изображений, поэтому следует использовать дополнительные расширения:

Yoast SEO

Это SEO-плагин №1 для WordPress, функционал которого включает возможность генерации XML карты сайта, включающей расширенные данные об изображениях.

OSMap

Это узконаправленный компонент для сайтов на Joomla, работающий в связке со специальными плагинами. Для генерации дополнительного файла Sitemap для картинок потребуется активация и настройка соответствующих плагинов.

JSitemap

Этот тяжелый мультифункциональный и самодостаточный SEO-компонент для Joomla, максимально гибкий и требующий тонкой настройки.