Вы здесь
Главная > Мой блог > WEB-разработка > Оптимизация изображений (картинок) на сайте: атрибуты Alt Title, сжатие изображений

Оптимизация изображений (картинок) на сайте: атрибуты Alt Title, сжатие изображений

Здравствуйте, уважаемые читатели! Продолжая тему создания html картинок с помощью тега img, предлагаю рассмотреть осуществление оптимизации изображений с использованием атрибутов Alt Title, которое включает в себя также сжатие изображений (например, посредством сервиса PunyPNG).

Оптимизация изображений для сайта

Оптимизация изображений, наряду с оптимизацией статей, внутренней перелинковкой страниц, применением nofollow noindex для запрета индексации Google и Яндекс, грамотным использованием анкоров ссылок является составляющей частью собственно продвижения и раскрутки вашего сайта или блога WordPress. Часть эта, я вам скажу, немалая. Необходимость оптимизации изображений подтверждает тот факт, что страницы ресурсов участвуют в поиске по картинкам крупнейших поисковых сиcтем Yandex и Google.

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

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

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

Правила оптимизации и механизм сжатия изображений

1. Что касается общих правил, то для полноценного участия изображений в поиске по картинкам оно должно быть в определенной степени уникальным и содержаться в файле с расширением PNG, BMP, GIF, JPEG. Также картинка не должна быть слишком маленькой по размеру. Кстати, кто не обладает достаточными знаниями, чтобы использовать Adobe Photoshop, отличным вариантом для создания изображений может стать его онлайн аналог, коим является Pixlr Editor.

2. Обязательно перед загрузкой изображения и вставкой в статью определите его размеры, потому что это крайне важно. Подумайте, какую площадь будет занимать картинка, соотнесите ее величину с местом в статье, где она будет находиться. Откорректировать высоту и ширину изображения можно в любом графическом редакторе, например, в программе Paint, которая входит в состав операционной системы Windows. Как я уже отметил, картинка не должна быть слишком маленькой.

3. Необходимо дать корректное название файлу изображения. Оно должно содержать ключевые слова, по которым продвигается данная статья. Использую для примера одно из изображений данного поста. Я дал файлу картинки перед вставкой в пост следующее название: optimizatciia-izobrazhenii.jpg.

4. После сохранения на компьютере файла картинки ее необходимо подвергнуть сжатию в силу вышеназванных причин. Для этого можно воспользоваться многочисленными приложениями (например, программой для просмотра изображений FastStone Image Viewer) или on-line сервисами, среди которых я выделю PunyPNG, поскольку сам им с успехом пользуюсь. Несмотря на англоязычный интерфейс, он очень прост в обращении и никаких вопросов по его использованию возникнуть не должно.

После перехода на сервис PunyPNG нажимаете кнопку «Upload Images», выбираете изображение, которое желаете сжать и загружаете его на сервис. Можете загружать до 15 файлов одновременно, но в таком случае каждый из них не должен превышать 150 KB. Изображение автоматически сразу подвергается трансформации и вы получаете информацию, на сколько процентов выполнено сжатие и каков новый ”вес” картинки:

Сжатие изображения в сервисе PunyPNG

Надо отметить, что сжатие изображения в сервисе PunyPNG происходит практически без потери качества, что немаловажно.

5. Продуманное использование атрибутов Alt и Title тега Img. Если вы используете админ панель WordPress для вставки изображений в статью, то можете это делать как с компьютера, так и с галереи медиафайлов вашего сайта или блога:

Форма добавления изображения в редакторе админ панели WordPress

После выбора файла изображения, получите окно, где прописываете значение атрибутов Alt и Title:

Атрибуты Alt и Title в форме вставки изображений в админ панели WordPress

Важно отметить, что здесь должны в обязательном порядке присутствовать ключевые слова, по которым продвигаете статью. Также желательно, чтобы Alt и Title отличались друг от друга по содержанию. Кроме того, тексты Alt Title не должны быть слишком длинными. Думаю, 6-7 слов вполне достаточно; конечно, возможны исключения, если вы полагаете, что это необходимо. Вообще, для успешного участия изображения в поиске существует максимальный лимит в 15 слов.

Текст Title предназначен для пользователей; его можно увидеть, если подвести курсор к изображению с помощью мышки. Текст Alt сканируется поисковыми машинами и используется ими при ранжировании в поиске по картинкам.

6. Как я уже отмечал, атрибуты Height и Width тега img необходимо прописывать. Я уже отмечал выше, что изначально вы должны определить размер изображения и значения этих атрибутов уже будут указаны при вставке изображения:

Форма вставки изображения с указанием его размеров

Важно уже не изменять размеры картинки для наиболее эффективной оптимизации и оставить значение, равное 100%. В форме уже вставленной в текст картинки можно увидеть значения Height и Width:

Атрибуты Height и Width в форме редактирования изображений в редакторе админ панели WordPress

А вот так выглядят атрибуты Alt, Title, Height, Width тега Img в HTML-редакторе админ панели WordPress:

Атрибуты тега Img в HTML-редакторе админ панели

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

В заключение хочу предоставить on-line сервис Image SEO Tool для проверки правильности использования атрибутов изображения, включая все выше рассмотренные атрибуты тега Img, для оптимизации. Для того, чтобы проверить, необходимо ввести адрес страницы ресурса, которую вы хотите подвергнуть проверке, в поле «Enter URL», затем нажать кнопку «GO»:

Сервис проверки оптимизации изображений Image SEO Tool

В результате вы получите анализ картинок web страницы с содержимым атрибута Alt и с объяснением степени удачности поисковой seo оптимизации для каждого изображения. Кроме того, этот сервис выдает размеры по каждому изображению.

Так, например, для полученного результата к данной картинке следует объяснение следующего содержания: “Текст  Alt соответствует принципам Google, но вы можете просмотреть этот текст и удостовериться, что он описывает содержание, а не просто повторяет ключевые слова.” Надеюсь, смысл вам понятен. Основываясь на этих данных, можно внести соответствующие коррективы.

Таким образом, резюмируя данный пост, еще раз отмечу важность эффективной оптимизации изображений, включая правильное заполнение атрибутов Alt и Title, которое помогает участвовать в поиске по картинкам, а также сжатие изображений, позволяющее существенно повысить скорость загрузки страниц сайта, что учитывается Яндекс и Google в поисковой выдаче; все вместе это ведет к увеличению трафика на ваш ресурс. В конце публикации напоминаю, что вы можете оформить подписку на свежие статьи посредством электронной почты.

Источник: http://goldbusinessnet.com

2 thoughts on “Оптимизация изображений (картинок) на сайте: атрибуты Alt Title, сжатие изображений

Добавить комментарий

Top