Свой сайт на WordPress — от А до Я. SEO блог Романа В

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

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

Прежде всего, стоит отметить, что для некоторых типов ресурсов изображения могут быть неплохим инструментом привлечения дополнительного трафика. Безусловно, далеко не каждый web-сайт может иметь возможность привлекать большое количество целевого трафика с сервисов поиска по изображениям, однако в некоторых случаях, например, когда речь идет о тех проектах, страницы которых содержат не 2-3 картинки, а достаточное количество графики, фотографий и т.п., они имеют возможность привлечь на свои страницы достаточно неплохой дополнительный поисковый трафик.

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

Оптимизация изображений через их уникализацию

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

Безусловно, далеко не всегда у web-мастера может быть возможность опубликовать 100% уникальное изображение, сделанное им самостоятельно, ведь для этого необходимо обладать определенными навыками, а также большим количеством свободного времени. Гораздо проще и быстрее скопировать нужную картинку из интернета и уникализировать ее.

Чтобы сделать картинку уникальной, нет необходимости тратить много времени. Вполне достаточно просто создать комбинацию из нескольких изображений. Результат будет оригинальным и уникальным. Для этого можно использовать даже самый простой графический редактор, например, программу Paint, которая входит в состав ОС Windows 7. При этом вся работа займет всего несколько минут.

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

Чтобы «стыренную» картинку сделать уникальной, достаточно придерживаться следующих несложных правил:

  1. Копируйте картинки только с буржуйских проектов (в рунете они меньше намозолили глаза и вероятность того, что их узнают, будет меньше);
  2. В графическом редакторе изменяйте размер изображений не соблюдая пропорций, а также яркость, контраст, цвет и т.д.;
  3. Обязательно проверяйте готовые изображения на уникальность. Для этого могу порекомендовать замечательный плагин TinEye Reverse Image Search для браузера Google Chrome. Подробнее о расширении я написал в этой статье;
  4. Почистите картинку от метатегов. Это очень хорошо умеет программа XnView.

Удалить метаданные с изображения

Для этого выберите изображение в программе и далее перейдите «Инструменты» → «Пакетная обработка«. В открывшемся окне перейдите на вкладку «Пакетная обработка» и добавьте к выполнению команду «Удалить метаданные«. Кстати, XnView заодно и оптимизирует ваше изображение без потери качества.

5. Не помешает в свойствах картинки заполнять ее описание и источник на вкладке «Подробно». Этим можно подтвердить авторские права на картинку.

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

Оптимизация изображений путем уменьшения их веса

Очень важно оптимизировать «вес изображения», поскольку, как было отмечено выше, данный фактор оказывает влияние на скорость работы ресурса. Оптимизировать изображение с этой точки зрения также можно при помощи графических программ. Например, в Adobe Photoshop перейдите «Файл» →»Сохранить для Web…» и в открывшемся окне, на вкладке «Optimized«, сохраните оптимизированное изображение  в формате jpeg с качеством процентов 60-85 от начального.

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

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

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

Скачать оптимизированные изображения, Java Script и CSS

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

Оптимизация изображений правильно прописанными атрибутами

Любое изображение, которое будет опубликовано в структуре web-документа, также нуждается в оптимизации его атрибутов, которые являются основным инструментом продвижения интернет-проекта в сервисах поиска по картинкам. Таким образом, любое изображение должно содержать такие хорошо оптимизированные атрибуты, как alt и title.

Атрибут title для картинки – это название изображения, которое должно соответствовать тематике web-документа, а также содержать его основные ключевые слова. Текст, заключенный в эти атрибуты, будет высвечиваться, если навести курсор на изображение.

Атрибут alt также является обязательным атрибутом картинки и несет в себе так называемый альтернативный источник информации о картинке для поисковиков. Он должен содержать ее описание, то есть раскрывать ее суть, а также суть информации, изложенной в основном контенте web-документа. Текст, заключенный в атрибут alt, будет выводится на месте картинки, если она была удалена или недоступна по другим причинам.

Текст атрибута alt

В WordPress, при вставке картинки на страницу, title прописывается в строке «Заголовок» а alt в строке «Текст«.

Как вставить title и alt для картинки

Вот как прописываются эти атрибуты в HTML:

Как вставить title и alt картинки в HTML

Осталось только чтобы поисковые системы без задержки проиндексировали наши изображения. Об этом прочтите в моей статье «Индексация картинок«.

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

P.S. Повышая свой профессиональный уровень, в книге «3 шага в топ: оптимизация без ошибок» одного уважаемого портала, обнаружил картинки и выдержки слегка видоизмененного текста с этой моей статьи.

Изображения и выдержки текста с моей статьи в книге "3 шага в топ: оптимизация без ошибок".

Мелочь, а приятно. Можно было бы еще ссылочку на статью вставить, ну да ладно. Книгу могу выслать на почту, кому интересно, обращайтесь.

Оптимизация изображений для сайта — необходимость и правила осуществления обновлено: 13 февраля, 2018 автором: Роман Ваховский
Хороший человек всегда нажмет на кнопку!
Комментарий > Моя благодарность > Ссылка на секретную страницу блога

33 комментария: Оптимизация изображений для сайта — необходимость и правила осуществления

  • Ольга Черныш:

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

  • Ольга Черныш:

    )))))))))) Прикольно. А у меня только склероз. Не, я не помню, пьяная я была или трезвая. Я вообще почти ничего не помню.)))))
    Короче, я узнала. Так и есть. И узнала, как избавиться. Там где-то надо галочку снять. Правда, не помню, где, потому что не помню, как я это все устанавливала. И тем более удивительно, что оно работает.)

    • Роман Ваховский:

      «Что-то с памятью моей стало, все что было не со мной помню …» — бывало напевал эту песенку по утрам :-).
      Если работает, значит под шафэ ставила ))). А то бы не работало ).

  • Павел:

    Ольга, как раз на эту тему недавно статью написал. А вообще, ставьте плагин Cyr-To-Lat и не заморачивайтесь. Он сам все URL переведет в латиницу.

    • Ольга Черныш:

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

  • Ольга Черныш:

    Ага. Я заметила, что название само проставляется по названию файла. Я только вчера впервые прочитала у кого-то, что писать на русском. И стала писать на русском. Но названия я не меняю. Только ALT. Меня теперь волнует, не вредно ли то, что в предыдущих статьях не на русском?
    И еще в какой программе создается транслитерация названий картинок, а то заколебло вручную писать?

    • Ваховский Роман:

      В предыдущих статьях лучше переписать alt на русском. Будет дополнительный трафик по картинкам с поисковиков. Title переписать желательно, но не критично.
      Транслитерация я делаю в RusTranslit. Очень удобно.

      • Ольга Черныш:

        Эта программа на комп ставится?
        Тайтлы писать точно те же, что и альт? Или можно разные чтоб были фразы в пределах одной картинки?

        • Ваховский Роман:

          RusTranslit на комп ставится. Чтобы вы ее не скали, скачайте RusTranslit здесь.
          Альты и тайтлы лучше писать разные. Главное чтобы они точно соответствовали картинке. Еще очень желательно чтобы они были в окружающем картинку тексте. Иначе поисковик по может посчитать картинку не релевантной поисковосу запросу. Не всегда удается соблюдать эти правила, но надо стараться :-).

          • Ольга Черныш:

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

            • Роман Ваховский:

              Есть один хороший способ привести в соответствие тему картинки с окружным текстом. В фотошопе на фото учеников за партой большими буквами напишите «способы эстетического воспитания» и дело в шляпе :-). Я заметил этот метод совсем недавно и начал внедрять и у себя. Вот например посмотрите первую картинку статьи «Хочу стать копирайтером«.

              • Ольга Черныш:

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

                • Роман Ваховский:

                  Очень на вирус похоже.
                  1. Просканируйте тему плагином AntiVirus.
                  2. Для постоянного мониторинга изменений файлов сайта я использую плагин WordPress File Monitor. При добавлении файлов или их изменении вы будете об этом уведомлены по почте или в панели администратора. Одним словом, вы будете предупреждены о постороннем вмешательстве в файлы сайта. Сразу менять пароли если такое произойдет.
                  3. Мне когда-то понравился сервис siteguard.ru. Он ищет подозрительные коды на сайте и выводит их в табличной форме. Плохо только то, что и часть нормальных кодов сервис относит к подозрительным. Тут уж приходится ломать голову, может это быть вирусом или нет.
                  4. Еще один действенный совет. По логам можно определить, от куда приходят дивы (это может быть вредоносный код, например в fanction.php). Включите на хостинге запись логов предварительно.
                  5. Самая крайняя мера — переустановка WordPress (не путать с обновлением wordpress в админке). Это как с переустановкой Windows на жестком диске. Но отнимает много времени и хлопотно очень. Можно накосячить.
                  ВНИМАНИЕ! Перед каждой правкой кода файлов обязательно делайте их резервную копию.
                  P.S. Надеюсь не слишком голову заморочил :-). Не бойтесь, не так страшен черт, как его малюют и у страха глаза велики :-). Буду периодически заглядывать к вам на сайт с ревизией :-).

                  • Ольга Черныш:

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

                    • Роман Ваховский:

                      Инфу о ключевиках и о посетителях можно посмотреть на сервисах, на этом специализирующихся и для этого предназначенных.
                      Я уже давно зарекся пьяным подходить к компьютеру :-). После этого какие-то плагины ненужные появляются , комментарии от моего имени и т.п. :-).

  • Ольга Черныш:

    Мне все по-разному говорят насчет языка. кто-то на русском пишет, кто-то нет. Я так и не поняла, как писать именно тайтл и альт?

    • Ваховский Роман:

      Если для русскоязычной аудитории то однозначно на Русском языке. Для поисковиков главный тег картинок — «ALT». ALT я всегда заполняю на русском. Title по умолчанию прописываются по имени файла (на латинице), иногда так и оставляю, но лучше его переписывать. Согласитесь, будет правильней когда при наведении курсора на картинку будет всплывать надпись вроде «Оптимизация изображений» а не «Optimizaciya_izobrazheniyj».

  • Александр:

    Здравствуйте, Роман! Никогда не думал, что за неуникальность изображения могут быть санкции со стороны поисковиков. У меня уже под 40 статей и в каждой до 7-8 картинок. Похоже, надо каждую переделывать?

    • Ваховский Роман:

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

    • Александр:

      Все понял, спасибо. Приступаю к долгой и кропотливой работе )) Если у кого аналогичная проблема, то порекомендовал бы онлайн фоторедактор Avatan. Очень быстрое и удобное меню (Главная-Открыть фото-Редактировать-Повернуть-вторая кнопка справа), зеркально поворачивает изображение. Занимает всего 5 секунд. Проверил получившееся фото на TinEye, все в порядке, совпадений не найдено, значит, уникальное.

  • Павел:

    Здравствуйте. Вопрос такого плана. Сам URL — изображения, при загрузке должен быть на каком языке? Вот я по незнанию сделал все URL на русском языке и картинки не индексируются и по моему из-за этого.

    • Роман Ваховский:

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

  • Urmat:

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

    • Роман Ваховский:

      По моему скромному мнению вы потеряете трафик с картинок особенно если их будет много.
      Вы же заполняете тэги alt и title при загрузке картинок на хост? По этой информации вы будете получать посетителей с поиска картинок. Даже если человек открыл картинку в поисковике но на сайт не перешел, переход все равно зачитывается.
      Поэтому советую на тарифе не экономить и размещать картинки на своем сайте.
      P.S. Чуть позже я планирую разместить пост о том, как сделать карту сайта для изображений. Эта информация для вас будет актуальной. Не пропустите.

    • Ольга:

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

  • Андрей:

    Короче я так понял, лучше картинки ссылками на саму себя лучше не делать. Да и вес со страницы не будет утекать в никуда (а то если 10 картинок-ссылок на странице, то по идее вес теряется)

    • Роман Ваховский:

      Нет, вес не теряется. Только если ссылка с картинки на другой проект.

  • Андрей:

    Здравствуйте.
    Интересует такой вопрос. Как вы считаете, стоит ли делать картинки ссылками на саму себя? Т.е. при нажатии на картинку переходим на адрес расположения самой картинки: Название сайта/wp-content/uploads/2013/01/картинка.jpg
    Я как-то раньше не задумывался вообще об этом, а сейчас стало очень интересно. Тем более что все картинки в натуральную величину, не миниатюры. Буду рад услышать ваше мнение. Спасибо.

    • Роман Ваховский:

      На многих сайтах так и есть. При встраивании картинки в запись ссылка на нее и так уже прописывается автоматом.
      Мне, например, не нравится такой вариант. Щелкаешь по картинке (инстинкт срабатывает — если есть ссылка, надо щелкнуть) и она открывается в полный размер на той же, но уже пустой странице. Приходится возвращаться обратно, ждать пока страница загрузиться.

  • Kiddy:

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

    • Роман Ваховский:

      Если вы про картинку «Оптимизация изображения», то там как раз заголовок и описание категорически соответствуют. Картинка несет наглядную информацию о том как уменьшить вес изображения в фотошоп для оптимизации. А не просто абстракция.
      P.S. На том скриншоте я оптимизировал стереограмму. Если сделаете глаза в кучу, увидите там скрытое объемное изображение :-).

  • Павел:

    А еще в дополнению и изменению размера, яркости,… можно делать зеркальное отображение картинки.

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

Все права защищены © 2011-2024 WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.