Как делается оптимизация картинок для сайта на WordPress

Приветствую Вас, в этой статье разберём как делается оптимизация картинок для сайта на WordPress. Постараюсь рассказать простым доступным языком.

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

оптимизация картинок для сайта

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

Из каких шагов состоит оптимизация картинок

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

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

Первое что нужно сделать, это обрезать рисунок или уменьшить до нужных размеров.

Второе – это сделать сжатие рисунка без ущерба для качества.

Третьим шагом, оптимизировать картинку при загрузке на сайт.

Оптимизация картинок для сайта перед загрузкой

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

Поэтому, необходимо обрезать картину до нужных размеров, убрав с неё лишнее и выбрать оптимальный размер в зависимости от ширины текста на сайте. Обычно я выставляю максимальную ширину картинки равную ширине текста на сайте 600 пикселей. Это можно сделать в любом графическом редакторе, например, в фотошопе. Я пока пользуюсь онлайн фотошопом pixlr.com.

Но здесь необходимо соблюдать определённый баланс, большие картинки более привлекательны для человеческого глаза и лучше ранжируются поисковыми системами. Но если необходимо показать изображение в полном объёме, то я думаю, лучше на сайте разместить её превью (но не миниатюру) и дать ссылку на оригинал, например, разместить в облачном хранилище.

В интернете в основном используются следующие форматы изображений, которые загружаются на сайт .png, jpeg и .gif.

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

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

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

оптимизация картинок

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

Первый optimizilla этот сервис простой и лёгкий, предназначен для сжатия изображений в формате .jpeg и .png.

Второй iloveimg – предназначен для сжатия изображений в формате .ipg, .png и .gif.

Третий compressjpeg в нём можно сжимать изображения в формате .jpeg, png и pdf.

Оптимизация картинок

После сжатия, настраиваем картинку для лучшего ранжирования в поисковые выдачи. Для этого необходимо переименовать картинку, название должно быть написано латиницей и не содержать пробелов. В место пробелов ставим нижнее подчёркивание или дефис (optimizacija_kartinok _dlja_sajta). Название картинок для одной статьи должны быть разными, допускается совпадение в ключевой фразе. В названии картинки должно присутствовать ключевое слово для лучшей выдачи из поисковых запросов.

optimizacija_kartinok_sliyd

optimizacija_kartinok_forma

optimizacija_kartinok_dlja_sajta

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

оптимизация картинок сайта

Графа «Заголовок» устанавливается автоматом, так как картинку мы переименовали заранее. (optimizacija_kartinok_sliyd)

Графу «Подпись» заполнять не обязательно. Она нужна, чтобы на сайте под картинкой установить подпись, если есть такая необходимость.

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

оптимизация картинок атрибуты

«Описание» в описании вписываем тот же самый текст, что и в атрибуте alt с небольшим хвостиком. (оптимизация картинок для сайта слайд, оптимизация картинок для сайта на WordPress). В описании должно находиться ключевое слово.

Далее идут настройки отображения файла, после того как настройки будут сделаны нажимаем на кнопку «Вставить в запись». Картинка будет установлена в тексте статьи и оптимизирована.

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

С уважением Борис Житний.

Как делается оптимизация картинок для сайта на WordPress

Как делается оптимизация картинок для сайта на WordPress: 5 комментариев

  • 14.01.2018 в 20:20
    Permalink

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

    Ответить
  • 01.02.2018 в 19:43
    Permalink

    Сначала думал организовать сжатие через плагин, но результат не всегда оптимален. В итоге в фотошопе сжимаю каждую картинку и сохраняю в режиме “Сохранить для WEB”, где можно настроить множество параметров сжатия, дабы добиться идеального соотношения размер\качество.

    Ответить
    • 04.02.2018 в 23:57
      Permalink

      Делать сжатие картинок в фотошопе отличное решение.

      Ответить
  • 19.02.2018 в 11:54
    Permalink

    У себя на сайте я не всегда заполняю поле alt, всё зависит от того о чём статья. Но в большинстве случаев стараюсь заполнять и alt и описание. Кстати. встречал такую информацию в интернете, что некоторые советую даже из поля “Заголовок” удалять текст.

    Ответить
    • 19.02.2018 в 20:01
      Permalink

      Насколько мне известно поле “Заголовок” обязательно к заполнению.

      Ответить

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

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