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

Приветствую всех читателей моего блога!

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

Важность данной темы недооценивать не стоит. Совсем недавно я писал статью про битые ссылки, в которой рассказывал о том, что из-за неверного подхода к именованию файлов изображений на начальном этапе ведения моего блога, впоследствии мне пришлось проделать огромный объем работы по повторной загрузке в 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 минут! Реально!... Всем привет! Решил написать короткий пост на тему быстрой индексации статьи...Яндексом.
Маскировка внешних ссылок в WordPress... Всем привет! В данной статье я затрону вопрос, касающийся индексации внешних...ссылок, размещенных на сайте или в блоге под управлением системы WordPress, а...точнее о их маскировке и закрытии от индексации поисковыми системами.
Комментарии WordPress как фактор поисковой оптимиз... Всем доброго времени суток! Тема данной статьи навеяна моим недавним...наблюдением, которое было сделано в процессе проверки позиций моего блога в...поисковой выдаче Яндекса по некоторым поисковым запросам. Так вот, я обратил...внимание на то, что один из комментариев к одной из статей моего блога помог ей...оказаться в топе поисковой выдачи по запросу, под который данную статью я...совершенно не оптимизировал. Именно по этой причине я решил написать статью о...пользе, которую могут принести комментарии WordPress.
Заголовок на миллион! Составляем цепляющий заголов... Приветствую читателей моего блога! Нередко случается так, что интересная и...качественно написанная статья на вашем блоге остается без должного внимания...читателей, большинство из которых просто проходят мимо нее. Наиболее вероятной...причиной данного обстоятельства может являться непримечательный заголовок,...абсолютно не привлекающий внимания. Заставить читателей обратить внимание на...статью призваны так называемые цепляющие заголовки, от правильного...составления которых в немалой степени зависит успех как одной отдельно взятой...статьи, так и всего ресурса в целом. Именно о том, как правильно составить...цепляющий заголовок для статьи вашего блога я и хочу поговорить в данной статье.
Как сделать граватар? Всем доброго времени суток! В сегодняшней статье я хочу затронуть 2 вопроса: что...такое граватар и как его сделать?
Ищешь заработок в Интернете? Записывайся на бесплатный онлайн курс «СПЕЦИАЛИСТ ПО ИНТЕРНЕТ-РЕКЛАМЕ» и получи удаленную профессию рекламщика в Яндекс Директ за 10 дней!

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

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

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

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

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

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

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