Сжатие картинок на сайте Joomla

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • JPG (JPEG)
  • PNG
  • GIF

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

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

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

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

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

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

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

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

4. Как сжать картинки на сайте

Существуют стандартные способы оптимизации весаизображений независимо от CMS, на которой функционирует сайт:

  • с помощью веб-сервисов (tinypng.com, kraken.io)
  • с помощью Google Page Speed
  • с помощью десктопных программ

Кроме того, для сайтов на Joomla 3 предусмотрен отдельный вариант автоматического сжатия картинок с помощью плагина JCH Optimize Pro.

Рассмотрим перечисленные способы более подробно.

4.1. Сжатие изображений с помощью веб-сервисов

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

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

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

4.2. Сжатие изображений с помощью Google Page Speed

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

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

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

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

  • оптимизированные JPG-файлы могут заметно потерять в качестве
  • картинки могут быть обрезаны в соответствии с размерами, обозначенными в атрибутах высоты и ширины для тега img, что не всегда приемлемо

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

4.3. Сжатие изображений с помощью десктопных программ

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

4.4. Сжатие картинок на Joomla с помощью JCH Optimize Pro

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

Для сжатия картинок посредством JCH Optimize Pro:

  1. приобретите плагин на сайте разработчика
  2. установите его через менеджер расширений Joomla
  3. перейдите в РасширенияПлагины
  4. найдите плагин JCH Optimize Pro
  5. перейдите в его настройки
  6. перейдите во вкладку Параметры (Pro-версия)
  7. введите идентификатор загрузки (из аккаунта на сайте разработчика)
  8. перейдите во вкладку Оптимизация изображений
  9. выберите папку или отдельный файл изображения
  10. нажмите Оптимизация изображений

Резервное копирование картинок перед оптимизацией произойдет согласно значению в опции Резервное копирование изображений.

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

Добавить комментарий

Отправить
Рассылка

Введите свой адрес электронной почты, и мы будем держать вас в курсе событий!

Пожалуйста, заполните обязательное поле.
Joomla.center is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder.
Проект joomla.center не относится к компании Open Source Matters или проекту Joomla! Название Joomla! и логотип используются в рамках ограниченной лицензии, определённой компанией Open Source Matters.