3 способа оптимизации изображений для сайта без потери качества

ВРЕМЯ ПРОЧТЕНИЯ: 8 МИНУТ
Изображения на сайте делают контент наглядным и привлекательным для пользователей. Они же серьёзно замедляют загрузку страниц. А Google, как и любая другая поисковая сеть, не любит медленные сайты. Всего 1 секунда задержки в загрузке страниц приводит к падению просмотров на 11% (по данным Strangeloop).

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


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


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

По данным HTTP Archive, картинки занимают 21% от общего «веса» страницы. И процесс их оптимизации считается простейшим методом улучшения производительности сайта. Однако многие до сих пор игнорируют этот фактор.


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


Оптимизация скорости загрузки


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

  • Увеличение скорости загрузки страниц;
  • Улучшение SEO-показателей из-за высокой скорости загрузки;
  • Повышение скорости создания резервных копий;
  • Экономия места на хостинге.

С графическим контентом нужно поработать так, чтобы в итоге добиться скорости загрузки на уровне до 2,5 секунды. Именно такой показатель Google считает быстрым.

Лайфхак: используйте технику Lazy Load («ленивая загрузка»). Она помогает загружать картинки только на первом экране, тогда как остальные изображения загружаются после скролла страницы. На Tilda эта опция есть по умолчанию.
Лучший способ достичь требуемых поисковиками цифр — сжатие файлов. Как мы уже отметили, делать это можно с потерей качества, но мы ведь заботимся о наших посетителях, так? Поэтому рассмотрим варианты, при которых рядовой пользователь не заметит никакого подвоха.


Сжатие изображений без потери качества


Для оптимизации изображений для сайта онлайн есть классные облачные сервисы. И вот лишь некоторые из них:

Compressor. Загружать можно картинки размером до 10 мегабайт, зато этот сервис абсолютно бесплатный. Позволяет сжимать файлы до 90%, не теряя при этом их качества. Поддерживаемые форматы: .jpg, .png;


Kraken. Сервис, которые позволяет одновременно оптимизировать несколько картинок. Используя Kraken, вы можете сразу получить архив с сайта со сжатыми файлами, стоит только ввести URL в специальном поле;


ImageOptim. Программное обеспечение для Mac. С его помощью в режиме онлайн уменьшают файлы в форматах .jpg, .svg, .png. Можно оптимизировать сразу несколько изображений. Если у вас Windows, то в качестве аналогов можно использовать FileOptimizer или pngquant;


Если ваш сайт работает на системе Wordpress, вы можете установить специальные плагины для оптимизации размера изображения:

EWWW Optimizer. Бесплатно распространяемый плагин, поддерживающий форматы .jpg, .png, .gif. Может автоматически сжимать файлы во время загрузки на сайт. В этом плагине нет ограничений ни по весу, ни по количеству картинок, так как работает он на ваших серверах;



Robin Image Optimizer. Плагин, сжимающий файлы в форматах .jpg и .png на 80% без ухудшения качества (непрофессионал не заметит никакой разницы с оригиналом). Умеет оптимизировать картинки по ходу загрузки;


reSmush.it Image Optimizer. Этот плагин также в автоматическом режиме оптимизирует картинки во время загрузки, а также предлагает опцию массовой оптимизации для уже имеющихся на сайте файлов;


Другой способ оптимизации и одна из причин, почему мы в ENDY при разработке лендингов для своих клиентов используем Tilda — адаптивная загрузка изображений. Подробнее об этом рассказали сами представители сервиса — ссылка. Если вкратце, то Tilda масштабирует картинки под размер контейнера на сайте и конвертирует их в формат .webp. Тем самым сервис повышает уровень производительности лендинга без лишних усилий со стороны пользователя.


Кстати, наш сайт тоже сделан на Tilda :)


Загрузка изображений в зависимости от устройства


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

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


Использование WebP формата


Этот формат впервые появился в 2010 году, а его создателем выступила сама Google. WebP прекрасен тем, что в отличие от .jpg позволяет делать оптимизацию изображений без потери качества на 70% эффективнее. Использование этого формата в среднем ускоряет загрузку сайта в 2 раза.


Как мы уже отметили выше, Tilda автоматически конвертирует файлы в WebP, поэтому вам не нужно использовать дополнительные конвертеры.

Если же вы используете другой конструктор или другую CMS, то вам помогут такие сервисы, как Image Online-Convert, Convertio или ILoveIMG. Все они прекрасно конвертируют файлы в WebP в онлайн-формате.


Использование SVG формата


Если ваш сайт подразумевает использование векторной графики (например, логотипы брендов), то лучший формат для этого — .svg. Изображения в нём отличаются небольшим весом, при этом они легко масштабируются без потери качества и без увеличения веса.


Другой плюс SVG формата — возможность анимирования с помощью JavaScript.

Для сжатия файлов в формате .svg применяют GZIP.SVG.


Поисковая оптимизация


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


Название файлов


Оптимизированный по размеру и качеству файл надо называть так, чтобы было ясно, что изображено на картинке. Никаких рабочийфайл1. jpg, Новый. png и 007.webp.

Название должно передавать поисковикам содержание изображение и при этом быть релевантным запросам аудитории. Если у вас сайт доставки еды, то на изображении с бургером должно быть написано, например, burger.jpg.

При этом название не должно быть суперинформативным и бесконечно длинным. Burger_with_the_ham_cheese_and_salad_made_on_open_fire.jpg — так делать не надо, это никому не поможет: ни пользователям, ни поисковикам.

Изучайте запросы по вашей теме в сервисах Вордстат и Google Trends, а затем интегрируйте их в названия файлов ваших изображений.


Заполнение атрибута alt


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

Грамотно заполненный атрибут Alt помогает вашему сайту получать больше переходов из раздела «Картинки» основных поисковиков. Роботы Яндекса и Google анализируют тексты из Alt, чтобы подобрать лучшее изображение по запросу пользователя.

Как правило, в этом атрибуте используют ёмкое описание объёмом до 125 символов. Если вернуться к нашему примеру с бургером, то в качестве Alt как раз можно прописать «Бургер с ветчиной, сыром и листьями салата, приготовленный на открытом огне».

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

Дополнительная функция атрибута Alt, о которой мало кто знает, — возможность для пользователей с нарушением зрения читать занесённую в него информацию с помощью спецпрограмм для чтения с экрана.


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

Если у вас ещё нет лендинга, и вы хотите доверить его разработку нам, то пишите на почту fm@endy.pro. А как делать оптимизацию картинок для сайта, чтобы он быстро грузился и хорошо показывал себя в поисковой выдаче, вы теперь знаете.


ТЕКСТ: РОМАН КОВАЛЕВ
РЕКОМЕНДУЕМЫЕ СТАТЬИ