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

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

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

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

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

Оптимизация графики

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





Чтобы иметь дело с графической выдачей поисковой системы, необходимо, прежде всего, иметь на сайте картинки. Несмотря на стереотипы, использовать изображения можно на сайтах любых тематик. Они могут нести не только эстетическую, но и вполне практическую пользу, поэтому удобство и внешний вид только выиграют. Однако само по себе наличие изображений на сайте ещё ничего не гарантирует, их ещё нужно оптимизировать. Сделать это не так сложно, нужно лишь знать несколько обязательных правил.

1. Разрешение изображения.
Вы, наверное, замечали, что по высокочастотным запросам чаще всего выдаются изображения с довольно высоким разрешением. Это не случайность. С нынешними
скоростями интернета вопрос загрузки уже не стоит так остро, а вот вопрос качества стал более актуальным. Поисковые системы это учитывают. Чем выше (в разумных пределах) разрешение изображений на вашем сайте – тем лучше.

2. Уникальность графики.
Вопрос не менее важный. Плагиата среди изображений в интернете ещё больше, чем среди текста, поэтому использование уникальных изображений позволит вам обойти конкурентов очень быстро. Стоит ли оно того? Безусловно. К тому же, если дело поставлено на поток, то создание уникальных фотографий и картинок не такое уж и сложное занятие. К слову, увеличить уникальность можно с помощью простых действий в любом графическом редакторе. Если Вы заметили, то на своем блоге я нашел такую фишку — многие смысловые картинки я оформляю в виде паззлов, которые неплохо, на мой взгляд, перекликаются с логотипом сайта и решают 2 задачи — стилистическое единство изображений на блоге + уникализация.

3. Вес изображения.
Ему поисковые системы уделяют не меньшее внимание. Это касается, в основном, фотографий. Выше я сказал о том, что вопрос скорости загрузки не стоит так остро, однако дело в том, что многие современные фотоаппараты выдают изображения весом по несколько мегабайт, но которые можно сжать без ущерба для качества в несколько раз. Сделать это необходимо, так как плохая оптимизация графики приведет не только к занижению в выдаче, но и будет тормозить загрузку страниц сайта, что повлечёт за собой определённые негативные последствия. Для того, чтобы упростить процесс сжатия картинок в WordPress есть один интересный плагин для работы с сервисом SmushIt WP SmushIt, который автоматически отправит в сервис все файлы из библиотеки и заменит их оптимизированными графическими аналогами.

4. Формат изображения.
В соответствии с тематикой сайта, на нём чаще используются либо картинки, либо фотографии. Поисковая система не человек, она не видит изображения, поэтому для её удобства необходимо использовать специальные форматы. Например, фотографии чаще всего бывают в формате .jpg, а картинке и схемы в формате .gif.

5. Имя файла.
Чаще всего мы даём изображениям ничего не значащие имена вроде 12345.gif и т.п. С точки зрения оптимизации графики это неправильно. В названии файла лучше указать, если это возможно, что непосредственно находится на картинке или фотографии. Лучше, если в названии будет одно или два слова, не больше. Что же касается написания, то лучше использовать слова, написанные латинскими символами, писать можно как на русском (в латинской транскрипции), так и на английском.

6. Мета теги alt и title.
Один из самых значимых этапов оптимизации любого изображения. Теги alt и title, ключевые слова и заголовок соответственно, наиболее важные для поисковой системы атрибуты кода изображения, говорящие ей о том, что на нём изображено. Их содержимое может быть одинаковым, это не повредит. Каждая картинка или фотография на сайте должна иметь эти атрибуты.

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

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

Открою еще один маленький секрет — при загрузки картинки на блог, WordPress автоматические еще немного сжимает файл. Из-за этого он, разумеется, немного теряет в качестве. Однако бывают такие ситуации, когда важно разместить именно высококачественное изображение без оптимизации. В этом случае, чтобы отключить автосжатие в системе, в файл functions.php пропишите строку

add_filter('jpeg_quality', function($arg){return 100;});

Теперь выясним, где именно взять картинки для сайта? Прежде всего можно просто сохранить из интернета, воспользовавшись поиском по картинкам от Яндекса или Google. Другой вариант — скачать один из множества сборников с клипартом со специальных каталогов графики для сайта, например здесь, или вот здесь: http://www.kartinki.me/page/6/. Чтобы не загружать большие архивы для новостной картинки достаточно также будет сделать скриншот страницы, который потом обработать в простом графическом редакторе и выложить на сайт. И наконец, если Вы владеете профессиональными инструментами, типа Фотошопа, то можно нарисовать картинки самостоятельно.

Курсы по оптимизации графики

оптимизация графики в photoshopЕсли же вы не владеете Фотошопом, но не хотите скачивать готовые картинки, то рекомендую все-таки освоить азы по работе с данной программой. Если хотите сделать качественный проект и не платить деньги дизайнерам, то все равно рано или поздно придется ее изучить. А для это я рекомендую воспользоваться прекрасным видеокурсом Попова PhotoShop для онлайн-бизнесмена. Особенность его именно в том, что программа подробно рассматривается в узко-специальном ракурсе — с позиции веб-мастера, который создает и оптимизирует графику для своего сайта. То есть именно то, что нам нужно — ничего лишнего.




Если же этого мало и хочется узнать все тонкости Photoshop, то ознакомьтесь с полным курсом на 2х DVD очаровательной Зинаиды Лукьяновой Фотошоп с нуля в видеоформате. Кроме огромного объема полезного видео-материала, я б купил этот курс только для того, чтобы послушать ее приятный голос и обаятельную манеру ведения урока 😉

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

Влияние изображений на сайте на ранжирование

Ключевые слова в ALT +100%
Ключевые слова в имени файла +96%
Ключевые слова в H1 +79%
Ключевые слова в TITLE +77%
Ключевые слова в тексте страницы +77%
Наличие текста-описания на странице +72%
Уникальность картинок +65%
Оптимальный размер картинок +61%
Ключевое слово в URL страницы с картинками +60%
Тематическая направленность сайта (фотобанк и т.п.) +58%
Ключевые слова в тексте внутренних входящих ссылок +54%
Количество картинок на странице +49%
Ключевые слова в STRONG +42%
Ключевые слова в Keywords +35%
Ключевые слова в Description +35%
Наличие на странице картинок в разном размере +33%

Данные от ТопЭксперт.Рф

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

  • А я в основном пользуюсь советами Тохи. Всем картинкам задаю точный размер (чтоб потом не уменьшать в самом вордпресе) перевожу в jpeg и сохраняю с качеством 50 или 60, все таки 44 маловато по мне так. Затем на сервис Smush.it загружаю картинку и там она тоже уменьшает свой вес, ну как правило я сразу все изображения туда загружаю, а не по одному.

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

    • Лучше все-таки хоть минимально их изменять — сделать коллаж, добавить рамки, тени и т.д. Для фотошопа много фильтроа и экшенов есть

  • Александр, спасибо за совет по поводу наименования картинки. У меня на сайте практически только свои собственные фото, а вот имя я не правильно им прописывала, просто писала циферки, как у Вас в примере было представлено, что делать не следует. Что Вы мне можете посоветовать в данном случае: стоит ли сейчас изменить им названия или оставить на данный момент как есть и только последующие уже правильно прописывать? Спасибо.

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

      • У меня яндекс еще не проиндексировал картинки, а вот Гугл прошелся по ним хорошо и 116 уже в поисковой системе находятся. Надо ли в таком случае менять у них название или все же оставить с теми, что есть?

        • можно поменять, ничего страшного не будет, это не текст. Тем более в Яндексе их нет, а Гугл еще раз переиндексирует

  • Несколько лет использую программу Image Resizer очень достойная бесплатная, проста в использовании, перепробовал онлайн сервис сжатия, долго, не всегда можно настроить параметры, ограниченное количество фото (если говорить о бесплатных сервисах, пользуюсь SEO Friendly автоматически добавляет ALT и TITLE для всех фотографий во всех ваших сообщениях с указанием параметров, автоматически. Отдельное спасибо Александру К. за видеокурс Веб-сайт своими руками, одним словом «Бомба» для мозга.

  • Раз уж поисковик картинки не видит, то, можно наверное, поменять название и вставить в свою статью? Или нет? А то по нужной теме не всегда найдёшь картинки в своём загашнике.

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

  • Курсы у Евгения Попова очень качественные, вот и хочу себе его курс по фотошопу приобрести, сейчас накоплю маленько денег и куплю буду смотреть.

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