Как оптимизировать картинки под SEO
Привет, друзья! Сегодня я хочу рассказать Вам об оптимизации картинок и изображений. Это очень важно, т.к. графика создает основную нагрузку на сервер. Возможно, вы еще этого не заметили, но будьте уверены, что в скором времени встретитесь с проблемой загрузки страниц. Чтобы этого не произошло, вовремя оптимизируем весь графический контент блога.
Оптимизация картинок и изображений для сайта или блога
Оптимизация включает в себя 3 этапа:
- Обработка и уникализация
- Загрузка на сервер
- Оптимизация под поисковые системы
Обработка и уникализация
На данном этапе от вас потребуются только знания Photoshop. Открываем изображение в графическом редакторе и следуем инструкции:
1) Переходим на вкладку —Изображения—-Размер изображения—
2) Изменяем размер изображения
3) Теперь нужно уникализировать наше изображение. Это можно сделать при помощи добавления водяного знака, рамки или склеивания нескольких картинок. Из всего этого можно и нужно использовать добавление водяного знака.
Во-первых, водяной знак защитит ваше изображение от воровства.
Во-вторых, добавление водяного знака делает изображение отличным от исходного. Если вы плохо владеете Фотошопом, то можете воспользоваться онлайн сервисом для добавления водяных знаков.
Загрузка на сервер
Перед загрузкой изображения на сайт нужно его сжать без потери качества. Для этого можно воспользоваться сайтом JPEGmini. Неудобство сервиса заключается лишь в том, что сжимать можно только 1 изображение за 1 раз. Можно, конечно, установить плагин WP Smush.it. Правда, процент сжатия хуже.
Оптимизация под поисковые системы
1) Обязательно заполняем поля Заголовок и Текст, благодаря которым изображения попадают в индекс поисковых систем.
2) В полях Заголовок и Текст употребляем ключевые слова.
3) Вокруг изображения стараемся использовать тематический текст, т.к. поисковые системы учитывают его при ранжировании.
4) Указываем точные размеры изображения.
5) Стараемся использовать уникальные изображения.
6) Не забываем про формат изображений. На сегодняшний день .png является одним из лучших форматов изображений для web-страниц.
7) Используем ключевые слова в имени изображений. Не jfh.jpg, а, к примеру, smile.jpg
8) Заполняем description с упортреблением ключевых слов.
Напоследок, посмотрите видео, как сделать изображение уникальным:
На этом у меня все! Теперь и вы знаете, как оптимизировать картинки и изображения для блога.
Подскажите, а чем JPEGmini лучше стандартной функции фотошопа «сохранить для веб» ?
Также можно заполнить тег title изображения ключевыми словами.
И по поводу пункта 5, пнг действительно может занимать меньше места при том же качестве. :whistle:
Stef33, JPEGmini сжимает лучше, при этом качество никак не меняется. Чтобы не быть голословным, я провел небольшой эксперимент. В результате я получил такие цифры, фотошоп сжал фото на 23 кБ, JPEGmini на 56 кБ. Результат на лицо. Можете сами проверить. Обязательно отпишитесь.
Песок, не также можно, а нужно прописывать в title и alt ключевые слова. PNG может и по весу меньше, но качество хуже. Проверял лично.
Благодарю, Тимур! Я узнала много нового и полезного из статьи. Буду применять :)
По уникализации хотелось бы побольше информации. Водяной знак картинку уникальной не сделает (если он конечно нормальных размеров). Фильтры тоже не всегда есть возможность использовать, то есть накладывая их, только картинку портить, а это не есть хорошо.
Зеркалить или менять перспективу тоже не всегда возможно.
И вот тут-то и возникает вопрос, что можно еще сделать?
Да, я скоро напишу пост на эту тему. Есть много способов, но большинство из них связано с потерей чего-то.
Уважаемый, автор! Спасибо большое Вам за статью, правда было интересно прочитать и ознакомиться. Твитнул Вашу запись :)
Надо будет заняться пере оптимизацией фото на сайте
Спасибо! От лица службы — благодарность огромная.
Всё понятно и просто. А то тупо «напихал» полный блог фото, теперь придётся оптимизировать. Прошу вас уточнить: могу сделать при помощи плагина + прописать вручную «заголовок» и «текст». Я правильно понял?
Да, вы правильно поняли.
Спасибо. Читать было интересно. Тем более, что я всеми руками и ногами за визуальный контент.
Отличная статья! Огромное спасибо!
Вообще-то png увеличивает вес изображения по сравнению с jpeg. Этот формат имеет смысл использовать только при необходимости сохранить прозрачный фон. А вот gif как раз весьма подходит для уменьшения веса, конечно, если картинка не требует наличия множества цветовых оттенков. К примеру, трех-четырехцветные таблицы, схемы или символические «человечки», которых так часто размещают на блогах, замечательно выдержат перевод в формат gif, зато вес уменьшится в десятки раз.
Png создавался как замена старого формата Gif, поэтому он имеет лучшие алгоритмы сжатия.
Во-первых, это прозрачный фон, а значит нулевые биты в ячейках.
Во-вторых, Png создавался как более современный формат, учитывающий специфику современных потребностей.
Я интересуюсь программированием, поэтому данная тематика мне очень близка и я в ней отлично разбираюсь. Gif целесообразно использовать только при публикации изображений с небольшим количеством цветов.
Пришлось почитать о png, все не так однозначно, как я считала)
На практике фотографии в png-24 у меня всегда весили больше, чем в jpeg. Отсюда и выводы) Спасибо, Тимур, за информацию, такие нюансы стоит знать.
JPEGmini — это сервис для тех, кто не очень хорошо разбирается в Фотошопе, хотя он и не очень сложный. Мой выбор также остановился на фотошопе, хотя я частенько пользуюсь сервисом, когда нет времени на обработку фотографий.