Pull to refresh

Оптимизация свободного места: откажитесь от PNG

Reading time2 min
Views1.3K
Представим себе вполне ординарную, рутинную задачу: наше приложение должно загружать внешние картинки, они должны иметь прозрачный фон, и дальше мы уже будем выполнять над ними какие-то действия.

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

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

Всё что нам необходимо, сгенерировать 2 gif — файла, один из которых будет хранить изображение, а второй — маску нешего прозрачного фона.

Размер двоих gif — файлов значительно меньше чем размер одного полноценного png.

Так в ниже-приведенном примере первый гиф файл с изображением занимает всего 9 кб, а маска для него 3 кб.

Собственно изображение
image

Собственно маска


В то время как png — файл с прозрачным фоном для этой же картинки будет занимать порядка 35 килобайт. Экономия 65%.

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

gifImageBitmapData.threshold(gifMask.bitmapData, gifMask.getRect(gifMask),new Point(0,0),'<',0xffffffff,0x00FFFFFF,0xffffffff);

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

Технология, конечно, не универсальная и имеет свои недостатки — 2 маленьких файла наверняка будут загружаться дольше чем 1 большой файл, но свою задачу выполняет: контент для вашего приложения будет занимать намного меньше.
Tags:
Hubs:
Total votes 15: ↑3 and ↓12-9
Comments15

Articles