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

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

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

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

Зачем оптимизировать изображения?

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

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

Уникальность картинки

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

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

Итак, у нас есть уникальное и качественное изображение. Очень хорошо. Но прежде чем размещать его на сайте, давайте немного его изменим. Что нам нужно сделать:

Зачем оптимизировать размер и вес

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

Удалить ненужные метаданные. Мы вычистим техническую информацию, которую камеры и фоторедакторы (Фотошоп в частности) внедряют в изображения, и тем самым еще немного выиграем в размере.

Дать правильное название изображению. Нужно давать файлам подробные информативные названия — это подскажет поисковикам о содержимом изображения.

Теперь по порядку.

Как уменьшить изображение?

Для примера возьмем довольно увесистую фотографию (чуть более 2 мегабайт) с разрешением 6691*4461 px. По поводу разрешений. Есть информация, что использование изображений с разрешением выше 1024*786, из-за снижения скорости загрузки страницы, ведет к ухудшению ее ранжирования. Поэтому желательно не использовать разрешения выше 1024*786.

Для редактирования изображений я использую Photoshop. Итак, мы открыли изображение, теперь нам нужно уменьшить его размер. Для этого идем в «Изображение Размер Изображения» или нажимаем Alt+Ctrl+I. Я поставлю ширину 600px. Чтобы сохранялись пропорции, убедитесь, что отмечен соответствующий пункт.

Как уменьшить размер изображения

Теперь идем в «Файл Сохранить для Web» (Alt+Shift+Ctrl+S), выбираем формат и желаемый уровень качества. На вкладке «2 варианта» вы можете сравнивать оригинал с тем, что получится. Я в основном ставлю качество 70-85% — такое сжатие позволяет добиться серьезного выигрыша в размере не нанося при этом ощутимого ущерба качеству. Можете поэкспериментировать и выбрать свое оптимальное соотношение размера и качества.

оптимизация изображения в фотошопе

Чтобы Фотошоп не добавлял в изображение свои метаданные, в соответствующем списке выберите «Не показывать». Для удаления подобных данных также есть специальные программы, например Exif Pilot.

фотошоп метаданные удаление

Сохраняем изображение для Web

Таким образом, мы уменьшили размер изображения из 2.06 мегабайт до 56.82 килобайт. Неплохо.

JPEG или PNG?

Часто приходится слышать: что лучше, JPEG или PNG? Такая постановка вопроса не совсем корректна, это все равно, что выбирать между футбольным и баскетбольным мячом. У этих форматов несколько разные цели, и у каждого есть свои преимущества. Так, лучший формат для фотографий — это JPEG. Если же ваше изображении текстового содержания, не думая выбирайте формат PNG. К чему слова, ниже вы можете увидеть наглядное сравнение этих форматов.

Для текста оптимален формат PNG

Для фотографий оптимален формат JPEG

Сами по себе изображения дают поисковым системам очень мало подсказок относительно своего содержимого. Мы можем помочь им, если будем давать файлам информативные названия. Например, если это изображение коробки передач ВАЗ, то название korobka-peredach-vaz.jpeg скажет о нем гораздо больше, чем название типа 123.jpeg или IMG230.jpeg. Не забывайте пользоваться транслитерацией, когда даете название файлам.

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

Атрибут alt

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

Заполняя alt, cохраняйте информативность и описательность. Если ключевое слово уместно — отлично, но не дублируйте его снова и снова в alt’е остальных изображений. Для каждого изображения составляйте собственное уникальное описание. Вот что советует Google относительно атрибута alt:

Еще одно место, где можно предоставить информацию об изображении — это тег Title. Если он прописан, он будет всплывать при наведении на изображение. Но пользуйтесь им осторожно, и применяйте только тогда, когда он действительно будет нести для людей полезную информацию, а не просто дублировать содержимое alt’а.

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

Оптимизация с помощью онлайн сервиса

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

 Видеоинструкция, как оптимизировать изображение для сайта — Установка и настройка плагина для wordpress

 

Оцените статью
У нас про сайты
Добавить комментарий