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

ВРЕМЯ ПРОЧТЕНИЯ: 8 МИНУТ

Изображения на сайте делают контент наглядным и привлекательным для пользователей. Они же серьёзно замедляют загрузку страниц. А Google, как и любая другая поисковая сеть, не любит медленные сайты. Всего 1 секунда задержки в загрузке страниц приводит к падению просмотров на 11% (по данным Strangeloop).

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

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

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

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

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

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

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, то можно лишить себя многих лишних проблем.

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

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

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

Если ваш сайт подразумевает использование векторной графики (например, логотипы брендов), то лучший формат для этого — .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 и Description. Они также подсказывают поисковым системам, что изображено на картинке. Если Description — это вещь опциональная, то Alt для заполнения обязателен.

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

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

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

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

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

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