Добавляем картинки и видео на сайт: на что обратить внимание?

Как говорится, «лучше 1 раз увидеть, чем 100 раз услышать прочитать». Поэтому мы рекомендуем владельцам сайтов и контент-менеджерам использовать картинки (фотографии, иконки, инфографику) по возможности на всех страницах сайта – в описании товаров или услуг, в статьях, в новостях, в информации о компании, в описании условий работы или заказа и т.д. Картинки помогут «разбавить» текст, иконки привлекут внимание к элементам текста, а инфографика заменит пару абзацев. Это же касается и видеороликов – на странице с описанием товара будет полезен ролик, показывающий товар в действии, на странице с описанием вебинара – короткое видео с рассказом автора о содержании вебинара.

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

Добавление картинок на сайт. Основные рекомендации

1. Картинки должны быть хорошего качества

Под словом «качество» понимается отсутствие шума на картинке, нормальная яркость и контрастность. Пример:

Картинка плохого качества

Картинка хорошего качества

Где взять хорошие картинки? Если нужны фотографии товаров, интерьеров, мероприятий – пригласите профессионального фотографа или закажите фотосъемку в студии. Поверьте, эти затраты окупятся.

Если нужны абстрактные картинки, их можно купить в фотобанке. Из популярных – ShutterStock и DepositPhotos.

2. Следите за «весом» картинки

Желательно, чтобы каждая картинка была не более 80-100 Кб. Иначе на мобильных устройствах страница уже с 2-3 картинками станет «подвисать».
Увеличенные картинки, которые открываются по клику на исходной картинке, могут быть и больше, например, 200-300 Кб (в этом случае пользователь морально готов к некоторому ожиданию).
Уменьшить вес картинки без потери ее качества можно с помощью различных онлайн-сервисов (например, Kraken или Optimizilla). Если же вы используете Photoshop, сохраняйте картинки в формате JPG с качеством в 70% – это дает оптимальное сочетание размер/качество.

3. Не размещайте на сайте картинки больше 1024 пикселей в ширину

Ибо это бессмысленно)) Вот эта картинка имеет ширину 1024 пикселя: http://1ps.ru/files/blog/samsung-galaxy-note-10.jpg
Это достаточный размер, чтобы разглядеть подробности изображения. Картинки большей ширины будут дольше загружаться, их будет неудобно просматривать на мониторах среднего размера.

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

4. Для превью делайте уменьшенные картинки

Запомните правило – чем больше картинка по размеру (в ширину и высоту), тем больше она «весит».

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

Вполне подойдут изображения не более 300 пикселей в ширину и высоту. Например, вот такие картинки мы используем для превью наших статей (их размер 200 на 150 пикселей):

5. Указывайте понятные названия у картинок

Допустим, у вас есть изображение 003_62319_068416.jpg телевизора марки LG модели 55LA620V с поддержкой функции 3D.  Всю эту информацию следует указать в названии картинки – televizor-LG-3D-55LA620V-mysite-ru.jpg.

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

6. Указывайте alt для картинок

Речь идет об атрибуте alt в теге img:
<img src="/products/televizory/televizor-LG-3D-55LA620V-mysite-ru.jpg" alt="ЖК-телевизор LG 55LA620V, диагональ 140 см, 3D" />

Довольно «избитая» рекомендация, о которой говорят поголовно все оптимизаторы, но которая выполняется крайне редко просто потому, что лень)) Лень придумать описание из 3-5 слов, лень добавить его к картинке – ведь на самой странице его не видно, так зачем и напрягаться?

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

7. Выкладывайте несколько картинок для продукта

Если на странице вы описываете какой-то продукт (товар, поездку, мероприятие и пр.) – не ограничивайтесь одним изображением, добавьте хотя бы 5-6 фотографий. Можно снять продукт с разных ракурсов, в разных цветовых схемах. Если это какой-то комплект, то можно выложить фотографии как всего комплекта в целом, так и его отдельных элементов.

Только не увлекайтесь)) 10-20 фотографий вполне достаточно.

8. Одинаковый формат картинок для одной страницы

Это не категоричный, но хороший совет, он направлен на эстетику страницы. Если на одной странице вы размещаете несколько картинок по тексту, постарайтесь сделать их одинаковой ширины и выровнять по одной линии. Пример:

Картинки вразброс

Картинки выровнены

С требованиями к картинкам закончили, перейдем к видеороликам, здесь пунктов поменьше.

Добавление видео на сайт. Основные рекомендации

Неожиданно, но:
1. Видео должно быть хорошего качества

FullHD, конечно, не обязательно, но рекомендуем записать видео в разрешении не менее 640x480 пикселей (или 720x480) – оно же 480p, если вы понимаете, о чем я )) Обязательно проверьте, чтобы звук был ровным, без шипений и резких скачков.

Примеры:
– Здесь качество видео «хромает» и звук глуховат: http://www.youtube.com/watch?v=xz-PvTmVFE4
– В этом видео качество намного лучше, но мешает гул в помещении, где идет съемка: http://www.youtube.com/watch?v=0-Kl0hJ-c08

2. Разместите ролик на видео-хостинге

Лидеры в этой области – YouTube, Vimeo, RuTube.

В этом случае вся нагрузка при просмотре видео ляжет на сервера видео-хостинга, а не на ваш сайт. Да и вставка видеоролика на страницу сайта упростится до вставки примерно такого кусочка кода через админку вашего сайта:
<iframe width="560" height="315" src="//www.youtube.com/embed/2xPrLBLIScI" frameborder="0" allowfullscreen></iframe>

3. Составьте хорошее название и описание для видео

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

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

Пример описания для видео:

Дополнительные рекомендации вы можете найти в этой статье. Будут вопросы – пишите, с удовольствием ответим.

---