Оптимизация изображений для сайта: подробный мануал

Что такое оптимизация изображений?

Оптимизация изображений (ресайз) — это процесс сжатия картинок или фотографий для уменьшения их веса и скорости загрузки. Оптимизация осуществляется путем удаления некоторой информации из файла изображения, за счет чего сокращается его размер.

Что включает SEO-оптимизация изображений?

• создание уникальных картинок (отрисовка дизайнером или покупка на фотостоках);

• прописывание соответствующего имени/названия (например, optimizaciya-izobrazhenij.jpg);

• уменьшение размера и веса;

• использование атрибутов Alt и Title;

• выбор основных параметров для корректного отображения на странице (отступы, выравнивание и прочее).

Особенности оптимизации изображений разных форматов

Все мы хорошо знаем такие форматы изображений, как PNG, JPEG (.jpg, .jpeg .jpe или .jfif), SVG, TIFF, GIF. Существует еще и WebP. Каждый из них предназначен для картинок разного типа, назначения и размера.

Отличием формата GIF является анимационная поддержка (несколько кадров, сменяющих друг друга с некоторой частотой). GIF подходит в случае, когда нужна:

• не многоцветная картинка;

• простая бинарная прозрачность;

• анимация.

Формат JPEG поддерживает 16 млн. цветов и оттенков. Часто при сжатии картинок данного формата заметно теряется их качество. JPEG подходит для:

• фото и полноцветных картинок;

• контрастных изображений;

• картинок с множеством мелких деталей разных цветов.

Формат PNG для сжатия является оптимальным, так как изображения оптимизируются без потери качества. PNG8 поддерживает 256 цветов, а PNG24 так же, как и JPEG, 16 млн. цветов. Отличительной чертой для данного формата является возможность задавать определенную степень прозрачности (альфа). PNG подходит для:

• чертежей и изображений с текстом;

• картинок с резкими переходами от цвета к цвету;

• полноцветных рисунков с высокой точностью.

WebP — это сравнительно новый формат. Его главные особенности:

• сжатие без потери качества — на 25-26% лучше по сравнению с форматом PNG (данные Google);

• сжатие с потерей качества — в среднем на 30% лучше, чем у JPEG (данные Google);

• поддержка прозрачности картинок.

PSD — формат хранения графических изображений, созданный специально для Photoshop. Файлы данного типа сжимаются без потери качества.

Он подходит для тех, кто работает с фотошопом. Формат позволяет сохранять все слои, эффекты и прочие возможности редактора.

TIFF — оптимально подходит для:

• изображений с большой глубиной цвета;

• сканов документов в электронном варианте.

SVG (Scalable Vector Graphics), в отличие от предыдущих форматов, не является растровым. Это масштабируемая векторная графика. SVG лучше всего использовать, когда нужно:

• масштабирование картинки без потерь качества;

• изменение цветов элементов изображения;

• анимация части картинки.

SVG обычно используется для иконок, логотипов и малоцветных схем.

В таблице ниже мы подытожили все самое важное по оптимизации картинок разных форматов.

Изображения какого формата лучше всего загружать на сайт?

1. Рекомендации от поисковых систем — GIF, PNG или JPEG.

2. Если ваша картинка обладает большими размерами и содержит анимацию — выбирайте GIF.

3. Если нужно высокое качество изображений — PNG. Но крайне важно проверить, не возникают ли проблемы с загрузкой и корректно ли отображается картинка на странице.

4. Форматы BMP и TIFF использовать не рекомендуется, это совет от поисковых систем.

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

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

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

Чтобы передать поисковикам актуальные данные о содержании изображения, нужно:

• сделать краткое, но емкое описание;

• в имени использовать латинские буквы и дефис (поисковой бот не умеет читать на могучем русском, а другие знаки препинания воспринимает плохо);

• использовать ключевые слова в названии.

Например: optimizaciya-izobrazhenij.jpg

Как прописывать атрибуты «Alt» и «Title»? (Н3)

«Alt» — альтернативное описание, которое применяется для обозначения того, что представлено на картинке. Оптимальным вариантом «альта» для изображения с названием optimizaciya-izobrazhenij.jpg может быть:

• «Поисковая оптимизация изображений» - «Optimizarea imaginilor»;

• «Как правильно оптимизировать картинки для сайта» - «Cum să optimizați corect imaginile pentru site-ul».

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

Вопрос: могут ли «Alt» и «Title» быть одинаковыми?

Да, это допустимо. Особенно если у вас на сайте много однотипных картинок или фотографий. Лучше когда описания похожи или одинаковы, чем вообще отсутствуют.

Почему так важно корректно прописать атрибут «Alt»?

• В случае, если картинка не загрузилась, данный альтернативный текст указывает на ее содержимое.

• Роботы поисковых систем используют Alt для правильной индексации изображений.

• Использование ключевых слов в атрибутах положительно сказывается на продвижении.

Обратите внимание! Ключевые слова могут и должны быть вписаны в «Alt», но данный атрибут не должен стать источником спама.

Примеры

Корректно:

alt=”Как правильно пить виски”;

alt=”Чем закусывать виски, рис.1” (в случае, если однотипных картинок много).

Некорректно:

alt=””;

alt=”виски”;

alt=”рисунок 1”.

Важно! Длина alt-a не должна превышать 125 символов с пробелами.

Как уменьшить вес изображений без потери качества? Сервисы для оптимизации

Сейчас есть огромное количество инструментов, которые помогают оптимизировать картинки и конвертировать их из одного формата в другой. Многие из них позволяют проводить оптимизацию, не теряя при этом качества.

1) Image Compressor (imagecompressor.com) — для JPEG и PNG файлов, можно закачать до 20 изображений за 1 раз.

2) Iloveimg (iloveimg.com) — JPG, PNG, GIF. 15 картинок для не авторизованных пользователей за 1 раз. При авторизации — 30. Можно загрузить фото из Google Drive и Dropbox.

3) Compressjpeg (compressjpeg.com) — до 20 изображений .jpg или .jpeg за 1 раз.

4) JPG Zipper (zip.yutex.ru) — сервис для сжатия файлов JPEG. Коэффициент оптимизации варьируется: большие изображения от 500 Кб можно сжать без потери качества до ~100 Кб.

5) Tinypng (tinypng.com) — за 1 раз до 20 изображений PNG и JPG. Pro аккаунт обойдется в 25$ в год.

6) Kraken (kraken.io) — можно сжимать как один, так и несколько файлов. Доступна функция оптимизации картинок с веб-ресурса: для этого нужно указать URL сайта, потом просто сохранить архив с уже оптимизированными изображениями.

7) Pichold (pichold.ru) — по сути, этот инструмент уменьшает размер картинки, а не ее вес (например, было 600х600 пикселей, а стало — 400х400).

8) ImageOptim (imageoptim.com) — для JPEG, SVG, GIF и PNG. Позволяет оптимизировать сразу несколько изображений. Решение в виде ПО для Mac.

9) IMGonline (imgonline.com.ua) — еще один сервис, уменьшающий вес картинок. Работает с такими форматами, как BMP, GIF, JPEG, PNG, TIFF.

10) Compressor (compressor.io) — работает с форматами JPEG, PNG, GIF, SVG. Без потери качества можно сжимать только изображения JPG и PNG. Но эффективность уменьшения веса оставляет желать лучшего: в любом другом сервисе вы получите еще + 4-10% к сжатию.

11) Webresizer (webresizer.com) — сервис, предназначенный для оптимизации изображений JPEG, PNG, GIF с возможностью изменения их размеров. Ширина по умолчанию — 400px.

Как проверить качество сжатия картинок?

Для этого можно использовать любой сервис для проверки скорости загрузки сайта. Например, gtmetrix.com показывает, какие картинки на сайте «тяжелые» и на сколько их еще можно сжать.

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

Резюмируем

Сервисов для оптимизации изображений действительно очень много. Из тех, которыми мы пользуемся и можем рекомендовать, стоит отметить Optimizilla (Image Compressor), Iloveimg, Titypng (для сжатия скриншотов пакетом — идеальное решение), JPG Zipper, Kraken.

Во время загрузки картинок на сайт давайте им адекватное и достоверное описание, прописывайте атрибут «Alt», используйте ключевые слова, но избегайте спама. Чтобы добиться максимального результата от оптимизации изображений под качественное продвижение сайта SEO, они должны быть не только качественными, но и уникальными, потому что качество, актуальность и ценность — это основополагающие критерии для поисковиков при оценке контента.

Также рекомендуем вам почитать нашу статью о том, как xml карта сайта влияет на оптимизацию.