Страницы Интернета

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

Долго не писал потому, что писать по графику или потому, что надо, мне неинтересно. Тем более без дела не сидел, сделал доску объявлений, пару магазинов и всяко-разно по мелочам. Среди этих «мелочей» была работа по переделке одного сайта, там пришлось повозиться с картинками, так как изображения не были оптимизированы ни как-ни разу.

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

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

Есть три основных фактора из которых складывается грамотная seo оптимизация изображений. Давайте познакомимся с ними поближе.

1.»title» — здесь как правило вводится информация описательного характера для нашей картинки.
2. «alt» — многими вебмастерами используется для ключевых слов или запросов. Тут надо знать меру и не пытаться «впихнуть невпихуемое».
3. Название изображения — подразумевает логически осмысленное название файла изображения. Например — knopki-socialnyh-setej-dlja-sajta.jpg или knopki.jpg

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

В качестве инструмента для подготовки картинок я могу порекомендовать диспетчер рисунков Microsoft Offis — Microsoft Offis Picture Manager. Если нам необходимо оптимизировать картинку перед загрузкой, открываем диспетчер — выбираем «Изменитть рисунки» — справа появится колонка, в ней выбираем «Сжатие рисунов», после нажатия появятся «Параметры сжатия рисунков». Выбираем для веб страниц — сохраняем, и дело в шляпе.

Но это не единственное достоинство программы. Есть одна любопытная деталь на которую стоит обращать внимание, а именно, уникальность изображения. Изменение размеров или расширения файла значения не имеют, но воспользовавшись инструментом «Автоподстройка» мы увеличиваем вероятность того, что наша картинка будет считаться уникальной.

Для проверки изображений на уникальность, могу порекомендовать он-лайн сервис Tineye.  Проверить картинку также можно в гугле и яндексе, причем яндекс здесь намного точней.
http://images.yandex.ru/
http://images.google.ru/

Но мой рассказ будет неполным, если я не коснусь вопроса,что делать если на сайте уже размещено какое-то количество картинок? Здесь нам на помощь может придти программа XnConvert. Ее достоинство в том, что она абсолютно бесплатна и на русском языке. Скачать программу можно на официальном сайте — http://www.xnview.com/en/xnconvert/#downloads.

Я попробовал и остался доволен результатом, вес папки с картинками снизился с 500 до 130МБ. Правда где-то я протупил в настройках и часть картинок была неправильно переименована. Так что обязательно разберусь и напишу подробный мануал.

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

Чтобы проделать такой фокус, сначала надо узнать ширину области контента. Для этого подойдет любой инспектор элементов, который встроен в каждый браузер по умолчанию.
Открываем любую статью, наводим курсор на область контента, кликаем правой кнопкой и выбираем либо «Просмотр кода элемента», либо «Инспектировать элемент» — зависит от браузера.

Теперь, когда ширина известна, остается добавить последний штрих. Идем в админку — Темы — Редактор, выбираем файл funtions.php. В конце файла, перед закрывающим тегом ?> добавляем такой код

// —————————————————————————
// Start Modify Editor Width
// —————————————————————————
function fb_change_mce_buttons( $initArray ) {
$initArray['width'] = '580px';
return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');
// —————————————————————————
// End Modify Editor Width
// —————————————————————————

Только вместо моих 580 вставьте свои циферки, сохраните изменения.

Вот пока и все на сегодня.
Всем желаю удачи! До новых статей!