SEO 💊

Гайд по оптимизации изображений на сайте

28
6 мин.

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

Акси Марсович
Акси Марсович
Межгалактический эксперт

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

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

Более того, основной источник трафика сейчас приходится на мобильный интернет. Поэтому тяжёлые картинки = низкая скорость загрузки сайта на смартфоне.

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

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

Это обработка файла с целью уменьшения его «веса» без потери качества. При правильной обработке можно добиться уменьшения файла на 70–90%. Круто же?

Очень тяжелое изображение
Размер изображения — 365 кб. Это очень много для сайта!!!

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

Грамотно оптимизируя изображения, вы получаете следующие плюшки:

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

Какой формат изображения лучше выбрать

«Какая разница, баннер у меня в JPEG или PNG? Главное же, что картинка чёткая и яркая, разве нет?». Всё-таки формат изображения играет далеко не последнюю роль. От формата зависит вес картинки и, как следствие, скорость загрузки страницы.

Так чем же отличаются форматы между собой?

JPG/JPEG
Лучшее разрешение для фотографий, скриншотов и изображений. Формат изначально имеет относительно небольшой вес и к тому же отлично оптимизируется, что помогает ему занимать лидирующие позиции в мире web.

Progressive JPEG

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

Это JPEG-изображение в прогрессивном формате. Этот формат позволяет браузеру отображать изображение на сайте постепенно.

Progressive JPEG похож на слоёный пирог, каждый слой дополняет деталями предыдущий. Для того, чтобы увидеть «набросок» картинки, необходимо загрузить только один слой. Буквально с каждой секундой качество будет становиться всё лучше и лучше.

PNG
Больше подходит для небольших изображений: логотипов, кнопок, значков и других дизайнерских элементов. Обычно данный формат применяют в том случае, когда нужен прозрачный фон. Основной минус ― при наличии большого количества текста, получаются достаточно тяжёлые изображения.

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

SVG

Векторный формат изображений наименее популярный, но на наш взгляд лучший для рисованной графики. С помощью данного формата обычно изображают оригинальные иконки и значки для сайта. Неоспоримым плюсом является маленький вес изображения, ввиду того, что SVG ― текстовый файл. Изображение можно растянуть до любого размера и качество от этого не изменится. К тому же, изображения модифицируются в браузере средствами css и js.

WEBp
Один из самых мощных форматов, который позволяет сжать картинку без потерь до 25% сильнее, чем тот же JPEG. Именно это формат, кстати, рекомендует сам Google. Но поддерживается он не всеми браузерами.

С целями и форматом разобрались, а теперь, не менее важный момент.

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

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

TinyPNG — одна из любимых программ наших сотрудников. Программа позволяет одновременно загружать до 20 изображений. Соотношение качества и размера изображения говорит само за себя. Взгляните сами.

Заметить изменения невооруженным взглядом практически невозможно, при этом вес изображения уменьшился на 90%!

Optimizilla — оптимизатор изображений позволяет с минимальными потерями уменьшить размер изображения в форматах JPEG и PNG. Можно закачивать до 20 изображений одновременно, а также подбирать оптимальный уровень сжатия.

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

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

Заключение

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

Чего же мы добились при правильной работе с изображениями?

Во-первых, мы ускорили загрузку сайта, сделали его более доступным для пользователей без быстрого интернета. Во-вторых, улучшили ранжирование в системах Google и Яндекс. В-третьих, снизили нагрузку на хостинг и, конечно же, сэкономили место на диске. Это огромный прогресс, для такого маленького изменения.

Желаем вам побольше трафика и успехов!

Похожие статьи

Тренды SEO в 2022 году
SEO 💊
121
8 мин.

Для разработки наиболее эффективной и оптимальной стратегии продвижения необходимо быть в курсе новых SEO-трендов. Взяв их во внимание, можно построить максимально эффективный план развития бизнеса в поисковых системах.

Сайты-агрегаторы. Как попасть в ТОП с их помощью?
SEO 💊
66
8 мин.

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

Продвижение на маркетплейсах: как увеличить продажи
SEO 💊
65
8 мин.

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

ТОП-5 самых распространенных ошибок при SEO-продвижении сайта
SEO 💊
63
10 мин.

Непрофессионалам сложно определить, какие SEO-стратегии продвижения сайтов эффективные и современные, а какие давно устарели и их использование может привести к очень неприятным последствиям.