Как оптимизировать картинки и изображения на блоге?

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

как оптимизировать изображения

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

Зачем мне знать, как оптимизировать картинки, я только голову себе этой чепухой забью!? Если вы так думаете, то давайте, передумывайте, потому что это совсем не так. Не буду от вас скрывать, это бесполезно, что поиском по картинкам пользуются меньше чем обычным, но к счастью пользуются! В общем если хорошо оптимизировать какую-то картинку, как технически, так и поисково, можно получать на свой блог приличную долю трафика. А если каждую удачно оптимизировать… эх, заживем…

Техническая оптимизация изображений.

Чтобы сделать техническую оптимизацию картинки, нужна сама картинка. Я сам не художник, и вы, думаю, тоже, поэтому с нуля мы картинки рисовать не будим, а воспользуемся старым-добрым методом: найдем картинку в интернете. Для поиска картинок я использую сервисом «Яндекс картинки». В крайнем случае, можно сделать скриншот экрана, потому что это довольно распространенное явление среди блоггером, так как они использую скриншоты для более наглядного объяснения. При оптимизации изображений нужно учитывать несколько критериев: во-первых, ваша картинка должна быть как можно более уникальной, во-вторых, качество вашей картинки должно быть высоким, и, в-третьих, картинка должна занимать минимальное количество места. Вод под эти 3 критерия вы сейчас и подгоним картинку, которую найдем в поиске.

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

В этой статье я не буду рассказывать о том, как делать рамку, думаю, вы и без меня с этим справитесь. Если что, примером может послужить самая первая картинка на этой страничке. Предлагаю повернуть картинку на 10-15 градусов, а затем немного поменять контрастность. После этого картинка станет отличаться от многих. Чтобы повернуть картинку в программе photoshop, используйте комбинацию клавиш CTRL+ENTER. После использования комбинации, вокруг картинки появится рамка, дергая которую можно повернуть саму картинку.

как оптимизировать изображения, оптимизация картинок, цели, стрела в цель, попадание

А чтобы поменять контрастность картинки нужно пройти в верхнем меню по вкладку «Layer» — «New Adjusment layes» — «Color Balanse…». В открывшемся меню двигайте все три указателя, и сделайте картинку привлекательной, и одновременно, измените её.

как оптимизировать изображения, оптимизация картинок, цели, стрела в цель, попадание

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

Но, как же, эти два критерия сочетать одновременно? Все очень просто. Главное в этом деле правильно сохранить картинку и выбрать оптимальный формат её хранения. И так, открываем вкладку «Fail» — «Save of web…». А в открывшемся окошке нажимаем кнопку «Save», не меняя ни каких настроек.

как оптимизировать изображения, оптимизация картинок, цели, стрела в цель, попадание

В итоге, у нас есть УНИКАЛЬНАЯ картинка, размер которое составляет всего 37кгб (средний размер картинок в Яндекс Поиске 70-120кгб) и к тому же с хорошим качеством. По мне это очень хорошая оптимизация картинки. Если же вас все-таки не устроит качество самой картинки, то можете просто сохранить её в формате GIF, но тогда пострадает размер картинки. Я, например, всегда просто сохраняю в формате GIF, потому, что мне лень каждый раз так «париться» над этим. У меня просто не хватит времени. В общем, каждому свое. Теперь вы знаете, как технические оптимизировать картинку, а вот применять эти знания или нет, дело лично каждого, и я вас заставлять не буду.

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

Поисковая оптимизация изображений направлена на то, чтобы вашу уже технически оптимизированную картинку нашли в Поиске по картинкам. Здесь нам нужно просто указать фразу по которой эту картинку должны находить, а все остальное вы уже сделали технически. Сейчас все действия я буду показывать на примере загрузки изображения на свой блог WordPress, также для тех, кто не пользуется таким движком, я покажу код картинки, который получиться в итоге. И так, картинка у нас уже готова, теперь её нужно загрузить на блог. Для этого я использую кнопку «Добавить медиофайл», расположенную перед печатным полем.

как оптимизировать изображения, оптимизация картинок, цели, стрела в цель, попадание

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

как оптимизировать изображения, оптимизация картинок, цели, стрела в цель, попадание

В поле «Alt» (альтернативный текст) нужно прописывать ключевые слова по которым вашу картинку будут находить + одно ключевое слова по которому вы продвигаете стать, в которой эта картинка вставлена. Как вы видите, для оптимизации своей картинки я использовал одно ключевое слово в заголовке (появится при наведении на картинку) и несколько ключевых фраз, по которым эта картинка могла бы выйти в ТОП. После того, как все это сделано, картинку можно выставлять на блог, и теперь, при индексации вашей статьи, картинка попадет в индекс, тоже.

Если же вы не пользуетесь какими-либо движками  и хотели посмотреть по получившийся html код, чтобы использовать оптимизацию на своем блоге или сайте,  ну, или вам просто нужен код, то вот он:

как оптимизировать изображения, оптимизация картинок, цели, стрела в цель, попадание

Как видите, в коде тоже присутствует атрибут «Alt», а ключевые слова прописывают после него, через запятую  Для боле подробного изучения, вы можете Скачать код.

Чтобы посмотреть какие ваши картинки уже есть в индексе поисковых систем, вбейте в адресную строку вашего браузера, следующий адрес: «http://images.yandex.ru/yandsearch?serverurl=raskrutkabloga.ru&stype=image«. Только, вместо выделенного куска (моего домена) вбейте адрес своего блога. На данный момент у меня в индексе картинок находиться 51 картинка в Яндекса и 526 в google.

На этом я заканчиваю статьи про, так как теперь, вы знаете как оптимизировать картинки. Надеюсь, она была вам полезна и полученные знания вам пригодятся. Следующая статье будет написана не скоро. Дело в том, что у меня начинаются экзамены. Вот 20.05 уже первый, затем 22, 28 и 04.06 Так что расслабляться не приходиться. Пока.

С уважением, Степан!
Все статьи

Добавить в закладки

42 комментариев к записи “Как оптимизировать картинки и изображения на блоге?”

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

  2. Оптимизировать обязательно нужно, причем и уникализировать, и прописывать атрибуты. А еще неплохо добавлять водяной знак или логотип блога, чтобы меньше воровали.

  3. Вадим:

    Люблю использовать фотошоп и FsCapture

  4. Руслан:

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

    • Ой, спасибо тебе. Просто я сегодня поменял форму подписки и там немного накосячил, а сам не заметил. Спасибо!

      • Руслан:

        Да незашто. А что это за самолетик появился слева, я сначала подумал стрелка вверх, но потом поч акал а она не работает, или это просто для красоты?

  5. А мне не очень понравилось качество картинок, сохраненных из фотошопа в формате для ВЭБ. Лучше получается это сделать при помощи оптимизатора изображений . А еще интереснее установка картинок при помощи кодов Picasa.

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

  7. Можно с помощью другой программы оптимизировать картинки?, а то фотошоп вроде платный после 30 дней пользоваться нельзя.

    • Фотошоп можно и бесплатный найти если постараться. И так-то можно практические при помощи любого графического редакторы справиться. Ну, конечно, нужно что бы он был более менее, префесиональный

      • Михаил:

        Я недавно искал сайт, на котором можно скачать бесплатно русскую версию и попал на сайт ех(точка)ua. Просто в поиске нужно вбить фотошоп и через пар секунд можно найти нужную версию и скачать.

  8. Увы, водяной знак далеко не панацея и картинку уникальной он точно не сделает.
    Я много работаю в Фотошопе, картинки беру из интернета и меняю до неузнаваемости. Но зачастую они все равно неуникальны) То есть поворота и смены цвета для этого мало.
    Важна также скорость индексации. Кто-то из Livejournal разместил мою уникальную картинку в своей статье (со ссылкой на мой сайт, вроде жаловаться не на что). Однако эта картинка проиндексировалась именно в Livejournal. А я, выходит, плагиатом занимаюсь)

  9. И да, Фотошоп найти бесплатный не так сложно). У меня на сайте есть ссылки)

  10. В формате «сохранить для web» есть движок настройки качества от 0 до 100 (если речь идет о формате jpeg). Вряд ли 100% так уж плохо выглядит). Важно найти баланс между физическими (линейными) размерами картинки и ее весом (качеством), иногда гораздо лучше выглядит картинка меньшего размера, но лучшего качества.

  11. Спасибо, что научил поворачивать картинки =)
    Как-то лень было информацию искать, а тут на твоём блоге увидел и с удовольствием прочитал.

  12. Как можно деваку не знать вы что, это же самый мощный дофоллов блог =)
    Ну а на самом деле это самый умный seo блоггер.

  13. Андрей:

    Очень хорошая статья…давно такую шукал, а то з єтим тегом alt не мог разобратся…теперь все понятно..буду делать также!! СПАСИБО!!

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

  15. Спасибо всем, про альт не знала и в комментариях много нового.
    Фотошоп пыталась найти, какие-то вирусы антивирусник находит, пойду к Эмили пробовать :)

  16. Андрей! Есть один неприятный момент. Когда в админке прописываю заголовок (title), он почему-то не вставляется в код изображения (у меня такая фигня).
    И еще вопрос: почему не у всех изображений на твоем блоге есть title?

    • Если при оптимизации картинки мы меняем title, то и код должен меняться. попробуйте сначала сохранить, а потом проверить. У меня не все картинки с заголовком, потому что я лентяй (невнимателен к этому).

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

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

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

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

  19. Картинка должна быть названа латиницей, а так же ты очень сильно спамишь ключевиками в теге alt. Чтобы писать такие статьи нужно иметь сайт с посещаемостью минимум 2000-3000 тыс. уников. так как для получения трафика с картинок нужно по экспериментировать с этим делом и получить хороший опыт. Трафик с изображений дело не дешевое. Кстати атрибуты изображения нужно тоже заполнять.

  20. Зашла я ,Андрей по Вашей ссылке посмотреть — сколько у меня картинок уже есть в индексе поисковых систем, но оказалось — совсем немного.
    Значит индексируются не все? А почему?

  21. Михаил:

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

  22. Ivanovskij:

    Надо было еще написать, что картинки сжимать нужно :)

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

Оставить комментарий

Комментаторы блога

Комментируй блог и получи 300 рублей! Подробности тут!

X

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