Оптимизация: про оптимизацию изображений


Поисковая оптимизация фото, рисунков, изображений и другой графики на сайте. Советы по основам оптимизации картинок и фото, графические форматы для показа изображений. Про оптимизацию атрибута ALT тега IMG и URL-адресов графических файлов с рисунками. Оптимизация картинок и рисунков.
Основы оптимизации графики фото
Продажа вебсайтов
Оптимизация проектов

Оптимизация картинок и рисунков

Изображения (картинки, фото, рисунки, прочая графика) полезны для показа на сайте, но нуждаются в графической оптимизации. Каждая картинка имеет определенный URL-адрес и атрибут ALT в теге IMG (от слова "image" - изображение), с которыми оптимизация графики и проводится. Предварительно полезно оптимизировать картинку в фотошопе (Photo-Shop), Corel Draw, Image Ready или другом графическом редакторе, чтобы уменьшить ее вес при приемлемом качестве рисунка или фотографии.

Оптимизация изображений: как оптимизировать фото?

В HTML-теге IMG атрибут ALT предназначен для того, чтобы отображать альтернативный текст в том случае, если картинка или фото не показывается по какой-либо причине. Согласно основам оптимизации графики, в этом поле помещается краткое, но информативное описание изображения. Чтобы рисунок или фотография корректно показывались на странице, графический тэг IMG должен быть оформлен следующим образом: <img src="адрес-графического-фото-файла" alt="описание-фотографии" />.

Оптимизация изображения: графика и фотоДля чего нужно всегда использовать атрибут ATL при оптимизации фото и рисунков? Во-первых, для того, чтобы пользователи с отключенным в браузере показом графики могли понять, что изображено на картинке. Второе важное соображение заключается в том, что при использовании рисунка как графической ссылки текст из поля АЛТ становится "анкором" для нее. Тем не менее Гугл не рекомендует использовать изображения для этой цели слишком часто, поскольку текстовые ссылки более эффективны для навигации по сайту. Наконец, оптимизация рисунка и имени графического файла способствует продвижению сайта по графике в специальных сервисах, наподобие Google Image Search (поиск по картинкам).

Советы Гугла по оптимизации картинок и фотографий

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

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

2. Обязательно прописывайте и оптимизируйте текст в атрибуте ALT, когда картинка используется как графическая ссылка! Если Вы все-таки решили использовать рисунок в качестве основы ссылки, его текстовое описание поможет Гуглу получить сведения о странице, на которую Вы ссылаетесь картинкой. Для этого представьте, что Вы заполняете анкоры обычных текстовых ссылок; SEO-оптимизация изображения на картинке в этом случае выполняется так же, как и обычно. При СЕО-оптимизации текстов для изображений не следует:

  • писать в АПЬТ изображения длиннющие тексты, похожие на спам
  • использовать только графические ссылки для навигации по сайту

3. Хранение графические файлы с картинками в одной директории. Вместо того, чтобы разбрасывать файлы с фото по разным каталогам и поддоменам Вашего сайта, заведите для фотографий отдельную директорию, например, папку /images или /photo - это позволит упростить путь до изображений.

4. Используйте основные форматы графических файлов, которые поддерживаются всеми браузерами и не требуют установки дополнительного программного обеспечения на стороне пользователей. Следите, чтобы расширение файла с рисунком соответствовало бы его графическому формату. Таких форматов картинок всего четыре:

  • JPEG или JPG: графический формат, наиболее подходящий для фото
  • GIF: формат картинок, пригодный для небольших изображений сайта
  • PNG: примерно то же, что и GIF, но поддерживающий больше опций
  • BMP: формат для рисунков без сжатия, дает большие размеры файла

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

Основы оптимизация рисунков и картинок в Фотошопе

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

Поисковая оптимизация фото, рисунков и графики: атрибут ALT тега IMG картинки
Поисковая оптимизация фото, рисунков и графики: атрибут ALT тега IMG картинки

После обрезки ее до нужных размеров (лучше сохранять "золотое сечение" 4:3) остается сохранить изображение для web, выбрав оптимальный параметр сжатия. В данном случае он взять минимально возможным, чтобы облегчить вес картинки.

Основы оптимизации картинок и фотографий в фото-шопе: сохранение графики
Основы оптимизации картинок и фотографий в фото-шопе: сохранение графики

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

Оптимизация картинок и рисунков
SEO для вебсайта
Ссылка на страницу: http://com-seo.ru/image-optimizaciya-kartinka-risunok-foto-photo-grafika.html © 2013 Москва Россия