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

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

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

Ищете заработок в Интернете? Пройдите обучение!

БЕСПЛАТНЫЙ 10-ДНЕВНЫЙ ОНЛАЙН КУРС «СПЕЦИАЛИСТ ПО ИНТЕРНЕТ-РЕКЛАМЕ»

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

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

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

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

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

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

  • использование фотографий, сделанных собственноручно. Например вот:

    Дачный сезон

  • скриншоты экрана монитора с последующим добавлением вспомогательных элементов и поясняющего текста. Вот пример:

    Создание карты сайта WordPress

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

    Бесплатная раскрутка блога

  • редактирование (изменение либо добавление определенных деталей) с помощью графического редактора (опять же Photoshop) скаченных из интернета картинок. Для примера:

    Как мой блог оказался под АГС-1, а потом из-под него вышел

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

Созданное изображение должно представлять из себя компромисс между качеством и размером (объемом занимаемой памяти). Наиболее востребованными форматами изображений для использования в WEB являются следующие:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

До скорых встреч. С уважением, Владимир Денисов!

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

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

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

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

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

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