Nazyrov.ru » » Оптимизируем изображения для сайта!

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

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

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

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

К оптимизации изображений можно отнести:

  • Уникальность;
  • Качество;
  • Размер и формат изображений;
  • Количество изображений;
  • Директория изображений;
  • Название и описание картинок;
  • Использование водяного знака;

Уникальность изображений.

Уникальность изображений так же важна, как и уникальность текста. Конечно, поисковые ситемы не делятся своими алгоритмами проверки уникальности изображений, но даже поразмыслив немного логически, и проведя несколько анализов, можно сделать вывод, что у Яндекс и Google похожие алгоритмы проверки изображений, но есть и различия.

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

Название картинки. То есть изображения нужно называть своими именами, а не набором символов. Вот, к примеру, я нашел правильно оптимизированное изображение, где название соответствует содержимому. В названии я вижу – «ford_mustang».

Title изображения. Здесь правила те же, что и при оптимизации текста. Title тоже должен соответствовать. В примере на картинке он следующий – «фото Ford Mustang Shelby GT500».

Alt изображения. Это правильное соответствующее действительности описание изображение. На примере оно такое – «Форд Мустанг Шелби GT500 фото».

Форд мустанг

Это изображение хороший пример того как правильно оптимизировать картинки, и результат налицо, картинка на первых местах в поиске по ВЧ запросу.

Правильный код изображения должен выглядеть так:

1
<img class="класс картинки, если есть" title="титл картинки" src="ссылка на изображение" alt="описание изображения" width="ширина картинки" height="высота картинки" />
Избегайте точное вхождение ключевых слов в title, alt картинок и текста! Переоптимизация создаст риск фильтра от поисковых систем.

Качество изображений.

Изображения, используемые для сайтов, относятся к растровой графике (форматы png, jpeg, gif). Растровые изображения состоят из большого количества квадратов – пикселей. Качество изображений зависит от количество пикселей на 1 квадратный дюйм. Оптимальное разрешение – 72 ppi. Чем оно меньше, тем соответственно и хуже качество изображения.

битый пиксель

При создании нового изображения в фотошопе, у вас появиться вот такая табличка, где и нужно указать разрешение.

разрешение изображение в фотошопе

Разрешение выше, чем 72 ppi делать нежелательно. От этого не улучшиться качество, а только сделает вес изображения больше, потому что большинство мониторов не предназначены для обрабатывания изображений выше чем 72 ppi.

Размер изображения.

Многие вебмастера и блоггеры допускают распространенную ошибку. Загружают изображения на хостинг одного размера, а на странице отображения указывают другое. Это не просто лишняя нагрузка на хостинг из-за веса картинки, но и более длительная обработка изображения браузером.

Всегда загружайте изображение, уже подогнанное под размер. При изменении размера, меняйте и формат. Это значительно снизит вес картинок. В скором будущем я напишу как изменить вес изображения без потери качества.

Оптимизация формата изображения.

Если поисковые системы умеют определять формат изображения, таких как png, jpeg, gif, то я думаю с уверенностью можно сказать, что при поисковом ранжировании картинок, они учитывают и формат изображений.

Каждый формат обычно предназначен для определенных целей.

PNG – чаще используется для элементов дизайна сайта.
JPEG – применяется для объемных фотографий, в статьях на сайте.
GIF – применяется для аннимации.

Влияние количества изображений на оптимизацию.

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

В какой директории размещать изображения, и как это влияет на загрузку?

Размещать картинки можно в любой директории, но если вы хотите ускорить их загрузку, то размещайте в одной папке, например, images. Это уменьшит количество запросов браузера и увеличит скорость загрузки сайта.

Стоит ли использовать водяной знак?

Использовать водяной знак или нет, ваш выбор. Я его использую только для главных картинок, а в остальных не вижу смысла, так как у меня преимущественно скриншоты, которые вряд ли кто-то будет воровать.

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

Как проверить уникальность изображений?

Самым лучшим вариантом проверки уникальности изображения я считаю всемирно известный Google.

Просто переходим по ссылке – проверить уникальность картинки, загружаем изображение, и гугл выдаст результаты.

проверка изображения в google

проверка уникальности картинки

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

А вы оптимизируете изображения? Какие еще фишки используете?

P.S. В ближайшее время планирую начать монетизировать блог. Будут большие скидки моим подписчикам на баннерную рекламу – 70 %. Подписывайтесь на обновления блога и получите скидку!

Запись опубликована в .
Как вам статья?
Полная ерундаНичего интересногоТак себеХорошоОтлично (1 голосов, оценка: 5,00 из 5)
Loading...Loading...

Понравилась статья? Поделись с другими, нажав на одну из кнопок.


Комментариев 32 на “Оптимизируем изображения для сайта!

  1. Добрый вечер, Андрей! Подробненько все описали. Я еще использую TinEye.com для проверки изображения на уникальность. Вы не используете его?

    • Привет, Антон. Раньше пользовался, но сейчас нет. До Google ему далеко.

    • Я тоже использую tineye.com, очень нравится. Если честно про проверку уникальности картинок от Гугла раньше и не знал

      • Попробуй Google, он намного точнее. tineye.com не видит картинок на страницах которые закрыты в robots.txt, а google, сам знаешь, не всегда следует правилам robots.txt

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

  2. Вообще согласен с тобой. Бывает на не уникальную картинку выдает уникальность. Google рулит! А программой ETXT не пробовал проверять?

  3. Да есть там такая функция, только я ей никогда не пользовался. Судя по тому сколько она текст по времени проверяет, думаю с картинками такая же беда.

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

      • Сначала я тоже думала, что это из-за размера. У меня сначала стояла настройка, чтобы автоматически менять картинку на средний размер. Думала из-за этого все. Убрала эту настройку, то есть поставила галочку, чтобы загружалась полная картинка и все равно такая же беда.( Мне не нравится это совсем, смотришь на картинку, как будто слегла туман в глазах, такое вот ощущение.

  5. Нужно серьезно заняться оптимизацией картинок, я уже и забыл про них) Статья хорошая подробно описано.

  6. При добавлении картинки на сайт как правильно поступить в параметрах изображения с ссылкой? оставить по умолчанию или убрать ссылку?

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

  7. спасибо большое,я стараюсь убирать ссылки на картинки если они никуда не ведут,были сомнения правильно я делаю или нет но теперь все понятно.

  8. Интересно, буду знать что и картинки нужно оптимизировать...

    Но вот в Title нужно писать что на картинке нарисовано? У меня вот в последней статье картинка где нарисован человечек с мешком, а название статьи «Эффективные способы увеличить словарный запас» Подскажи Андрей что бы ты в Title написал бы???

    • Не всегда в title, прописывается, то что изображено на картинке. Картинки ведь могут быть разные — скриншоты, карикатуры и т. д. Главное, чтобы была логическая связь картинки и текста, тогда можно и ключевые слова прописывать в alt.

      В твоем случае, в alt прописано — slovarni_zapas. Это неверно, так прописывается название загружаемой картинки, а описание желательно писать кириллицей — словарный запас.

  9. Оптимизированные картинки — это дополнение к релевантности текста, но не более. То есть если картинка заточена под поисковый запрос: alt, title, само изображение, то такая картинка делает текст релевантнее, чем если бы ее не было.

  10. Далек я от полной оптимизации картинок. Раньше еще что то делал а теперь вот времени нет кидаю в посты все как попало. Поэтому работы с изображениями предстоит мне очень много

  11. Андрей, у меня конкретный вопрос, чисто практически, ка себя верно вести. Например, я пишу статью о прогулке в лесу и выставляю фото дуба, березы, гриба. Мне что, в названии, title и alt изображений писать , что это «дуб, гриб» и так далее, причем на русском языке, а не ключевое слово "прогулка в лесу.

    И спасибо за подсказку о проверке уникальности в гугле. буду пользоваться.

    • Здравствуйте, Зоя.

      Фото дуба, березы имеет ведь отношение к прогулке в лесу, значит есть логическая связь, это главное. В Title, alt нужно прописывать ключевые слова. Но избегайте точного вхождения ключевиков, избыточное их количество ПС не любят. Пишите их разные вариации — прогулка в лесу, грибы в лесу, прогулка возле дуба и т. д.

      Title и alt пишутся на русском за исключением иностранных слов. То есть нужно писать так, как эти слова будут искать в поисковых системах. Например, искать точно будут такие варианты: прогулка в лесу, форд мустанг, ford mustang. Но точно никто не будет искать такой вариант — progulka v lesu.

  12. Я бы водяные знаки на скриншоты как-раз ставил. Это уникальная картинка, а при воровстве статей их тащат вместе с картинками, часто вырезая все внутренние ссылки. А вот по картинке как раз и видно источник.

  13. Кстати, Андрей, у Вас есть уязвимость в блоге в плане СЕО, конкуренты могут этим воспользоваться.

    Могу указать на неё и сказать как убрать. Только пишите мне на мыло: adobe-master[гав-гав]ukr.net

  14. Прочитала статью, поставила себе новую конкретную цель — привести в порядок картинки на сайте. Частая ошибка, которую я допускаю: загружаю в большем размере, чем необходимо. а потом в админке выставляю размеры для публикации. Вот здесь и нужно навести порядок. С оптимизацией дела более-менее, но тоже нужно пересмотреть, особенно старые картинки. Спасибо, Андрей, за эти советы.

  15. Спасибо что посоветовали еще один способ проверки уникальности картинок, я до этого пользовалась другим, теперь попробую с этим поработать.

Добавить комментарий для Александр Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Александр