1. Как определить общий вес файлов изображений на веб-странице?
    1. Тест страницы с предварительно сжатыми картинками
    2. Тест страницы с несжатыми картинками
  2. Как определить картинки, которые необходимо сжать?
  3. Особенности сжатия картинок разных форматов
    1. Сжатие JPG-файлов
    2. Сжатие PNG-файлов
    3. Сжатие GIF-файлов
  4. Как сжать картинки на сайте?
    1. Сжатие с помощью веб-сервисов
    2. Сжатие с помощью Google Page Speed
    3. Сжатие с помощью десктопных программ
    4. Сжатие с помощью JCH Optimize Pro

Изображения составляют львиную долю веса веб-страниц. В данном материале поговорим о том, как сжать (уменьшить размер) файлы картинок, тем самым значительно увеличив скорость загрузки сайта на Joomla.

Как определить общий вес файлов изображений на веб-странице?

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

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

Тест страницы с предварительно сжатыми картинками

Рассмотрим результаты теста на примере главной страницы нашего сайта https://joomla.center

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

Тест страницы с несжатыми картинками

Теперь посмотрим на результаты тестирования главной страницы небезызвестного портала kinopoisk.ru

Как определить картинки, которые необходимо сжать?

Чтобы узнать, требуется ли сжатие картинок на странице сайта, можно воспользоваться сервисом Google Page Speed.

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

Таким образом, сжатие картинок уменьшит вес проверенной страницы на 560 Кб (около 20%).

Особенности сжатия картинок разных форматов

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

Существует 3 основных вида графических файлов, широко применяемых в сети Интернет:

  • JPG (JPEG)
  • PNG
  • GIF

Сжатие JPG-файлов

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

Сжатие PNG-файлов

Файлы в формате PNG бывают 2-х типов в зависимости от глубины цвета: 24- и 8-битные.

Оптимизация 24-х битных заключается в удалении лишних данных о неприменяемых в картинке цветах, что приводит их к 8-битному формату (индексированным цветам).

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

Сжатие GIF-файлов

GIF-файлы имеют место быть лишь в качестве анимированных картинок, т. к. все они имеют глубину цвета не более 8 бит (до 256 цветов) и аналогичные файлы в формате PNG-8 будут весить меньше. Иначе говоря, картинки в формате GIF практически не поддаются оптимизации.

Сжатие с помощью веб-сервисов

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

Наиболее популярными веб-сервисами по оптимизации веса изображений являются tinypng.com (он же tinyjpg.com) и kraken.io. Оба сервиса просты в использовании и отображают степень сжатия картинок на выходе в процентах.

Обозначенные сервисы являются бесплатными к использованию, но при этом имеют свои ограничения (по количеству файлов в tinypng.com и по общему весу файлов в kraken.io), которые снимаются при оплате тарифа. К преимуществам сервиса kraken.io можно отнести возможность выбора степени оптимизации картинок.

Сжатие с помощью Google Page Speed

Этот способ подходит для уже существующих страниц с картинками.

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

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

Однако следует иметь ввиду некоторые особенности:

Поэтому прежде, чем применять оптимизированные в Page Speed картинки, следует их внимательно осмотреть на предмет потери качества и изменения геометрических размеров.

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

Упоминаемые термины:

Joomla, Материал, Плагин, Расширение, CMS, JCH Optimize