Большая часть трафика загрузки состоит из изображений. В результате, чем меньше вы сможете сделать загружаемые изображения, тем лучше будет взаимодействие с сетью, которое ваше приложение сможет предоставить пользователям. На этой странице представлены рекомендации по уменьшению размера файлов изображений и повышению их удобства для работы в сети.
О форматах изображений
Приложения Android обычно используют изображения в одном или нескольких следующих форматах: AVIF, PNG, JPG и WebP. Для каждого из этих форматов можно предпринять действия по уменьшению размера изображения.
АВИФ
Android 12 (уровень API 31) и более поздние версии поддерживают изображения, использующие формат файлов изображений AV1 (AVIF). AVIF — это формат контейнера для изображений и последовательностей изображений, закодированных с использованием AV1. AVIF использует преимущества внутрикадрового кодирования контента при сжатии видео. Это значительно улучшает качество изображения при том же размере файла по сравнению со старыми форматами изображений, такими как JPEG. Подробную информацию о преимуществах этого формата можно найти в блоге Джейка Арчибальда.
PNG
Ключом к уменьшению размера PNG-файлов является уменьшение количества уникальных цветов, используемых в каждой строке пикселей, составляющих изображение. Используя меньше цветов, вы улучшаете потенциал сжатия на всех других этапах конвейера.
Уменьшение количества уникальных цветов имеет существенное значение, поскольку эффективность сжатия PNG частично зависит от степени изменения цветов соседних пикселей по горизонтали. Таким образом, уменьшение количества уникальных цветов в каждой строке изображений PNG может помочь уменьшить размер их файлов.
Принимая решение о том, следует ли следовать этой стратегии, вы должны иметь в виду, что уменьшение количества уникальных цветов фактически равносильно применению к изображению этапа кодирования с потерями. Однако инструмент кодирования может не очень хорошо судить о том, насколько плохо выглядит для человеческого глаза кажущаяся небольшой ошибка. Поэтому вам следует выполнять эту работу вручную, чтобы обеспечить правильный баланс между эффективным сжатием и приемлемым качеством изображения.
Есть два особенно полезных подхода: стремление к индексированным форматам и применение векторного квантования.
Стремитесь к индексированным форматам
Любую попытку уменьшения цвета следует начинать с попытки оптимизировать цвета, чтобы можно было использовать ИНДЕКСИРОВАННЫЙ формат при экспорте изображения в формате PNG. Цветовой режим INDEXED работает путем выбора 256 лучших цветов и замены всех значений пикселей индексами в этой цветовой палитре. Результатом является сокращение с 16 миллионов (потенциальных) цветов до всего 256 цветов: с 3 (без прозрачности) или 4 (с прозрачностью) байтов на пиксель до 1 байта на пиксель. Это изменение представляет собой существенное уменьшение размера файла на первом этапе.
На рисунке 1 показано изображение и его индексированный вариант.
Рисунок 1. Изображение до и после конвертации в INDEXED формат.
На рисунке 2 показана цветовая палитра изображения на рисунке 1:
Рисунок 2. Цветовая палитра изображения на рисунке 1.
Представление вашего изображения в виде изображения с палитрой во многом способствует значительному увеличению размера файла, поэтому стоит выяснить, можно ли преобразовать большинство ваших изображений.
Конечно, не каждое изображение можно точно представить, используя всего 256 цветов. Например, для правильного отображения некоторых изображений может потребоваться 257, 310, 512 или 912 цветов. В таких случаях векторное квантование также может быть полезным.
Векторное квантование
Процесс создания индексированного изображения лучше описать как векторное квантование (VQ). VQ служит процессом округления многомерных чисел. В этом процессе все цвета вашего изображения группируются на основе их сходства. Для данной группы все цвета в этой группе заменяются одним значением центральной точки , что сводит к минимуму ошибку для цветов в этой ячейке (или «сайте», если вы используете терминологию Вороного). На рисунке 3 зеленые точки представляют входные цвета, а красные точки — центральные точки, которые заменяют входные цвета. Каждая ячейка ограничена синими линиями.
Рисунок 3. Применение векторного квантования к цветам изображения.
Результат применения VQ к изображению уменьшает количество уникальных цветов, заменяя каждую группу цветов одним цветом, который «довольно близок» по визуальному качеству.
Этот метод также позволяет вам определить максимальное количество уникальных цветов в вашем изображении. Например, на рисунке 4 показана голова попугая в 16,7 миллионах цветов (24 бита на пиксель или бит/пиксель) наряду с версией, которая позволяет использовать только 16 (3 бита на пиксель) уникальных цветов.
Рисунок 4. Изображение до и после применения векторной количественной оценки.
Сразу видно, что происходит потеря качества; большая часть цветов градиента была заменена, что придало изображению эффект полос. Для этого изображения требуется более 16 уникальных цветов.
Настройка этапа VQ в вашем конвейере может помочь вам лучше понять истинное количество уникальных цветов, используемых в вашем изображении, и значительно их сократить. Существует ряд легкодоступных инструментов, которые можно использовать для реализации этой техники.
JPG
Если вы используете изображения JPG, вы можете внести несколько небольших изменений, которые потенциально обеспечат значительную экономию размера файла. К ним относятся:
- Создание файла меньшего размера с помощью различных методов кодирования (без ущерба для качества).
- Немного отрегулируйте качество, чтобы добиться лучшего сжатия.
Следование этим стратегиям часто может привести к уменьшению размера файла до 25%.
Выбирая инструменты, помните, что инструменты экспорта фотографий могут вставлять в ваши изображения ненужные метаданные, например информацию GPS. Как минимум, попробуйте использовать существующие инструменты, чтобы удалить эту информацию из ваших файлов.
ВебП
WebP — это новый формат изображений, поддерживаемый с Android 4.2.1 (уровень API 17). Этот формат обеспечивает превосходное сжатие изображений в Интернете без потерь и с потерями. Используя WebP, разработчики могут создавать меньшие по размеру и более насыщенные изображения. Файлы изображений WebP без потерь в среднем на 26% меньше , чем PNG. Эти файлы изображений также поддерживают прозрачность (также известную как альфа-канал) за счет увеличения всего на 22 % байтов.
Изображения WebP с потерями на 25–34 % меньше , чем сопоставимые изображения JPG при эквивалентных показателях качества SSIM . В случаях, когда сжатие RGB с потерями приемлемо, WebP с потерями также поддерживает прозрачность, обычно создавая размеры файлов в 3 раза меньшие, чем PNG.
Для получения дополнительной информации о WebP посетите сайт WebP .
Вы можете конвертировать существующие изображения BMP, JPG, PNG или статические GIF в формат WebP с помощью Android Studio. Дополнительные сведения см. в разделе Создание изображений WebP с помощью Android Studio .
Выбор формата
Разные форматы изображений подходят для разных типов изображений. JPG и PNG имеют совершенно разные процессы сжатия и дают совершенно разные результаты.
Выбор между PNG и JPG часто сводится к сложности самого изображения. На рис. 5 показаны два изображения, которые получаются совершенно по-разному в зависимости от того, какую схему сжатия применил разработчик. Изображение слева содержит множество мелких деталей, поэтому его более эффективно сжимать в формате JPG. Изображение справа с участками одного цвета более эффективно сжимается с помощью PNG.
Рисунок 5. Подходящие случаи для JPG и PNG
WebP как формат может поддерживать режимы как с потерями, так и без потерь, что делает его идеальной заменой PNG и JPG. Единственное, что следует иметь в виду, это то, что он имеет встроенную поддержку только на устройствах под управлением Android 4.2.1 (уровень API 17) и выше. К счастью, подавляющее большинство устройств удовлетворяют этому требованию.
На рис. 6 представлена простая визуализация, которая поможет вам решить, какую схему сжатия использовать.
Рисунок 6. Выбор схемы сжатия
Определить оптимальные значения качества
Существует несколько методов, которые можно использовать для достижения правильного баланса между сжатием и качеством изображения. Один метод использует скалярные значения и поэтому работает только для JPG и WebP. Другой метод использует преимущества библиотеки Баттераугли и пригоден для всех форматов изображений.
Скалярные значения (только JPG и WebP)
Сила JPG и WebP заключается в том, что вы можете использовать скалярное значение, чтобы сбалансировать качество и размер файла. Хитрость заключается в том, чтобы выяснить, какое значение качества является правильным для вашего изображения. Слишком низкий уровень качества приводит к созданию файла небольшого размера за счет качества изображения. Слишком высокий уровень качества увеличивает размер файла, не принося заметной пользы пользователю.
Самое простое решение — выбрать какое-то немаксимальное значение и использовать его. Однако имейте в виду, что значение качества влияет на каждое изображение по-разному. Хотя качество 75 %, например, может выглядеть хорошо на большинстве изображений, в некоторых случаях оно может оказаться и неудовлетворительным. Вам следует обязательно протестировать выбранное вами максимальное значение на репрезентативной выборке изображений. Кроме того, обязательно выполняйте все тесты на исходных изображениях, а не на сжатых версиях.
Для крупных медиа-приложений, которые загружают и повторно отправляют миллионы файлов JPG в день, ручная настройка каждого ресурса нецелесообразна. Вы можете решить эту проблему, указав несколько разных уровней качества в зависимости от категории изображения. Например, вы можете установить 35% в качестве настройки качества для миниатюр, поскольку изображение меньшего размера скрывает больше артефактов сжатия.
Буттераугли
Проект Butteraugli — это библиотека для проверки порога психовизуальной ошибки изображения: точки, в которой зритель начинает замечать ухудшение изображения. Другими словами, этот проект пытается количественно оценить, насколько искажено ваше сжатое изображение.
Butteraugli позволяет вам определить цель по визуальному качеству, а затем запускать сжатие PNG, JPG, WebP с потерями и WebP без потерь. Затем вы можете выбрать изображение, которое наилучшим образом сочетает размер файла и уровень Буттераугли. На рисунке 7 показан пример того, как Баттераугли использовался для определения минимального уровня качества JPG, прежде чем визуальное искажение стало достаточно высоким, чтобы пользователь мог заметить проблему; в результате размер файла уменьшается примерно на 65%.
Рисунок 7. Изображение до и после применения технологии Буттераугли.
Баттераугли позволяет вам действовать на основе выходных или входных данных. То есть вы можете искать настройку самого низкого качества до того, как пользователь заметит заметные искажения в результирующем изображении, или вы можете итеративно устанавливать уровни искажения изображения, чтобы узнать связанные с ними уровни качества.
Размеры порций
Соблазнительно хранить на сервере изображение только с одним разрешением. Когда устройство обращается к изображению, сервер обслуживает его с этим разрешением и оставляет уменьшение масштаба устройству.
Такое решение удобно для разработчика, но потенциально болезненно для пользователя, поскольку решение заставляет пользователя загружать гораздо больше данных, чем ему необходимо. Вместо этого вам следует хранить изображения нескольких размеров и использовать тот размер, который наиболее подходит для конкретного случая использования. Например, для миниатюры предоставление фактической миниатюры изображения вместо предоставления и уменьшения полноразмерной версии потребляет гораздо меньше пропускной способности сети.
Этот подход хорош для скорости загрузки и менее затратен для пользователей, которые могут использовать ограниченные или дозированные тарифные планы на передачу данных. Подобный подход также приводит к тому, что изображение занимает меньше места на устройстве и в основной памяти. В случае больших изображений, например 4K, такой подход также избавляет устройство от необходимости изменять размер изображений перед их загрузкой.
Для реализации этого подхода требуется наличие внутренней службы изображений для предоставления изображений в различных разрешениях с надлежащим кэшированием. Существуют существующие службы, которые могут помочь с этой задачей. Например, в App Engine уже установлена функция изменения размера изображения.
,Большая часть трафика загрузки состоит из изображений. В результате, чем меньше вы сможете сделать загружаемые изображения, тем лучше будет взаимодействие с сетью, которое ваше приложение сможет предоставить пользователям. На этой странице представлены рекомендации по уменьшению размера файлов изображений и повышению их удобства для работы в сети.
О форматах изображений
Приложения Android обычно используют изображения в одном или нескольких следующих форматах: AVIF, PNG, JPG и WebP. Для каждого из этих форматов можно предпринять действия по уменьшению размера изображения.
АВИФ
Android 12 (уровень API 31) и более поздние версии поддерживают изображения, использующие формат файлов изображений AV1 (AVIF). AVIF — это формат контейнера для изображений и последовательностей изображений, закодированных с использованием AV1. AVIF использует преимущества внутрикадрового кодирования контента при сжатии видео. Это значительно улучшает качество изображения при том же размере файла по сравнению со старыми форматами изображений, такими как JPEG. Подробную информацию о преимуществах этого формата можно найти в блоге Джейка Арчибальда.
PNG
Ключом к уменьшению размера PNG-файлов является уменьшение количества уникальных цветов, используемых в каждой строке пикселей, составляющих изображение. Используя меньше цветов, вы улучшаете потенциал сжатия на всех других этапах конвейера.
Уменьшение количества уникальных цветов имеет существенное значение, поскольку эффективность сжатия PNG частично зависит от степени изменения цветов соседних пикселей по горизонтали. Таким образом, уменьшение количества уникальных цветов в каждой строке изображений PNG может помочь уменьшить размер их файлов.
Принимая решение о том, следует ли следовать этой стратегии, вы должны иметь в виду, что уменьшение количества уникальных цветов фактически равносильно применению к изображению этапа кодирования с потерями. Однако инструмент кодирования может не очень хорошо судить о том, насколько плохо выглядит для человеческого глаза кажущаяся небольшой ошибка. Поэтому вам следует выполнять эту работу вручную, чтобы обеспечить правильный баланс между эффективным сжатием и приемлемым качеством изображения.
Есть два особенно полезных подхода: стремление к индексированным форматам и применение векторного квантования.
Стремитесь к индексированным форматам
Любую попытку уменьшения цвета следует начинать с попытки оптимизировать цвета, чтобы можно было использовать ИНДЕКСИРОВАННЫЙ формат при экспорте изображения в формате PNG. Цветовой режим INDEXED работает путем выбора 256 лучших цветов и замены всех значений пикселей индексами в этой цветовой палитре. Результатом является сокращение с 16 миллионов (потенциальных) цветов до всего 256 цветов: с 3 (без прозрачности) или 4 (с прозрачностью) байтов на пиксель до 1 байта на пиксель. Это изменение представляет собой существенное уменьшение размера файла на первом этапе.
На рисунке 1 показано изображение и его индексированный вариант.
Рисунок 1. Изображение до и после конвертации в INDEXED формат.
На рисунке 2 показана цветовая палитра изображения на рисунке 1:
Рисунок 2. Цветовая палитра изображения на рисунке 1.
Представление вашего изображения в виде изображения с палитрой во многом способствует значительному увеличению размера файла, поэтому стоит выяснить, можно ли преобразовать большинство ваших изображений.
Конечно, не каждое изображение можно точно представить, используя всего 256 цветов. Например, для правильного отображения некоторых изображений может потребоваться 257, 310, 512 или 912 цветов. В таких случаях векторное квантование также может быть полезным.
Векторное квантование
Процесс создания индексированного изображения лучше описать как векторное квантование (VQ). VQ служит процессом округления многомерных чисел. В этом процессе все цвета вашего изображения группируются на основе их сходства. Для данной группы все цвета в этой группе заменяются одним значением центральной точки , что сводит к минимуму ошибку для цветов в этой ячейке (или «сайте», если вы используете терминологию Вороного). На рисунке 3 зеленые точки представляют входные цвета, а красные точки — центральные точки, которые заменяют входные цвета. Каждая ячейка ограничена синими линиями.
Рисунок 3. Применение векторного квантования к цветам изображения.
Результат применения VQ к изображению уменьшает количество уникальных цветов, заменяя каждую группу цветов одним цветом, который «довольно близок» по визуальному качеству.
Этот метод также позволяет вам определить максимальное количество уникальных цветов в вашем изображении. Например, на рисунке 4 показана голова попугая в 16,7 миллионах цветов (24 бита на пиксель или бит/пиксель) наряду с версией, которая позволяет использовать только 16 (3 бита на пиксель) уникальных цветов.
Рисунок 4. Изображение до и после применения векторной количественной оценки.
Сразу видно, что происходит потеря качества; большая часть цветов градиента была заменена, что придало изображению эффект полос. Для этого изображения требуется более 16 уникальных цветов.
Настройка этапа VQ в вашем конвейере может помочь вам лучше понять истинное количество уникальных цветов, используемых в вашем изображении, и значительно их сократить. Существует ряд легкодоступных инструментов, которые можно использовать для реализации этой техники.
JPG
Если вы используете изображения JPG, вы можете внести несколько небольших изменений, которые потенциально обеспечат значительную экономию размера файла. К ним относятся:
- Создание файла меньшего размера с помощью различных методов кодирования (без ущерба для качества).
- Немного отрегулируйте качество, чтобы добиться лучшего сжатия.
Следование этим стратегиям часто может привести к уменьшению размера файла до 25%.
Выбирая инструменты, помните, что инструменты экспорта фотографий могут вставлять в ваши изображения ненужные метаданные, например информацию GPS. Как минимум, попробуйте использовать существующие инструменты, чтобы удалить эту информацию из ваших файлов.
ВебП
WebP — это новый формат изображений, поддерживаемый с Android 4.2.1 (уровень API 17). Этот формат обеспечивает превосходное сжатие изображений в Интернете без потерь и с потерями. Используя WebP, разработчики могут создавать меньшие по размеру и более насыщенные изображения. Файлы изображений WebP без потерь в среднем на 26% меньше , чем PNG. Эти файлы изображений также поддерживают прозрачность (также известную как альфа-канал) за счет увеличения всего на 22 % байтов.
Изображения WebP с потерями на 25–34 % меньше , чем сопоставимые изображения JPG при эквивалентных показателях качества SSIM . В случаях, когда сжатие RGB с потерями приемлемо, WebP с потерями также поддерживает прозрачность, обычно создавая размеры файлов в 3 раза меньшие, чем PNG.
Для получения дополнительной информации о WebP посетите сайт WebP .
Вы можете конвертировать существующие изображения BMP, JPG, PNG или статические GIF в формат WebP с помощью Android Studio. Дополнительные сведения см. в разделе Создание изображений WebP с помощью Android Studio .
Выбор формата
Разные форматы изображений подходят для разных типов изображений. JPG и PNG имеют совершенно разные процессы сжатия и дают совершенно разные результаты.
Выбор между PNG и JPG часто сводится к сложности самого изображения. На рис. 5 показаны два изображения, которые получаются совершенно по-разному в зависимости от того, какую схему сжатия применил разработчик. Изображение слева содержит множество мелких деталей, поэтому его более эффективно сжимать в формате JPG. Изображение справа с участками одного цвета более эффективно сжимается с помощью PNG.
Рисунок 5. Подходящие случаи для JPG и PNG
WebP как формат может поддерживать режимы как с потерями, так и без потерь, что делает его идеальной заменой PNG и JPG. Единственное, что следует иметь в виду, это то, что он имеет встроенную поддержку только на устройствах под управлением Android 4.2.1 (уровень API 17) и выше. К счастью, подавляющее большинство устройств удовлетворяют этому требованию.
На рис. 6 представлена простая визуализация, которая поможет вам решить, какую схему сжатия использовать.
Рисунок 6. Выбор схемы сжатия
Определить оптимальные значения качества
Существует несколько методов, которые можно использовать для достижения правильного баланса между сжатием и качеством изображения. Один метод использует скалярные значения и поэтому работает только для JPG и WebP. Другой метод использует преимущества библиотеки Баттераугли и пригоден для всех форматов изображений.
Скалярные значения (только JPG и WebP)
Сила JPG и WebP заключается в том, что вы можете использовать скалярное значение, чтобы сбалансировать качество и размер файла. Хитрость заключается в том, чтобы выяснить, какое значение качества является правильным для вашего изображения. Слишком низкий уровень качества приводит к созданию файла небольшого размера за счет качества изображения. Слишком высокий уровень качества увеличивает размер файла, не принося заметной пользы пользователю.
Самое простое решение — выбрать какое-то немаксимальное значение и использовать его. Однако имейте в виду, что значение качества влияет на каждое изображение по-разному. Хотя качество 75 %, например, может выглядеть хорошо на большинстве изображений, в некоторых случаях оно может оказаться и неудовлетворительным. Вам следует обязательно протестировать выбранное вами максимальное значение на репрезентативной выборке изображений. Кроме того, обязательно выполняйте все тесты на исходных изображениях, а не на сжатых версиях.
Для крупных медиа-приложений, которые загружают и повторно отправляют миллионы файлов JPG в день, ручная настройка каждого ресурса нецелесообразна. Вы можете решить эту проблему, указав несколько разных уровней качества в зависимости от категории изображения. Например, вы можете установить 35% в качестве настройки качества для миниатюр, поскольку изображение меньшего размера скрывает больше артефактов сжатия.
Буттераугли
Проект Butteraugli — это библиотека для проверки порога психовизуальной ошибки изображения: точки, в которой зритель начинает замечать ухудшение изображения. Другими словами, этот проект пытается количественно оценить, насколько искажено ваше сжатое изображение.
Butteraugli позволяет вам определить цель по визуальному качеству, а затем запускать сжатие PNG, JPG, WebP с потерями и WebP без потерь. Затем вы можете выбрать изображение, которое наилучшим образом сочетает размер файла и уровень Буттераугли. На рисунке 7 показан пример того, как Баттераугли использовался для определения минимального уровня качества JPG, прежде чем визуальное искажение стало достаточно высоким, чтобы пользователь мог заметить проблему; в результате размер файла уменьшается примерно на 65%.
Рисунок 7. Изображение до и после применения технологии Буттераугли.
Баттераугли позволяет вам действовать на основе выходных или входных данных. То есть вы можете искать настройку самого низкого качества до того, как пользователь заметит заметные искажения в результирующем изображении, или вы можете итеративно устанавливать уровни искажения изображения, чтобы узнать связанные с ними уровни качества.
Размеры порций
Соблазнительно хранить на сервере изображение только с одним разрешением. Когда устройство обращается к изображению, сервер обслуживает его с этим разрешением и оставляет уменьшение масштаба устройству.
Такое решение удобно для разработчика, но потенциально болезненно для пользователя, поскольку решение заставляет пользователя загружать гораздо больше данных, чем ему необходимо. Вместо этого вам следует хранить изображения нескольких размеров и использовать тот размер, который наиболее подходит для конкретного случая использования. Например, для миниатюры предоставление фактической миниатюры изображения вместо предоставления и уменьшения полноразмерной версии потребляет гораздо меньше пропускной способности сети.
Этот подход хорош для скорости загрузки и менее затратен для пользователей, которые могут использовать ограниченные или дозированные тарифные планы на передачу данных. Подобный подход также приводит к тому, что изображение занимает меньше места на устройстве и в основной памяти. В случае больших изображений, например 4K, такой подход также избавляет устройство от необходимости изменять размер изображений перед их загрузкой.
Для реализации этого подхода требуется наличие внутренней службы изображений для предоставления изображений в различных разрешениях с надлежащим кэшированием. Существуют существующие службы, которые могут помочь с этой задачей. Например, в App Engine уже установлена функция изменения размера изображения.
,Большая часть трафика загрузки состоит из изображений. В результате, чем меньше вы сможете сделать загружаемые изображения, тем лучше будет взаимодействие с сетью, которое ваше приложение сможет предоставить пользователям. На этой странице представлены рекомендации по уменьшению размера файлов изображений и повышению их удобства для работы в сети.
О форматах изображений
Приложения Android обычно используют изображения в одном или нескольких следующих форматах: AVIF, PNG, JPG и WebP. Для каждого из этих форматов можно предпринять действия по уменьшению размера изображения.
АВИФ
Android 12 (уровень API 31) и более поздние версии поддерживают изображения, использующие формат файлов изображений AV1 (AVIF). AVIF — это формат контейнера для изображений и последовательностей изображений, закодированных с использованием AV1. AVIF использует преимущества внутрикадрового кодирования контента при сжатии видео. Это значительно улучшает качество изображения при том же размере файла по сравнению со старыми форматами изображений, такими как JPEG. Подробную информацию о преимуществах этого формата можно найти в блоге Джейка Арчибальда.
PNG
Ключом к уменьшению размера PNG-файлов является уменьшение количества уникальных цветов, используемых в каждой строке пикселей, составляющих изображение. Используя меньше цветов, вы улучшаете потенциал сжатия на всех других этапах конвейера.
Уменьшение количества уникальных цветов имеет существенное значение, поскольку эффективность сжатия PNG частично зависит от степени изменения цветов соседних пикселей по горизонтали. Таким образом, уменьшение количества уникальных цветов в каждой строке изображений PNG может помочь уменьшить размер их файлов.
Принимая решение о том, следует ли следовать этой стратегии, вы должны иметь в виду, что уменьшение количества уникальных цветов фактически равносильно применению к изображению этапа кодирования с потерями. Однако инструмент кодирования может не очень хорошо судить о том, насколько плохо выглядит для человеческого глаза кажущаяся небольшой ошибка. Поэтому вам следует выполнять эту работу вручную, чтобы обеспечить правильный баланс между эффективным сжатием и приемлемым качеством изображения.
Есть два особенно полезных подхода: стремление к индексированным форматам и применение векторного квантования.
Стремитесь к индексированным форматам
Любую попытку уменьшения цвета следует начинать с попытки оптимизировать цвета, чтобы можно было использовать ИНДЕКСИРОВАННЫЙ формат при экспорте изображения в формате PNG. Цветовой режим INDEXED работает путем выбора 256 лучших цветов и замены всех значений пикселей индексами в этой цветовой палитре. Результатом является сокращение с 16 миллионов (потенциальных) цветов до всего 256 цветов: с 3 (без прозрачности) или 4 (с прозрачностью) байтов на пиксель до 1 байта на пиксель. Это изменение представляет собой существенное уменьшение размера файла на первом этапе.
На рисунке 1 показано изображение и его индексированный вариант.
Рисунок 1. Изображение до и после конвертации в INDEXED формат.
На рисунке 2 показана цветовая палитра изображения на рисунке 1:
Рисунок 2. Цветовая палитра изображения на рисунке 1.
Представление вашего изображения в виде изображения с палитрой во многом способствует значительному увеличению размера файла, поэтому стоит выяснить, можно ли преобразовать большинство ваших изображений.
Конечно, не каждое изображение можно точно представить, используя всего 256 цветов. Например, для правильного отображения некоторых изображений может потребоваться 257, 310, 512 или 912 цветов. В таких случаях векторное квантование также может быть полезным.
Векторное квантование
Процесс создания индексированного изображения лучше описать как векторное квантование (VQ). VQ служит процессом округления многомерных чисел. В этом процессе все цвета вашего изображения группируются на основе их сходства. Для данной группы все цвета в этой группе заменяются одним значением центральной точки , что сводит к минимуму ошибку для цветов в этой ячейке (или «сайте», если вы используете терминологию Вороного). На рисунке 3 зеленые точки представляют входные цвета, а красные точки — центральные точки, которые заменяют входные цвета. Каждая ячейка ограничена синими линиями.
Рисунок 3. Применение векторного квантования к цветам изображения.
Результат применения VQ к изображению уменьшает количество уникальных цветов, заменяя каждую группу цветов одним цветом, который «довольно близок» по визуальному качеству.
Этот метод также позволяет вам определить максимальное количество уникальных цветов в вашем изображении. Например, на рисунке 4 показана голова попугая в 16,7 миллионах цветов (24 бита на пиксель или бит/пиксель) наряду с версией, которая позволяет использовать только 16 (3 бита на пиксель) уникальных цветов.
Рисунок 4. Изображение до и после применения векторной количественной оценки.
Сразу видно, что происходит потеря качества; большая часть цветов градиента была заменена, что придало изображению эффект полос. Для этого изображения требуется более 16 уникальных цветов.
Настройка этапа VQ в вашем конвейере может помочь вам лучше понять истинное количество уникальных цветов, используемых в вашем изображении, и значительно их сократить. Существует ряд легкодоступных инструментов, которые можно использовать для реализации этой техники.
JPG
Если вы используете изображения JPG, вы можете внести несколько небольших изменений, которые потенциально обеспечат значительную экономию размера файла. К ним относятся:
- Создание файла меньшего размера с помощью различных методов кодирования (без ущерба для качества).
- Немного отрегулируйте качество, чтобы добиться лучшего сжатия.
Следование этим стратегиям часто может привести к уменьшению размера файла до 25%.
Выбирая инструменты, помните, что инструменты экспорта фотографий могут вставлять в ваши изображения ненужные метаданные, например информацию GPS. Как минимум, попробуйте использовать существующие инструменты, чтобы удалить эту информацию из ваших файлов.
ВебП
WebP — это новый формат изображений, поддерживаемый с Android 4.2.1 (уровень API 17). Этот формат обеспечивает превосходное сжатие изображений в Интернете без потерь и с потерями. Используя WebP, разработчики могут создавать меньшие по размеру и более насыщенные изображения. Файлы изображений WebP без потерь в среднем на 26% меньше , чем PNG. Эти файлы изображений также поддерживают прозрачность (также известную как альфа-канал) за счет увеличения всего на 22 % байтов.
Изображения WebP с потерями на 25–34 % меньше , чем сопоставимые изображения JPG при эквивалентных показателях качества SSIM . В случаях, когда сжатие RGB с потерями приемлемо, WebP с потерями также поддерживает прозрачность, обычно создавая размеры файлов в 3 раза меньшие, чем PNG.
Для получения дополнительной информации о WebP посетите сайт WebP .
Вы можете конвертировать существующие изображения BMP, JPG, PNG или статические GIF в формат WebP с помощью Android Studio. Дополнительные сведения см. в разделе Создание изображений WebP с помощью Android Studio .
Выбор формата
Разные форматы изображений подходят для разных типов изображений. JPG и PNG имеют совершенно разные процессы сжатия и дают совершенно разные результаты.
Выбор между PNG и JPG часто сводится к сложности самого изображения. На рис. 5 показаны два изображения, которые получаются совершенно по-разному в зависимости от того, какую схему сжатия применил разработчик. Изображение слева содержит множество мелких деталей, поэтому его более эффективно сжимать в формате JPG. Изображение справа с участками одного цвета более эффективно сжимается с помощью PNG.
Рисунок 5. Подходящие случаи для JPG и PNG
WebP как формат может поддерживать режимы как с потерями, так и без потерь, что делает его идеальной заменой PNG и JPG. Единственное, что следует иметь в виду, это то, что он имеет встроенную поддержку только на устройствах под управлением Android 4.2.1 (уровень API 17) и выше. К счастью, подавляющее большинство устройств удовлетворяют этому требованию.
На рис. 6 представлена простая визуализация, которая поможет вам решить, какую схему сжатия использовать.
Рисунок 6. Выбор схемы сжатия
Определить оптимальные значения качества
Существует несколько методов, которые можно использовать для достижения правильного баланса между сжатием и качеством изображения. Один метод использует скалярные значения и поэтому работает только для JPG и WebP. Другой метод использует преимущества библиотеки Баттераугли и пригоден для всех форматов изображений.
Скалярные значения (только JPG и WebP)
Сила JPG и WebP заключается в том, что вы можете использовать скалярное значение, чтобы сбалансировать качество и размер файла. Хитрость заключается в том, чтобы выяснить, какое значение качества является правильным для вашего изображения. Слишком низкий уровень качества приводит к созданию файла небольшого размера за счет качества изображения. Слишком высокий уровень качества увеличивает размер файла, не принося заметной пользы пользователю.
Самое простое решение — выбрать какое-то немаксимальное значение и использовать его. Однако имейте в виду, что значение качества влияет на каждое изображение по-разному. Хотя качество 75 %, например, может выглядеть хорошо на большинстве изображений, в некоторых случаях оно может оказаться и неудовлетворительным. Вам следует обязательно протестировать выбранное вами максимальное значение на репрезентативной выборке изображений. Кроме того, обязательно выполняйте все тесты на исходных изображениях, а не на сжатых версиях.
Для крупных медиа-приложений, которые загружают и повторно отправляют миллионы файлов JPG в день, ручная настройка каждого ресурса нецелесообразна. Вы можете решить эту проблему, указав несколько разных уровней качества в зависимости от категории изображения. Например, вы можете установить 35% в качестве настройки качества для миниатюр, поскольку изображение меньшего размера скрывает больше артефактов сжатия.
Буттераугли
Проект Butteraugli — это библиотека для проверки порога психовизуальной ошибки изображения: точки, в которой зритель начинает замечать ухудшение изображения. Другими словами, этот проект пытается количественно оценить, насколько искажено ваше сжатое изображение.
Butteraugli позволяет вам определить цель по визуальному качеству, а затем запускать сжатие PNG, JPG, WebP с потерями и WebP без потерь. Затем вы можете выбрать изображение, которое наилучшим образом сочетает размер файла и уровень Буттераугли. На рисунке 7 показан пример того, как Баттераугли использовался для определения минимального уровня качества JPG, прежде чем визуальное искажение стало достаточно высоким, чтобы пользователь мог заметить проблему; в результате размер файла уменьшается примерно на 65%.
Рисунок 7. Изображение до и после применения технологии Буттераугли.
Баттераугли позволяет вам действовать на основе выходных или входных данных. То есть вы можете искать настройку самого низкого качества до того, как пользователь заметит заметные искажения в результирующем изображении, или вы можете итеративно устанавливать уровни искажения изображения, чтобы узнать связанные с ними уровни качества.
Размеры порций
Соблазнительно хранить на сервере изображение только с одним разрешением. Когда устройство обращается к изображению, сервер обслуживает его с этим разрешением и оставляет уменьшение масштаба устройству.
Такое решение удобно для разработчика, но потенциально болезненно для пользователя, поскольку решение заставляет пользователя загружать гораздо больше данных, чем ему необходимо. Вместо этого вам следует хранить изображения нескольких размеров и использовать тот размер, который наиболее подходит для конкретного случая использования. Например, для миниатюры предоставление фактической миниатюры изображения вместо предоставления и уменьшения полноразмерной версии потребляет гораздо меньше пропускной способности сети.
Этот подход хорош для скорости загрузки и менее затратен для пользователей, которые могут использовать ограниченные или дозированные тарифные планы на передачу данных. Подобный подход также приводит к тому, что изображение занимает меньше места на устройстве и в основной памяти. В случае больших изображений, например 4K, такой подход также избавляет устройство от необходимости изменять размер изображений перед их загрузкой.
Для реализации этого подхода требуется наличие внутренней службы изображений для предоставления изображений в различных разрешениях с надлежащим кэшированием. Существуют существующие службы, которые могут помочь с этой задачей. Например, в App Engine уже установлена функция изменения размера изображения.
,Большая часть трафика загрузки состоит из изображений. В результате, чем меньше вы сможете сделать загружаемые изображения, тем лучше будет взаимодействие с сетью, которое ваше приложение сможет предоставить пользователям. На этой странице представлены рекомендации по уменьшению размера файлов изображений и повышению их удобства для работы в сети.
О форматах изображений
Приложения Android обычно используют изображения в одном или нескольких следующих форматах: AVIF, PNG, JPG и WebP. Для каждого из этих форматов можно предпринять действия по уменьшению размера изображения.
АВИФ
Android 12 (уровень API 31) и более поздние версии поддерживают изображения, использующие формат файлов изображений AV1 (AVIF). AVIF — это формат контейнера для изображений и последовательностей изображений, закодированных с использованием AV1. AVIF использует преимущества внутрикадрового кодирования контента при сжатии видео. Это значительно улучшает качество изображения при том же размере файла по сравнению со старыми форматами изображений, такими как JPEG. Подробную информацию о преимуществах этого формата можно найти в блоге Джейка Арчибальда.
PNG
Ключом к уменьшению размера PNG-файлов является уменьшение количества уникальных цветов, используемых в каждой строке пикселей, составляющих изображение. Используя меньше цветов, вы улучшаете потенциал сжатия на всех других этапах конвейера.
Уменьшение количества уникальных цветов имеет существенное значение, поскольку эффективность сжатия PNG частично зависит от степени изменения цветов соседних пикселей по горизонтали. Таким образом, уменьшение количества уникальных цветов в каждой строке изображений PNG может помочь уменьшить размер их файлов.
Принимая решение о том, следует ли следовать этой стратегии, вы должны иметь в виду, что уменьшение количества уникальных цветов фактически равносильно применению к изображению этапа кодирования с потерями. Однако инструмент кодирования может не очень хорошо судить о том, насколько плохо выглядит для человеческого глаза кажущаяся небольшой ошибка. Поэтому вам следует выполнять эту работу вручную, чтобы обеспечить правильный баланс между эффективным сжатием и приемлемым качеством изображения.
Есть два особенно полезных подхода: стремление к индексированным форматам и применение векторного квантования.
Стремитесь к индексированным форматам
Любую попытку уменьшения цвета следует начинать с попытки оптимизировать цвета, чтобы можно было использовать ИНДЕКСИРОВАННЫЙ формат при экспорте изображения в формате PNG. Цветовой режим INDEXED работает путем выбора 256 лучших цветов и замены всех значений пикселей индексами в этой цветовой палитре. Результатом является сокращение с 16 миллионов (потенциальных) цветов до всего 256 цветов: с 3 (без прозрачности) или 4 (с прозрачностью) байтов на пиксель до 1 байта на пиксель. Это изменение представляет собой существенное уменьшение размера файла на первом этапе.
На рисунке 1 показано изображение и его индексированный вариант.
Рисунок 1. Изображение до и после конвертации в INDEXED формат.
На рисунке 2 показана цветовая палитра изображения на рисунке 1:
Рисунок 2. Цветовая палитра изображения на рисунке 1.
Представление вашего изображения в виде изображения с палитрой во многом способствует значительному увеличению размера файла, поэтому стоит выяснить, можно ли преобразовать большинство ваших изображений.
Конечно, не каждое изображение можно точно представить, используя всего 256 цветов. Например, для правильного отображения некоторых изображений может потребоваться 257, 310, 512 или 912 цветов. В таких случаях векторное квантование также может быть полезным.
Векторное квантование
Процесс создания индексированного изображения лучше описать как векторное квантование (VQ). VQ служит процессом округления многомерных чисел. В этом процессе все цвета вашего изображения группируются на основе их сходства. Для данной группы все цвета в этой группе заменяются одним значением центральной точки , что сводит к минимуму ошибку для цветов в этой ячейке (или «сайте», если вы используете терминологию Вороного). На рисунке 3 зеленые точки представляют входные цвета, а красные точки — центральные точки, которые заменяют входные цвета. Каждая ячейка ограничена синими линиями.
Рисунок 3. Применение векторного квантования к цветам изображения.
Результат применения VQ к изображению уменьшает количество уникальных цветов, заменяя каждую группу цветов одним цветом, который «довольно близок» по визуальному качеству.
Этот метод также позволяет вам определить максимальное количество уникальных цветов в вашем изображении. Например, на рисунке 4 показана голова попугая в 16,7 миллионах цветов (24 бита на пиксель или бит/пиксель) наряду с версией, которая позволяет использовать только 16 (3 бита на пиксель) уникальных цветов.
Рисунок 4. Изображение до и после применения векторной количественной оценки.
Сразу видно, что происходит потеря качества; большая часть цветов градиента была заменена, что придало изображению эффект полос. Для этого изображения требуется более 16 уникальных цветов.
Настройка этапа VQ в вашем конвейере может помочь вам лучше понять истинное количество уникальных цветов, используемых в вашем изображении, и значительно их сократить. Существует ряд легкодоступных инструментов, которые можно использовать для реализации этой техники.
JPG
Если вы используете изображения JPG, вы можете внести несколько небольших изменений, которые потенциально обеспечат значительную экономию размера файла. К ним относятся:
- Создание файла меньшего размера с помощью различных методов кодирования (без ущерба для качества).
- Немного отрегулируйте качество, чтобы добиться лучшего сжатия.
Следование этим стратегиям часто может привести к уменьшению размера файла до 25%.
Выбирая инструменты, помните, что инструменты экспорта фотографий могут вставлять в ваши изображения ненужные метаданные, например информацию GPS. Как минимум, попробуйте использовать существующие инструменты, чтобы удалить эту информацию из ваших файлов.
ВебП
WebP — это новый формат изображений, поддерживаемый с Android 4.2.1 (уровень API 17). Этот формат обеспечивает превосходное сжатие изображений в Интернете без потерь и с потерями. Используя WebP, разработчики могут создавать меньшие по размеру и более насыщенные изображения. Файлы изображений WebP без потерь в среднем на 26% меньше , чем PNG. Эти файлы изображений также поддерживают прозрачность (также известную как альфа-канал) за счет увеличения всего на 22 % байтов.
Изображения WebP с потерями на 25–34 % меньше , чем сопоставимые изображения JPG при эквивалентных показателях качества SSIM . В случаях, когда сжатие RGB с потерями приемлемо, WebP с потерями также поддерживает прозрачность, обычно создавая размеры файлов в 3 раза меньшие, чем PNG.
Для получения дополнительной информации о WebP посетите сайт WebP .
Вы можете конвертировать существующие изображения BMP, JPG, PNG или статические GIF в формат WebP с помощью Android Studio. Дополнительные сведения см. в разделе Создание изображений WebP с помощью Android Studio .
Выбор формата
Разные форматы изображений подходят для разных типов изображений. JPG и PNG имеют совершенно разные процессы сжатия и дают совершенно разные результаты.
Выбор между PNG и JPG часто сводится к сложности самого изображения. На рис. 5 показаны два изображения, которые получаются совершенно по-разному в зависимости от того, какую схему сжатия применил разработчик. Изображение слева содержит множество мелких деталей, поэтому его более эффективно сжимать в формате JPG. Изображение справа с участками одного цвета более эффективно сжимается с помощью PNG.
Рисунок 5. Подходящие случаи для JPG и PNG
WebP как формат может поддерживать режимы как с потерями, так и без потерь, что делает его идеальной заменой PNG и JPG. Единственное, что следует иметь в виду, это то, что он имеет встроенную поддержку только на устройствах под управлением Android 4.2.1 (уровень API 17) и выше. К счастью, подавляющее большинство устройств удовлетворяют этому требованию.
На рис. 6 представлена простая визуализация, которая поможет вам решить, какую схему сжатия использовать.
Рисунок 6. Выбор схемы сжатия
Определить оптимальные значения качества
Существует несколько методов, которые можно использовать для достижения правильного баланса между сжатием и качеством изображения. Один метод использует скалярные значения и поэтому работает только для JPG и WebP. Другой метод использует преимущества библиотеки Баттераугли и пригоден для всех форматов изображений.
Скалярные значения (только JPG и WebP)
Сила JPG и WebP заключается в том, что вы можете использовать скалярное значение, чтобы сбалансировать качество и размер файла. Хитрость заключается в том, чтобы выяснить, какое значение качества является правильным для вашего изображения. Слишком низкий уровень качества приводит к созданию файла небольшого размера за счет качества изображения. Слишком высокий уровень качества увеличивает размер файла, не принося заметной пользы пользователю.
Самое простое решение — выбрать какое-то немаксимальное значение и использовать его. Однако имейте в виду, что значение качества влияет на каждое изображение по-разному. Хотя качество 75 %, например, может выглядеть хорошо на большинстве изображений, в некоторых случаях оно может оказаться и неудовлетворительным. Вам следует обязательно протестировать выбранное вами максимальное значение на репрезентативной выборке изображений. Кроме того, обязательно выполняйте все тесты на исходных изображениях, а не на сжатых версиях.
Для крупных медиа-приложений, которые загружают и повторно отправляют миллионы файлов JPG в день, ручная настройка каждого ресурса нецелесообразна. Вы можете решить эту проблему, указав несколько разных уровней качества в зависимости от категории изображения. Например, вы можете установить 35% в качестве настройки качества для миниатюр, поскольку изображение меньшего размера скрывает больше артефактов сжатия.
Буттераугли
Проект Butteraugli — это библиотека для проверки порога психовизуальной ошибки изображения: точки, в которой зритель начинает замечать ухудшение изображения. Другими словами, этот проект пытается количественно оценить, насколько искажено ваше сжатое изображение.
Butteraugli позволяет вам определить цель по визуальному качеству, а затем запускать сжатие PNG, JPG, WebP с потерями и WebP без потерь. Затем вы можете выбрать изображение, которое наилучшим образом сочетает размер файла и уровень Буттераугли. На рисунке 7 показан пример того, как Баттераугли использовался для определения минимального уровня качества JPG, прежде чем визуальное искажение стало достаточно высоким, чтобы пользователь мог заметить проблему; в результате размер файла уменьшается примерно на 65%.
Рисунок 7. Изображение до и после применения технологии Буттераугли.
Баттераугли позволяет вам действовать на основе выходных или входных данных. То есть вы можете искать настройку самого низкого качества до того, как пользователь заметит заметные искажения в результирующем изображении, или вы можете итеративно устанавливать уровни искажения изображения, чтобы узнать связанные с ними уровни качества.
Размеры порций
Соблазнительно хранить на сервере изображение только с одним разрешением. Когда устройство обращается к изображению, сервер обслуживает его с этим разрешением и оставляет уменьшение масштаба устройству.
Такое решение удобно для разработчика, но потенциально болезненно для пользователя, поскольку решение заставляет пользователя загружать гораздо больше данных, чем ему необходимо. Вместо этого вам следует хранить изображения нескольких размеров и использовать тот размер, который наиболее подходит для конкретного случая использования. Например, для миниатюры предоставление фактической миниатюры изображения вместо предоставления и уменьшения полноразмерной версии потребляет гораздо меньше пропускной способности сети.
Этот подход хорош для скорости загрузки и менее затратен для пользователей, которые могут использовать ограниченные или дозированные тарифные планы на передачу данных. Подобный подход также приводит к тому, что изображение занимает меньше места на устройстве и в основной памяти. В случае больших изображений, например 4K, такой подход также избавляет устройство от необходимости изменять размер изображений перед их загрузкой.
Для реализации этого подхода требуется наличие внутренней службы изображений для предоставления изображений в различных разрешениях с надлежащим кэшированием. Существуют существующие службы, которые могут помочь с этой задачей. Например, в App Engine уже установлена функция изменения размера изображения.