Сжатие изображений для веб-комиксов - PullRequest
3 голосов
/ 08 января 2009

Как, наверное, многие люди здесь, я читал несколько комиксов. Drowtales мой любимый, но это не главное.

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

Как так? Разве не изобретены лучшие вещи? Я не специалист по сжатию данных, поэтому мои собственные скудные попытки найти лучший алгоритм оказались безрезультатными. Лучшее, что я мог найти, было Pngcrush , но он все еще сильно отстает от JPEG с точки зрения сжатия.

Я хотел бы услышать мнение эксперта по этому вопросу. Эта идея моя глупа и обречена на провал? Или, может быть, есть какой-то способ, который люди нашли или на который я мог бы посмотреть?

Это, конечно, происходит из-за эгоистичного желания уменьшить время загрузки. :)

Добавлено: Некоторые люди, кажется, упускают суть, поэтому я уточню:

Сетевые изображения должны иметь много избыточности, поэтому они должны быть легко сжимаемыми. Разве невозможно каким-либо образом сжать их, чтобы они были как без потерь, так и меньше, чем JPEG? Или, по крайней мере, сжать их лучше, чем JPEG, при этом сохраняя при этом качество.

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

Ответы [ 15 ]

14 голосов
/ 08 января 2009

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

PNG vs JPEG

С lbrandy.com

6 голосов
/ 08 января 2009

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

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

5 голосов
/ 08 января 2009

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

4 голосов
/ 08 января 2009

Ваши предположения не подтверждаются моими данными. Мой любимый комикс уже распространяется в формате PNG. Преобразование файла PNG 167K в JPEG с использованием качества сжатия по умолчанию позволяет получить файл JPEG 199K. Безубыточность где-то между -quality 60 и -quality 65, что является довольно низким качеством для JPEG. Таким образом, сомнительный контент уже сжат без потерь и меньше, чем JPEG.

2 голосов
/ 08 января 2009

При определенных обстоятельствах изображения JPEG будут больше, чем изображения PNG.

Например, в случаях, когда очень простое изображение, PNG может в итоге сжать изображение лучше и обеспечить лучшее качество изображения.

Вот пример с некоторым кодом Java:

public static void main(String[] args)
{
    BufferedImage img = new BufferedImage(
            256,
            256,
            BufferedImage.TYPE_INT_RGB
    );

    Graphics g = img.getGraphics();

    g.setColor(Color.white);
    g.fillRect(0, 0, 256, 256);
    g.setColor(Color.black);
    g.drawLine(0, 0, 255, 255);
    g.drawLine(255, 0, 0, 255);

    try
    {
        ImageIO.write(img, "jpg", new File("output.jpg"));
        ImageIO.write(img, "png", new File("output.png"));
    }
    catch (IOException e) {} // Don't usually ignore exceptions!

    g.dispose();
}

Приведенный выше код создает изображение с размерами 256 x 256 пикселей и рисует две пересекающиеся диагональные линии в виде буквы "X".

Изображение 256 x 256 использовалось для сохранения размера изображения, кратного 8, так как сжатие JPEG выполняет 2D DCT-преобразование для 8 × 8-пиксельных участков изображения, Сохраняя размер изображения и расположение линии для выравнивания в области 8 x 8 пикселей, это уменьшит количество артефактов сжатия и улучшит качество изображения.

(Выбор 256 x 256 был эмпирическим - я сначала использовал 100 x 100 и заметил, что изображение JPEG было ужасным, поэтому я попробовал 64 x 64, и оно выглядело лучше, поэтому я увеличил его для имитации более реалистичного изображения размер.)

После отрисовки изображения программа генерирует файл JPEG и файл PNG. (Библиотека Java ImageIO использует степень сжатия по умолчанию 0.75f для качества сжатия JPEG.)

Результаты:

output.png : 1,308 bytes
output.jpg : 3,049 bytes

Взглянув на само изображение, у JPEG есть небольшие артефакты, но это было не очень заметно, пока я не увеличил изображение с помощью редактора изображений. Конечно, изображение в формате PNG без потерь, поэтому это было точное представление оригинала.

Чтобы сделать вывод, действительно ли изображение меньше с использованием PNG или JPEG, зависит от источника - есть случаи, когда JPEG может быть больше, чем PNG, и, тем не менее, PNG может иметь лучшее качество. Конечно, на практике обычно PNG для данного изображения будет больше, чем JPEG.

2 голосов
/ 08 января 2009

Несколько вещей, которые я выбрал для работы с изображениями для веб-использования -

  • Используйте jpegtran -optimise для JPEG - он сжимает их без потерь и может сэкономить несколько процентов от плохо сжатых изображений.
  • Я запускаю PNG-файлы через pngnq (сделать их 8-битными), а затем optipng -i0 (перекомпрессировать и удалить все чередования). Я знаю, что вы сказали, что вам не нравятся потери, но pngnq делает удивительно хорошую работу по преобразованию изображений в палитру - лучше всего попробовать это самостоятельно и посмотреть, достаточно ли хорош вывод.
1 голос
/ 08 января 2009

Я нарисовал несколько больших иллюстрированных вручную принципиальных схем, которые я сканирую в оттенках серого для использования в компьютеризированных документах; Я думаю, что TIFF со сжатием LZW всегда выигрывает у JPEG, как по качеству просмотра, так и по размеру файла, потому что TIFF может использовать преимущества кодирования RLE для пробелов. Я не уверен, может ли PNG сделать это тоже, или можно ли расширить RLE для многоцветных изображений, а не только для черно-белых.

редактировать: я только что попробовал один из моих рисунков руки в оттенках серого; TIFF может превзойти PNG примерно в 2: 1 (43 КБ против 83 КБ, используя ImageMagick для преобразования, чтобы снова перейти от оригинального TIFF -> PNG -> TIFF, чтобы дважды проверить, что ImageMagick создает оба формата файлов, и убедиться, что моя оригинальная программа этого не сделала плохая работа при создании TIFF), но только потому, что TIFF использует 8 бит / пиксель (в градациях серого), а PNG использует 24 бит / пиксель (RGB).

edit 2 : не берите в голову, я просто смог использовать pngcrush -c 0, чтобы изображение было в оттенках серого. PNGcrush получил версию RGB до 67K, а шкалу серого до 34K. Nice!

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

1 голос
/ 08 января 2009

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

0 голосов
/ 08 января 2009

Я использую OPTIPNG, чтобы получить лучший фильтр (с нормальным уровнем), а затем запускаю ADVDEF -4 -z
http://advancemame.sourceforge.net/comp-readme.html (не Advpng, потому что Advpng удаляет фильтры) для оптимизации выкачивания.

Также вы можете попробовать pngout http://www.advsys.net/ken/utils.htm Есть плагин для Irfanview. Он использует ту же реализацию Kzip для deflate, которая обычно даже лучше, чем 7-zip, но намного медленнее.

EDIT:
okcancel20031003.gif Какой ваш любимый мультфильм «программист»? 256 цветов 147KB
PNG (краска) 126KB
PNG (Irfanview) 120 КБ

PNG (Irfanview) +
Optipng -o5 120 КБ (на 525 байт меньше) 9 с
Optipng + ADVDEF 114 КБ 9 с + 0,9 с
PngOut 114 KB 6s

BMP 273 КБ

BMP +
7z (LZMA -fb 273) 107 КБ
RAR (лучший) 116 кбайт
BMF-S 90 кб 0,3 с
Paq8o10t -4 79 КБ 35 с

0 голосов
/ 08 января 2009

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

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

Большую часть времени вам приходится думать о своей аудитории. Действительно ли стоит оптимизировать ваши изображения, если вы получаете 20 посетителей в день? Я, вероятно, утверждаю, что это полностью зависит от размера и содержания вашего веб-комикса. Если вы можете сойти с рук с PNG, то я буду придерживаться этого. Чаще всего в веб-комиксах практически нет оснований для использования JPG.

...