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

Оптимизация изображений для сайта
5 (100%) 2 votes

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

В идеале картинки должны быть мало того, что оптимизированными, но и уникальными.

Сегодня поговорим о такой фишке, как оптимизация изображений.

На что следует обратить внимание:

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

–        Минимальный размер по одной стороне – 250-350 px

–        Максимальный по ширине (для блога) – в зависимости от ширины текстового поля. Обычно 600-640 px

–        Сохранять в Photoshop, как для Web (Save As Web)

–        Прогнать через Smush.it и PunyPNG.com для максимальной компрессии последовательно, сначала в одном, затем во втором. Картинки показывать не буду, потому что там есть БОЛЬШИЕ кнопки Upload (Загрузка).

Имя файла изображения

–        Должно соответствовать тегу ALT (н-р: не 1234.jpg, а triton-na-progulke.jpg)

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

Атрибуты ALT и TITLE

–        Ключевые слова ВЧ и СЧ тут обязательны

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

А Заголовок изображения это title – показывает посетителю дополнительную информацию: она должна относиться к теме, должна быть краткой. В браузерах, title название всплывает, когда мы наводим мышку на изображение.

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

Но есть информация, что поисковики уже давно при поиске картинок не только анализируют alt, но и частично title, и текст вокруг изображения. Без этой информации оптимизация изображений будет неполной и для поиска непригодной, т.ч. если хотите трафик - alt и title заполняйте обязательно.

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

Атрибуты Height и Width

–        Высота и ширина в пикселах – обязательны.

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

Контент вокруг изображения

–        Содержание текста вокруг картинки должно быть релевантно ее имени и атрибутам ALT и TITLE

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

Лола Пирхал

Сертифицированный коуч, бизнес-тренер, интернет-предприниматель, веб-разработчик

+38 067 7923605 KartaUspeha.ru

QR:  '.get_the_title().'

Что Вы об этом думаете?

Подарок

Оставьте Ваш первый комментарий и получите замечательный подарок!


40 комментариев

  • Добрый день, Лола!
    Очень своевременная информация. Я поначалу пользовалась для иллюстрации постов Яндекс- картинками, интуитивно их переименовывая под текст статьи. Потом узнала, что у всех картинок есть автор и копировать их незаконно. Стала рисовать свои, но я не художник и не всегда могу отразить смысл поста в своем рисунке.
    Спасибо за очень нужные знания.

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

  • Лола, большое спасибо за новые знания! Это дополнение к школьным урокам - просто уникум! С нетерпением буду ждать следующей статьи!

  • Да, действительно Лола, очень важная и ценная информация. Все изложено четко и ясно. Осталось только применить на практике.

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

    Всегда с интересом читаю ваши статьи. *THUMBS UP*

  • Валентина

    Лола спасибо за дельные рекомендации. *ROSE*

  • В блогистике как в любви - получаешь удовольствие от того, что делаешь, ну, а с таким инструктором - это вдвойне приятно! Спасибо, Лола за статью!

  • Лола, спасибо! Очень полезно для фотографов. Так как я веду занятия в фотошколе онлайн "Фотоледи", то мне это вдвойне полезно :) С благодарностью.. И ждем новую статью!

  • Статья прозвучала для меня как открытие, Лола =) Изображение оптимизировала примитивным способом, отражая их по горизонтали. А тут, оказывается, столько тонкостей %) Следующим курсом на очереди будет Фотошоп =)

  • Лола,спасибо за Вашу статью!Очень полезная информация.Открыл для себя много нового.Теперь остается только применить новые знания при ведении своего блога.

  • Очнь хороший урок.. для меня это новое..буду разбираться. =)
    огромное спасибо

  • Действительно, информация очень полезная.
    Спасибо, Лола!
    Отправила предыдущий насыщенный отзыв- он нигде не отразился. :(

  • Очень нужная и полезная информация. Как раз стал актуальным этот вопрос и в поиске нашла сразу толковое объяснение своих ошибок. Спасибо, Лола.

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

  • Лола, благодарю за всегда полезную информацию! Попытаюсь применить в своем блоге...

  • Лола спасибо большое за информацию *THUMBS UP*

    ВЧ в Title и СЧ в Alt? Или можно наоборот?

    • Не думаю, что это принципиально пока, Саша. Но в первую очередь поиск смотрит на ALT, поскольку это альтернативный текст, который виден при отсутствии картинки, т.е. передает ее смысловое содержание

  • Валентина

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

  • Лола, замечательная информация.

    Я применяла Ваши рекомендации, еще прослушав из в "МЛМ на автопилоте" и постоянно получаю трафик на свой блог, благодаря Вам. *OK*

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

    Я бы хотела у Вас спросить, а скажите, пожалуйста, в описании картинки нельзя просто использовать ключевые слова и все?

    Если да, то в каком количестве их нужно там использовать и писать кириллицей или латиницей?

  • Еще один вопрос, Лола, скажите, пожалуйста, по какому принципу отбирать ключевые слова для названия картинки, какие лучше брать высоко или низко частотные? Или это зависит от рейтинга, то есть посещаемости ресурса, где они будут использоваться?

  • Лола, огромная благодарность за эти секретные фишки! У меня совсем молодой блог и эта информация мне нужна как глоток воздуха! Завтра начну писать третий пост на блоге и обязательно использую Ваши рекомендации! Успехов Вам и здоровья! =)

  • Ну ладно, title я хоть писала иногда, но вот alt....И столько тонкостей в оформлении картинки. Спасибо, Лола, за статью, буду исправлять свои недочёты =)

  • Здравствуйте, Лола!
    Поделитесь, пожалуйста, примерами составления альтернативного текста.
    Он пишется на русском языке?
    Хочу понять тонкости создания релевантности текста вокруг имени картинки.
    Заранее благодарен.
    Владимир Шувалов.

    • Владимир, ALT - это альтернативный текст. Дело в том, что поиск не может "прочитать" графический или видеофайл, он может прочитать только имя файла и атрибуты alt и title. Это первое. Второе - содержимое alt показывается в том случае, если картинка отсутствует (или удалена, или графика отключена в браузере у того, кто просматривает Вашу страницу).
      Следовательно:
      1. текст на русском
      2. описывающий суть картинки в контексте Вашего текста

  • Лола!
    Спасибо. Полезная информация. Как говорится: Век живи, век учись...

  • Здравствуйте Лола. Скажите мне пожалуйста, почему в админке появляется уведомление, что у меня есть неправильные ссылки и обязательно, это картинки? Более знающие мастера сказали, что надо разрывать ссылку на картинку. Когда её вставляешь, надо выделить и нажать на значок "Разорвать ссылку". Надо ли её действительно разрывать, и что это дает? Будет положительный результат или отрицательный? Кстати, если ссылку разорву, уведомление, что у меня неправильная ссылка исчезает. Помогите разобраться, наконец с этими картинками. Часть вставляю свои фото, картинки ещё не научилась сама делать, но научусь обязательно. А часть беру в Гугле. В поле "Описание" вставляю тот же текст, что и Дескрипшион под статьей. Правильно ли это? =)

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

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

  • Спасибо большое. Вроде, уже не новичок, но картинкам не уделяла должное внимание. Учту все ваши замечания. Все картинки уже не переделаешь, но в дальнейшем буду делать все правильно. А ссылки придется поразрывать по всему сайту, они регулярно мне выдают "неправильные ссылки".

  • Лола, БРАВО!!!

    Опять в точку,каждая статья - большой шаг вперед!
    ВАЖНО, НУЖНО И ПОЛЕЗНО! Как видно из комментариев, не только я так считаю!

    Спасибо огромное!

  • Лола, подскажите, пожалуйста обязательно ли, чтобы картинка в статье открывалась в отдельном окне? И если не вставлять ссылку на картинку она не появиться в Гугле и Яндексе?(картинки)

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

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

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