Сайт на Joomla

Блог на WP

Сайт на Drupal

SEO

SMO

Софт

Новые статьи на сайте

Сейчас разберем модули в CMS Drupal - что...
читайте статью далее...
Наш Drupal русифицирован, теперь можно познакомиться с Административной...
читайте статью далее...
На этот раз поговорим о замечательном редакторе Notepad++. В...
читайте статью далее...
На первом уроке мы установили наш "движок" на...
читайте статью далее...
По традиции и настоятельной рекомендации, сегодня будем устанавливать...
читайте статью далее...
В первой статье, посвященной подпискам, поговорим о создании...
читайте статью далее...
Рад всех приветствовать! Этот материал откроет рубрику, в...
читайте статью далее...

Все технические моменты онлайн бизнеса 49 часов видео

Получайте бесплатные уроки прямо себе в почтовый ящик

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

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

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

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

Второе - это SEO оптимизация, она заключается в заполнении тегов alt и title, а также правильное имя файла изображения.

Давайте рассмотрим изменение изображений с помощью графического редактора FastStone - инструкция.

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

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

Выбрав пункт "Обрезка" можно обрезать лишние края или вырезать часть изображения.

Теперь рассмотрим, как изменить "вес" файла, не изменяя его размера:

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

1. Выбираем "Сервис">>"Преобразовать".

2. В открывшемся окне выбираем файлы, указываем выходную папку, тип файла и жмём "Старт".

3. Обратите внимание, как преобразовался файл, при незначительном снижении качества.

Кроме FastStone, для работы с изображениями можно использовать такие графические редакторы, как PaintNet и Photoshop.

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

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

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

Для быстрой индексации в поисковой системе укажите имя файла в транслите через нижнее подчёркивание. И следите за тем, чтобы это имя файла подходило по теме статьи, как в случае на скриншоте: статья называется Аддурилки поисковых систем, а имя файла изображения имеет вид: addurilki_poiskovyh_sistem.

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

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

1. В настройках "Общие" нужно заполнить поля описание и название - это будут теги Alt и title, заполнение этих тегов хорошо сказывается на поисковой выдаче.

2. В настройках "Оформление" укажите размеры и воспользуйтесь плагином smartresize для создания миниатюры изображения, при клике на которую, будет загружаться полное (исходное) изображение.

Обратите внимание, как наши настройки выглядят в коде сайта.

Три формата изображений для Web

Для получения максимального качества изображений, при их минимальном весе, нужно использовать определённые форматы изображений, лучше всего подходящие для web. Таких форматов три - jpg, gif и png.

  • jpg - является самым распостранённым и подходящим для многоцветных фото с множеством оттенков. Обеспечивает отличное качество, при относительно низком весе файла.
  • gif - формат, имеющий 256 цветов и поддерживающий прозрачность и анимацию. Хорошо подходит для создания баннеров, анимации и всевозможных иконок.
  • png - формат, не теряющий качества изображения при сильном сжатии и имеющий свойства прозрачности.

Буду Вам крайне признателен, если Вы оставите комментарий и добавите статью в социальные сети, нажав на кнопки ниже. Благодарю!


Поделитесь с другими, если понравилось

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


Защитный код
Обновить