Центр обучения Joomla
    Сжатие картинок на сайте Joomla 3+

    Сжатие картинок на сайте Joomla 3 и выше

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

    Содержание

    1. Как определить общий вес файлов изображений на веб-странице
    2. Как определить картинки, которые необходимо сжать
    3. Особенности сжатия картинок разных форматов
    4. Как сжать картинки на сайте

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

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

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

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

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

    Доля картинок: 34,3%
    Доля картинок: 34,3%
    Общий вес картинок: 642 Кб
    Общий вес картинок: 642 Кб

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

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

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

    Доля картинок: 52%
    Доля картинок: 52%
    Общий вес картинок: 1570 Кб
    Общий вес картинок: 1570 Кб

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

    Чтобы узнать, требуется ли сжатие картинок на странице сайта, можно воспользоваться сервисом 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 практически не поддаются оптимизации.

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

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

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

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

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

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

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

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

    kraken.io
    kraken.io
    tinypng.com
    tinypng.com

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

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

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

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

    Ссылка на скачивание сжатых картинок
    Ссылка на скачивание сжатых картинок

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

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

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

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

    Сжатие картинок на 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. нажмите Оптимизация изображений

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

    Плагин JCH Optimize
    1. Плагин JCH Optimize
    Ввод идентификатора загрузки
    2. Ввод идентификатора загрузки
    Выбор картинок для сжатия
    3. Выбор картинок для сжатия

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

    Как быстро разобраться в Joomla?

      Центр Обучения Joomla!

      "Все, что нужно знать о Joomla в одном месте"

      Joomla Последняя версия
      Joomla! — 3.9.1

      Скачать

      Курс "Как создать свой сервис рассылки на Joomla?"

      Чтобы получить бесплатный доступ введите имя и ваш е-маил. Доступ будет выслан на ваш е-маил адрес.

       

      Базовый курс по Joomla 3.9

      В КУРСЕ ВАС ЖДЕТ:

      Видеоуроки по Joomla 3.9

      После уроков вы: зарегистрируете домен и хостинг, установите и правильно настроите CMS Joomla, установите и настроите шаблон, получите понимание как работать с Joomla.

      Лучшие расширения для Joomla

      Вы получите список и описание лучших бесплатных и платных расширений для Joomla.

      Пошаговый процесс создания сайта

      Выполните 22 действия по чек-листу и ваш сайт готов.

      Хостинг в подарок

      3 месяца качественного хостинга в подарок для беззаботного начала работы над своим проектом.
      Введите e-mail для которого нужно выставить доступ к курсу: