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

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

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

Именно поэтому данную статью я хочу посветить вопросу оптимизации изображений.

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

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

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

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

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

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

Первый вопрос обычно звучит следующим образом: «А откуда вообще брать изображения для своего интернет-ресурса?».

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

  • использование фотографий, сделанных собственноручно.
  • скриншоты экрана монитора с последующим добавлением вспомогательных элементов и поясняющего текста:
    Создание карты сайта WordPress
  • создание уникальных изображений в графическом редакторе (я использую Photoshop):
    Бесплатная раскрутка сайта
  • редактирование (изменение либо добавление определенных деталей) с помощью графического редактора (опять же Photoshop) скаченных из интернета картинок:
    Как мой сайт оказался под АГС-1, а потом из-под него вышел

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

То есть полученные данными способами изображения нужно правильно оптимизировать.

Созданное изображение должно представлять из себя компромисс между качеством и размером (объемом занимаемой памяти).

Наиболее востребованными форматами изображений, используемых в WEB, являются следующие:

  • JPG — целесообразно применять для фотографий и картинок с плавными переходами яркости и цвета. Сжатие изображения осуществляется с потерей качества;
  • GIF — часто применяется для анимированных изображений, но может использоваться и для статичных. Поддерживает прозрачность. В формате не более 256 цветов сжатие осуществляется без потери качества;
  • PNG — более совершенный формат, чем GIF, но без поддержки анимации. Также поддерживает прозрачность. Используется для изображений без оттенков и тонов. Сжатие осуществляется без потери качества.

Какой формат в каком случае использовать решать вам. Главное чтобы изображение получилось четким и занимало максимально малый объем памяти.

Для уменьшения размера файла изображения я использую графический редактор Photoshop, с помощью которого открываю созданное одним из перечисленных выше методов изображение, иду в меню ФайлСохранить для Web:

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

И в появившемся окне определяю нужные параметры (можно изменить формат, качество, размер изображения):

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

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

Также одним из способов уменьшения размера файла изображения является использование online сервиса под названием PunyPNG:

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

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

Далее необходимо присвоить полученному изображению правильное название. И тут есть одна тонкость — обязательно присваивайте название только латинскими буквами!

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

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

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

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

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

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

В случае использования WordPress в качестве системы управления контентом для вашего интернет-ресурса, для прописывания мета-тегов изображения необходимо воспользоваться возможностями плагина All In One Seo Pack, обзор функционала которого производился в этой статье.

Прописываем информацию следующим образом:

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

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

Готово! После этого можно вставлять полученное оптимизированное изображение в статью вашего сайта.

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

Удачи вам и до встречи!

Также стоит прочитать:

В индекс Яндекса за 6 минут Причиной написания данной статьи является факт попадания в поиск Яндекса новой...статьи моего сайта за 6 минут!
Маскировка внешних ссылок в WordPress... В данной статье рассмотрим вопрос индексации внешних ссылок, размещенных на...сайте под управлением системы WordPress, а точнее об их маскировке и закрытии от...индексации поисковыми системами.
Комментарии WordPress как фактор поисковой оптимиз... Тема данной статьи навеяна моим недавним наблюдением, которое было сделано в...процессе проверки позиций моего сайта в поисковой выдаче Яндекса по некоторым...поисковым запросам, в ходе которой я обратил внимание на тот факт, что один из...комментариев к статье на моем сайте помог ей оказаться в топе поисковой выдачи по...запросу, под который данная статья совершенно не оптимизировалась. Именно по...этой причине я решил написать статью о пользе, которую могут принести комментарии...WordPress.

Комментарии 4

  • Странно!Или я проворонил что то или я просто тупой!Прошел 3 курса по сео и атрибуте alt прописывал все время домен моего блога.Не пойму почему именно это я прописываюо.А сейчас после вашей статьи,как то все по местам стало.Конечно же в этом атрибуте надо было ключевые слова писать!!!!!Как то мне стыдно за себя стало и вам спасибо за письменную пощечену мне! ❓

    • Я тоже постоянно узнаю о каких-то вещах, которые делаю неправильно, о каких-то «детских ошибках», которые не должен был совершать. Просто на тот момент было некому подсказать. Но лучше, как говорится, поздно, чем никогда. 🙂

  • Ну вы меня успокоили. И правда какие-то детские ошибки.В любом случае большое спасибо!

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.