Мазун Оксана Владимировна

магистр кафедры Информационно-сетевой инженерии

Харьковский национальный университет радиоэлектроники

г. Харьков

 

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

  Ключевые слова: оптимизация для веб, оптимизация изображений, сжатие, веб-разработка.

 

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

  Сложно точно выяснить, насколько теряется качество при сжатии изображений, так как это во многом зависит от источника графики. Некоторые JPG изображения можно уменьшить всего на 50-100 байт. Обычно нормальную интернет-графику нужно сжимать на 10-40%, без потери качества изображения (также можно это реализовать и с уменьшением количества цветов или с перекодированием файлов JPEG в другие форматы). Но в идеале для сжатия изображений использовать специальные программы или веб-сервисы, и некоторые из них будут далее в этой публикации.

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

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

  • нужно ли высокое качество изображения?
  • нужна ли анимация?
  • нужна ли прозрачность? [2].

  Существуют три стандартных формата изображений: GIF, PNG и JPEG. Кроме них некоторые браузеры также поддерживают новые форматы WebP и JPEG XR, для которых доступно большее сжатие и дополнительные возможности. Какой формат необходимо выбрать?

 

Рис. 1 – Алгоритм выбора формата изображения для веб-сайта

 

  PNG – простой формат, поддерживающий прозрачность и сжатие без потерь. Он позволяет выбрать альфа-канал для изображения, чтобы замаскировать прозрачные области.

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

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

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

  Конечно, новый формат пока не поддерживается всеми браузерами, поэтому веб-разработчики, которые уже внедрили его, сейчас сталкиваются с проблемами. Несмотря на это, 30% экономия, по сравнению с JPG наряду с возможностью адаптации формата на уровне сервера доказывают, что WebP – доминирующий формат для любых сайтов, где размер изображений представляет проблему.

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

Таблица №1

Он-лайн инструменты для сжатия изображений и их характеристики

Название

Ссылка

Описание

Optimizilla

optimizilla.com

Сжимает JPEG и PNG с использованием различных алгоритмов сжатия

TinyPNG

tinypng.com

Сжимает JPEG и PNG с потерями

Compressor.io

compressor.io

Сжимает JPEG, PNG, GIF с потерями и без потерь

 

Литература:

1. Оптимизация изображений [Электронный ресурс] / Google Developers. – Режим доступа: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization 5.05.2017 г. – Загол. c экрана.

2. Image Compression for Web Developers [Электронный ресурс] / HTML5 Rocks. Режим доступа: https://www.html5rocks.com/en/tutorials/speed/img-compression/ 17.09.2013 г. – Загол. c экрана.