Бесплатно по РФ: 8 800 200-55-73

Москва

+7 (499) 677-50-92

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

Автор: Мария Саловарова 26.04.2020

Разные форматы изображений

Краткое содержание статьи:

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

Сжатие изображений

Сжатие графики необходимо для сокращения её веса. Вес зависит от формата, качества и размера картинки, рассмотрим их подробнее.

Качество

Сжатие изображения – это уменьшение его размера при сохранении исходных данных. Благодаря этому оно занимает меньше места на сервере, облегчаются хранение и передача. Изображения могут быть сжаты с потерями и без потерь качества.

При сжатии с потерями данные о части пикселей удаляются, а при сжатии без потерь – сжимаются.

Как выбрать вид сжатия? Зависит от самого изображения и необходимого результата. Чтобы уменьшить вес подходит сжатие с потерями. Если необходимо получить четкую картинку, вы можете использовать сжатие без потерь.

Потери качества можно отследить, если использовать в Adobe Photoshop функцию «Экспортировать» -> «Сохранить для Web», перемещая ползунок качества от 1 до 100. Оптимальным будет значение 80, но для разных изображений оно индивидуально. Так, на примере ниже вы можете посмотреть, как изменится оригинал, если качество сделать равным 50. При визуальной оценке изображение практически не поменялось, зато вес упал с 5,49 мб до 463,7 кб.

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

Размер изображения

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

При изменении длины и ширины вес графического элемента меняется. Например, возьмём всё ту же фотографию с морским пейзажем, где мы изменили степень сжатия качества на 50%. Ширина и высота 1200x1600 px с размером 463,7 кб. Но, допустим, в статье необходимо разместить картинку справа от текста (обтекание изображения текстом), и поэтому большой физический размер нам не требуется. Обрежем его до таких параметров – 400x534 px с сохранением пропорций, и получим вес равный 181 кб.

Качество изображения в Adobe Photoshop

Формат изображения

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

Для растровой графики могут быть использованы популярные форматы: GIF, PNG, JPEG, WebP, для векторной – SVG.

Растровое изображение состоит из множества пикселей с информацией о цвете. При сильном увеличении картинки будут видны пиксели.

GIF – подходит для демонстрации анимации или для графики с небольшим количеством цветов. Цветовая палитра состоит из 256 цветов, из-за этого обычно GIF-изображения визуально выглядят хуже. Может быть как прозрачным, так и непрозрачным. Поддерживается всеми браузерами.

Формат GIF достаточно тяжелый, т.к. он хранит каждый кадр как GIF-изображение без потерь.

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

Типы PNG:

  • PNG8 – c 256 цветами, для картинок с малым количеством цветов.
  • PNG24 – c 16 миллионами цветов. Подходит для многоцветных картинок с прозрачным фоном.

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

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

Не имеет прозрачности, отображается на всех браузерах. При сжатии через Adobe Photoshop можно устанавливать ползунок качества на 80, тогда вы получите хорошее качество при небольшом весе.

WebP – этот формат изображений имеет сжатие с потерями и без потерь качества. Разработан компанией Google. Основная задача – сильно уменьшить вес файла с сохранением качества. Поддерживает прозрачность. Отображается не во всех браузерах – из популярных пока только в Chrome, Opera и Firefox.

По данным Google, формат WebP сжимает без потерь лучше, чем PNG, и сжимает с потерями лучше, чем JPEG.

Формат WebP часто встречается в Яндекс.Картинках и Google.Картинках, а это значит, что всё больше сайтов переходят именно на этот формат графики.

Векторная графика работает совершенно иначе, чем растровая. Она строится из геометрических примитивов (точки, линии, кривые, многоугольники) и описывается математическими формулами.

SVG – язык разметки масштабируемой векторной графики, идеально подходящий для логотипов и иконок, и в целом для всей графики, кроме изображений. Может быть анимированным. Вес намного меньше растровой графики, без потери качества при изменении масштаба картинки. Еще одной особенностью данного формата является то, что он совместим с CSS и JavaScript. Все современные браузеры поддерживают SVG.

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

Формат Фотографии Графика Анимация Прозрачность Браузер
GIF Не рекомендуется Не рекомендуется Да Да Все
PNG Возможно Да Нет Да Все
JPEG Да Возможно Нет Нет Все
WebP Да Да Да Да Chrome, Firefox, Opera, Pale Moon
SVG Нет Да Да Да Chrome, IE, Firefox, Netscape, Opera, Safari


Как SEO-оптимизировать картинки на сайте?

Подписи к изображениям

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

Вес разных файлов на странице

Столько места занимают разные типы файлов на странице

Атрибуты alt и title

Alt – альтернативное описание, которое выводится, если картинка по каким-то причинам не загрузилась. Описание даёт понять пользователю, что за изображение размещено на странице.

Не загрузившаяся картинка

Пример, как выглядит не загрузившаяся картинка

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

  • При заполнении атрибута alt учитывайте, что оно должно точно описывать изображаемое – просто посмотрите на картинку и опишите несколькими словами то, что видите.
  • К разным изображениям на одной и той же странице сайта должны быть разные alt.
  • Добавляйте в атрибуты ключевые слова, которые естественно и точно описывают картинку, но не злоупотребляйте ими.
  • Для графики, которая относится к дизайну сайта, заполнять атрибут alt не нужно.
  • Если использовать изображение в качестве ссылки, то текст в атрибуте alt поможет поисковым системам понять содержание страницы, на которую ведет ссылка.
  • Оптимально использовать 3-7 слов и не более 250 символов.

Например, на картинке изображен кот породы сфинкс в одежде:

<img src="/kot-sfinks.jpg" /> – без атрибута alt не рекомендуется

<img src="/kot-sfinks.jpg" alt="кот сфинкс коты породы сфинкс лысый кот сфинкс" /> – перечисление ключевых слов не рекомендуется

<img src="/kot-sfinks.jpg" alt="кот сфинкс" /> – правильно, но иногда изображение позволяет написать еще более конкретно

<img src="/kot-sfinks.jpg" alt="кот сфинкс в одежде" /> - правильно

Title – дополнительная информация, которая видна, если навести курсор на картинку. Является не обязательным атрибутом и больше ориентирован на посетителей сайта для дополнительных подсказок. Основная цель – давать подсказки пользователям о содержимом.

  • Title должно соответствовать тому, что изображено.
  • Информация должна быть краткой и естественной.
  • Ключевые слова можно употреблять, но совсем не обязательно, и важно не переспамить.

Пример использования title. Например, в статье размещены фотографии с разными породами сфинксов:

<img src="/kanadskiy-sfinks.jpg" alt="Канадский сфинкс на стуле" title="Канадский сфинкс" />

<img src="/donskoy-sfinks.jpg" alt="Донской сфинкс играет с верёвочкой" title="Донской сфинкс" />

<img src="/kot-peterbold.jpg" alt="Кот породы петерболд в свитере" title="Петерболд" />

Оба атрибута задаются внутри html-тега img. В идеале alt и title не должны быть одинаковыми, но всё-таки допускается, что они могут совпадать по содержимому, т.к. это лучше, чем если они будут пустыми.

ЧПУ названия файла изображения

Вместе с информацией из атрибутов, подписей и текста, поисковые системы получают данные о теме изображений из названия файла, поэтому рекомендуется внедрять ЧПУ (Человекопонятный URL) с латиницей и дефисами вместо пробелов:

  • navolochka-iz-byazi.jpg – будет предпочтительнее, чем IMG_7535.JPG.
  • portativnaya-kolonka-jbl.jpg – будет предпочтительнее, чем kupit-portativnuyu-kolonku-nedorogo.jpg.

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

Sitemap-image.xml

Sitemap-image.xml – это аналог sitemap.xml, только для изображений, содержащий адреса страниц и адреса графических файлов на них. Благодаря ему можно указать роботам на труднодоступные файлы, если они подгружаются с помощью JS или Ajax. Также для крупных сайтов со сложным уровнем вложенности создание карты сайта XML поможет облегчить нахождение файлов для индексирования.

  • Карту изображений можно сделать как отдельно, так и сделать в составе основного sitemap.xml.
  • Можно указывать до 1000 изображений для каждого URL.
  • Можно добавлять URL с других доменов, если такие используются на сайте.

<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://site.ru/blog/instruktsiya-po-regulirovke-vkhodnoy-dveri/</loc>
<image:image>
<image:loc>https://site.ru/images/deformaziya-polotna.png</image:loc>
</image:image>
<image:image>
<image:loc>https://site.ru/images/instrumenty.jpg</image:loc>
</image:image>
<image:image>
<image:loc>https://site.ru/images/regulirovka-dveri.png</image:loc>
</image:image>
<image:image>
<image:loc>https://site.ru/images/skrip-dveri.jpg</image:loc>
</image:image>
<image:image>
<image:loc>https://site.ru/images/uplotnitel-dveri.jpg</image:loc>
</image:image>
</url>
</urlset>

Для индексации отдельного sitemap-image.xml добавьте файл в Яндекс.Вебмастер и Google Search Console. В robots.txt можно указать дополнительную директиву «Sitemap:» со ссылкой на карту изображений сразу под основной картой:

Sitemap: https://site.ru/sitemap.xml
Sitemap: https://site.ru/image-sitemap.xml

Открыть индексацию в robots.txt

Все усилия по SEO-оптимизации изображений на сайте будут напрасны, если вы не проверите, не закрыта ли индексация в файле с инструкциями для поисковых систем – robots.txt.

Сделать проверку можно с помощью инструментов «Анализ robots.txt» в Яндекс.Вебмастере и "Проверить страницу на сайте" в Google Search Console.

Яндекс.Вебмастер

Скопируйте адрес разных типов изображений на вашем сайте, например, превью и детальное изображение товара, картинки в блоге и пр. и вставьте их в поле «Разрешены ли URL?». Если они все хранятся в одном месте, можно проверить только один вид адреса.

Яндекс.Вебмастер Разрешены ли URL

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

Google Search Console

Вставьте ссылку на изображение в поле «Проверка URL». После получения данных из индекса Google нажмите на кнопку «Проверить страницу на сайте». В случае блокировки в robots.txt Google сообщит об этом.

Google Search Console Проверка URL

Для разрешения индексации можно открыть как саму папку (удалив запрещающую директиву), так и формат файла, пример:

  • Disallow: /upload/ – удалить директиву, если вы хотите, чтобы всё, что находится в этой папке индексировалось.
  • Allow: /upload/iblock/*/*.jpg – открыть индексацию для всех файлов с форматом jpg внутри папки /iblock/.

Семантическая разметка Schema.org

Размечая изображения на сайте семантической разметкой Schema.org типом ImageObject можно улучшить представление сайта в результатах поиска и на сервисах поиска картинок поисковых систем Яндекса и Google.

ImageObject может быть как самостоятельной разметкой, так и в составе других типов, например: Organization, Blog, Article, Review и др.

Для ImageObject можно использовать следующие свойства:

  • contentUrl – ссылка на изображение;
  • name – название;
  • caption – подпись;
  • description – описание;
  • height – высота;
  • width – ширина.

На самом деле свойств гораздо больше, их можно посмотреть на официальном сайте schema.org.

<div itemscope itemtype="https://schema.org/ImageObject">
<h2 itemprop="name">Коты породы сфинкс</h2>
<img src="https://site.ru/kot-sfinks.jpg" itemprop="contentUrl" alt="Кот сфинкс в одежде" width="600" height="450" />
<p itemprop="caption">Берегите сфинкса от холода и сквозняков.</p>
<p itemprop="description">Следите, чтобы животное постоянно было в тепле и не переохлаждалось, иначе оно может простыть. Если в квартире прохладно, на сфинкса можно надевать специальную одежду.</p>
<meta content="600" itemprop="width">
<meta content="450" itemprop="height">
</div>

Не забудьте проверить написанную семантическую разметку в валидаторе, например в «Проверка структурированных данных от Google».

Валидатор микроразметки Google

Также можно использовать меньше свойств, чем мы привели в примере, например, если ограничиться минимумом, то можно использовать только тип ImageObject и ссылку – contentUrl.

Адаптивные изображения

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

Чтобы сделать изображения адаптивными помогут атрибуты: srcset и sizes.

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

Адаптивность можно задать с помощью ширины изображения (дескриптор w):

<img src="primerone.jpg" srcset="primertwo.jpg 100w, primerthree.jpg 500w, primerfour.jpg 1000w" />

И с помощью плотности пикселей, которое представляет собой положительное десятичное число с дескриптором х. Если дескриптор не задан, то по умолчанию он равен 1x.

<img src="primerone.jpg" srcset="primertwo.jpg 2x, primerthree.jpg 3x, primerfour.jpg 4x" />

Sizes. Атрибут sizes позволяет определить размер изображения, которое должно отобразиться на экране в соответствии с медиа-условиями. Для этого могут использовать условия max-height, min-height, max-width, min-width и orientation.

<img src="primerone.jpg" srcset="primertwo.jpg 100w, primerthree.jpg 500w, primerfour.jpg 1000w" sizes="(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em, (not (orientation: portrait)) 300px, ((orientation: landscape) or (min-width: 1000px)) 50vw, 100vw" />

Дополнительные технологии оптимизации изображений

Lazy loading

Lazy loading или «ленивая загрузка» — это технология отложенной загрузки медиафайлов (избражений, видео и пр.), когда они загружаются не сразу вместе с запрашиваемой страницей, а по мере необходимости для пользователя. Есть три вида настройки lazy loading:

  • Скроллинг – при переходе на страницу сайта сначала подгружаются элементы видимой части, все остальные подгрузятся тогда, когда пользователь долистает до них. Чаще всего используется именно этот способ.
  • Клик – контент загружается при клике на кнопку, напр. кнопка «Подробнее». Используется для скрытия неважных изображений, т.к. заставляет пользователя тратить усилия на клики.
  • Фоновый режим – браузер загружает контент в фоновом режиме, когда пользователь оставил вкладку открытой и бездействует. Подходит для загрузки страниц с большими картинками.

Реализовать можно с помощью функционала CMS, установки плагина или написания скриптов.

  • Для WordPress плагины Lazy Load, BJ Lazy Load, a3 Lazy Load.
  • Для Joomla плагины JSLazyLoading, LLFJ.
  • Для Opencart плагин Lazy Load Images.
  • Для Drupal модуль Lazy-load, Image Lazyloader.

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

  • использовать IntersectionObserver API;
  • удостовериться, что JavaScript поддерживает загрузку контента по мере его появления в области просмотра;
  • дополнительно использовать постраничную загрузку.

GZIP-сжатие

GZIP-сжатие – создаёт архивацию передаваемых файлов на стороне сервера. Разархивирование данных происходит мгновенно и на стороне браузера пользователя без каких-либо потерь.

GZIP-сжатие файлов используется на основных серверах Apache и Nginx.

  • На Apache включается через .htaccess с активацией модуля mod_deflate, mod_gzip (динамическое сжатие), mod_rewrite (статическое сжатие).
  • Для Nginx вписать в файл конфигурации /etc/nginx/nginx.conf необходимый код (gzip on;) и перезагрузить сервер. Либо можно обратиться в техподдержку вашего хостинга с просьбой включить сжатие на сервере.

Также можно включить сжатие с помощью плагинов и функционала CMS:

  • Для WordPress плагины Hyper Cache, W3 Total Cache, WP Super Cache, Gzip Compression.
  • Для Joomla в настройках CMS – Общие настройки > Сервер > Gzip-сжатие страниц.
  • Для Opencart в настройках CMS – Система-Настройки > Сервер > Уровень GZIP сжатия и выставляем от 0 до 9.
  • Для Bitrix модуль «Компрессия».

Кэширование браузера

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

Включить кеширование браузера можно с помощью функционала CMS, дополнительных плагинов и в .htaccess:

  • Включение в .htaccess модулей mod_headers, mod_expires.
  • Для WordPress плагиныW3 Total Cache, WP Super Cache, Hyper Cache, WP Fastest Cache.
  • Для Joomla в настройках CMS – Расширения > Менеджер плагинов > Система - Кэш.
  • Для Drupal в настройках CMS – Системные настройки > Раздел: Кеширование.

CDN

CDN (сеть доставки контента) – доставляет статический контент (изображения, стили, скрипты) c нескольких серверов, удаленно расположенных друг от друга. Благодаря этому значительно уменьшается время загрузки контента на сайте, т.к. чем дальше пользователь находится от веб-сервера, тем дольше загружаются данные. При подключении CDN обычно используется сжатие без потерь. В CDN нуждаются сайты с очень большим объемом файлов и нацеленные на аудиторию по всему миру.

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

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

Сервисы и программы

Tiny PNG – бесплатный онлайн-сервис позволяющий сжимать с потерями качества файлы форматом .jpg и .png. За раз можно загружать 20 файлов, с весом каждого не более 5 мб. После обработки, отобразится процент сжатия и итоговый размер картинки. Можно скачать как напрямую с сервиса, так и залить на Dropbox.

Tiny PNG

Optimizilla – бесплатный сервис, использующий сжатие с потерями. Работает только с форматами .jpg и .png. Можно загрузить до 20 файлов, которые будут храниться в течение 1 часа.

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

Optimizilla

Compressor.io – бесплатный онлайн-инструмент со сжатием с потерями и без (для .jpg, .png). Работает с файлами форматов .jpg, .png, .gif и .svg. Лимит размера файла 10 мб.

При загрузке графического объекта выбирается вид сжатия, после чего предлагается сравнить оригинальную и итоговую картинку после компрессии. Далее можно скачать готовый файл или переслать его в Dropbox или Google Drive.

Compressor.io

Bulkresizephotos – бесплатный онлайн-сервис, позволяющий гибко конвертировать файлы форматов .jpg, .png и .webp. За раз можно загрузить до 150 файлов.

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

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

Bulkresizephotos

SVGOMG – бесплатный онлайн-инструмент, размещенный на сервисе GitHub для сжатия файлов .svg.

После загрузки открываются настройки:

  • показать оригинал;
  • сравнить со сжатием gzip;
  • почистить код;
  • задать уровень точности линий.

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

SVGOMG

Svgminify – еще один бесплатный онлайн-сервис, который позволяет удалять избыточную информацию из файлов с расширением .svg и .svgl. Максимальный размер файла для загрузки составляет 12 мб. Если, загружаемый файл и так имеет минимальный размер и удалять нечего, сервис об этом сообщит.

Svgminify

Compresss – бесплатный онлайн-сервис по сжатию файлов форматов .png, .jpg, .gif, .svg, .webp. Можно редактировать до 100 файлов по 40 мб каждый.

Алгоритм работы следующий:

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

Compresss

Kraken.io – онлайн-сервис с платной и бесплатной версией, а также плагины для WordPress и Magento. Имеет три вида сжатия, с потерями, без и эксперт (с гибкой функцией настройки уровня качества). В бесплатной версии загружаемое изображение должно весить не более 1 мб. После обработки сервис покажет исходный и итоговый размер, процент сжатия и подобное. Результат можно скачать либо переслать на Dropbox.

Kraken.io

Adobe Photoshop – платный графический редактор для Windows и Mac OS. Если вы имеете дело с большим размером файла, то его сначала нужно урезать до необходимого размера: «Изображение» -> «Размер изображения» (редактируйте поля «ширина», «высота») и обязательно включите ресамплинг, если вам необходимо сохранить пропорции.

Оптимизация изображений в Adobe Photoshop

Чтобы обрезать или расширить края используйте инструмент «Рамка».

Инструмент Рамка в Adobe Photoshop

В зависимости от установленной версии функция оптимизации изображения находится по-разному. Так, например, в версии Adobe Photoshop СС это находится в «Файл» -> «Экспортировать» -> «Сохранить для Web», в ранних версия в «Файл» -> «Сохранить для Web».

Сохранить для Web в Adobe Photoshop

После включения этой функции можно выбрать как показывать отображение: «Исходное», «Оптимизация», «2 варианта», «4 варианта» – в этом варианте он показывает, как будет выглядеть изображение при разном качестве, установленное в оригинал, 80, 40 и 20.

Сохранить для Web в Adobe Photoshop, разное качество

В зависимости от используемого формата изображения будут меняться его настройки:

  • Для JPEG настраивайте такие параметры как «Качество», «Размытие», «Прогрессивный», размер и пр.
  • Для PNG-8 алгоритм сокращения цветов (перцепционная, селективная и пр.), Web-цвета, дизеринг, чересстрочно, размер и пр.
  • Для PNG-24 прозрачность и чересстрочно, размер и пр.
  • Для GIF цвета, дизеринг, Web-цвета, чересстрочно, размер и пр.

RIOT (Radical Image Optimization Tool) – бесплатная программа для Windows с простым интерфейсом. В ней можно:

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

Для удобства одновременно отображает исходная и оптимизированная картинка.

Radical Image Optimization Tool

Сравним оптимизацию изображений при стандартных настройках в форматах .png и .jpg в таблице: JPG наиболее сильно сжала программа RIOT, хуже – Adobe Photoshop, а PNG Compressor.io, хуже – Bulkresizephotos.

Оригинал -> JPG 247 КБ PNG 549 КБ
Tiny PNG 135,4 КБ 168,2 КБ
Optimizilla 100 КБ 177 КБ
Compressor.io 247 КБ 129,48 КБ
Bulkresizephotos 89,00 КБ 492,44 КБ
Compresss 145,22 КБ 402,55 КБ
Kraken.io 182,57 КБ 170,50 КБ
Adobe Photoshop 219 КБ 324 КБ
RIOT 86,29 КБ 310,02 КБ

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

Автор: Мария Саловарова