|
|
|
|
|
Уже давным-давно прошла эпоха dial-up интернета, когда одна единственная картинка загружалась несколько минут. Сейчас высокоскоростной интернет доступен каждому, даже на мобильных устройствах. Однако это не значит, что нужно забыть об оптимизации картинок под поисковые системы. Совсем наоборот, оптимизация сейчас важна как никогда. Ниже приведены 10 советов по оптимизации изображений.
1. Релевантность
Использование подходящего изображения на вашем сайте является первым шагом на пути к успеху. Начать поиск изображений можно со старого, доброго Flickr.com. Там представлен огромный выбор изображений по различным тематикам, а самое главное есть фильтрация контента по наличию лицензии на свободное использование. Это значит, что вы можете использовать такие изображения в коммерческих целях.
Другие популярные фотостоки:
Freeimages: огромный фотосток с 2500000 зарегистрированных пользователей и около 400000 фотографий.
New Old Stock: старинные фотографии из государственных архивов учреждений, имеющие лицензию Flickr Commons.
Public Domain Archive: большая коллекция изображений со всего интернета
Unsplash: каждые 10 дней доступны 10 новых фотографий высокого разрешения.
2. Формат изображения
Чем меньше будет размер картинки в килобайтах, тем быстрее она будет загружаться на странице. Самыми популярными форматами изображений для web являются — .jpg, .png, .gif.
JPEG сегодня наиболее широко используемый формат изображения. Он наилучшим образом подходит для интернета, поскольку обладает малым размером файла и широким цветовым диапазоном. При этом действует правило: чем меньше размер файла, тем ниже его качество.
GIF поддерживает работу не более чем с 256 цветами. По этой причине GIF целесообразнее использовать для текста, логотипов и прочих изображений, где применяется 1 цвет либо ограниченное количество цветов, которые постоянно повторяются.
PNG является отличной альтернативой форматам GIF и JPEG. В нем вы можете сохранять ваши фотографии с минимальной потерей в качестве, а так же этот формат подойдет и для изображений в интернете, его можно сжать и ужать до размера GIF или JPG.
3. Сжатие изображения
Когда мы оптимизируем изображения для размещения на сайте, наше цель — уменьшить размер файла как можно больше, не жертвуя при этом качеством изображения. Самый простой способ это сделать — использовать сервисы TinyPNG или Compress JPEG. Просто загрузите изображение и программа все сделает за вас.
Если вы сравните сжатый образ с оригиналом, вы не заметите потери качества.
Сжатое изображение слева.
Adobe Photoshop позволяет полностью проконтролировать этот процесс, задав при этом необходимые параметры.
4. Название файла
Еще один способ оптимизировать изображение для поиска — сделать так, чтобы название файла с изображением соответствовало содержимому картинки. Это облегчит нахождение картинка как для вас, так и для поисковых систем.
Пример: IMG_Seattle_MusicFestival_2015_01.
5. Атрибут изображения alt
Тег alt дает возможность вместо отсутствующего изображения вывести его описание. Данный атрибут информирует посетителя сайта о содержимом изображения текстовым сообщением, в том случае, если в браузере пользователя отключено отображение картинок или при загрузке изображения произошла ошибка.
Простейший HTML-код для изображения выглядит следующим образом:
<img src=”http://example.co.uk/uploads/big-steak.jpg”>
Как известно поисковые системы пока не умеют распознавать картинки. Зато от прекрасно распознают атрибут alt и если в коде есть нужные слова, то выдают эту картинку в результатах поиска.
Вот пример расширенного атрибута для поисковых систем.
<img src=http://example.co.uk/uploads/big-steak.jpg alt=”Old man eating a big steak in the restaurant”>
При описании картинок можно использовать и тег title - это тот текст, который появиться при наведении на картинку курсора мыши. Для поисковиков он не так важен. Но, все равно, его советуют прописывать.
6. Размер изображения
Большая картинка в полном разрешении может открываться отдельной страницей по ссылке. На самой же странице достаточно разместить превью изображения. Для сжатия изображений можно использовать графический редактор Photoshop или один из множества бесплатных сервисов. Это Pixlr, PicMonkey, так же GIMP, который распространяется бесплатно, при этом обладает почти тем же функционалом, что и Photoshop.
Одновременно с этим не стоит превращать крупное изображение в миниатюру, сжимая размер картинки при помощи стилей. Кроме того, что изображение может исказиться, картинка будет полностью прогружаться, замедляя общую скорость загрузки страницы.
7. Sitemap для изображений
Вы можете предоставить Google дополнительную информацию о графических материалах, размещенных на вашем сайте, с помощью специальных функций файла Sitemap. Это поможет Google найти контент, который иначе нельзя было бы обнаружить (например, если он загружается с помощью JavaScript), а также позволит вам указать изображения, которые необходимо сканировать и индексировать.
Для изображений можно создать отдельный файл Sitemap или обновить уже существующий.
Google дает следующий пример для URL: http://example.co.uk/sample.html:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.co.uk/sample.html</loc>
<image:image>
<image:loc>http://example.co.uk/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.co.uk/photo.jpg</image:loc>
</image:image>
</url>
</urlset>
Вы можете найти более подробную информацию здесь: https://support.google.com/webmasters/answer/178636?hl=ru
Если вы используете WordPress, то для вашего удобства есть бесплатные плагины: Google XML Sitemap for Images и Udinra All Image Sitemap. Они оба автоматически создают sitemap для изображений.
8. Хостинг
Такие хостинги изображений как Imgur и Postimage позволяют загружать картинки на своих сервера, что очень экономит дисковое пространство и положительно влияет на пропускную способность вашего сайта. Но ваши изображения могут быть удалены или заблокированы, когда хостинг перегружен.
В этом случае лучше использовать собственные сервера для хостинга картинок. Это очень выгодно в долгосрочной перспективе.
9. Социальные сети.
Социальные сети сейчас играют огромную роль в продвижении ресурса. Самый простой способ интегрировать сайт с соц. сетями — установить кнопки социальных сетей.
Например, чтобы побудить пользователей поделиться вашей картинкой на Pinterest нужно просто добавить кнопку "Pin It"
Есть еще отличный сервис Image Sharer от SumoMe. С ним ваши посетители смогут легко делиться вашими картинками. Он поддерживает Facebook, Twitter, Pinterest, and Yummly.
10. Google Webmaster Guidelines
В случае сомнений и любых затруднительных ситуаций обращайтесь к Руководству Гугл для вебмастеров. Там вы найдете всю необходимую информацию.
Оригинал статьи на английском языке: https://moz.com/ugc/10-tips-for-optimizing-your-images-for-search |
|
|
|
|
|
| Кстати, заметил, что сейчас мало кто занимается оптимизацией картинок. А зря, это ведь дополнительный трафик, причем немалый. |
|
|
|
|
|
|
|
| Картинки много значат, для конверсии и юзабилити, сколько кейсов уже есть, когда улучшение изображений под потребности пользователей в разы повышало конверсию. |
|
|
|
|
|
| Сжимаю все картинки у себя на компе, прежде чем заливать на сайты. Так они не расползаются по экрану, быстрее грузятся и меньше жрут бендвича хостинга. Быстрая загрузка сейчас, кстати, довольно существенно влияет на выдачу в поисковиках. |
|
|
|
|
|
| Да над картинками надо работать как и над любыми незначительными деталями |
|
|
|
|
|
| А что насчет уникальности? Насколько сейчас важна уникальность картинок? |
|
|
|
|
|
5 ошибок при выборе цвета, которых нужно избегать в веб-дизайне
|
|
|
|
|
|
|
|
|
