Сожмите несколько небольших областей изображения в более высоком качестве

Question

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

На снимке - сцена под открытым небом, в большинстве случаев на ней виден лист, но на переднем плане видны восемь человек. Если я сожму фотографию с JPEG, установленным на более низкое качество, большая часть изображения не потеряет важные детали. Однако головы людей, видимых на изображении, являются важным фокусом изображения, и большинство из них имеют важные детали в чертах лица, которые теряются при низком качестве сжатия JPEG. Все головы вместе занимают менее 1/200 изображения.

Я не верю, что это можно оптимально решить с помощью одного изображения JPEG. Это связано с тем, что все изображение JPEG должно использовать одну и ту же матрицу квантования, которая должна быть достаточно высокого качества, чтобы иметь возможность представлять детали высокого качества, а также использовать один и тот же код Хаффмана, поэтому даже если я кодирую большую часть изображения особым образом, например обнуление многих коэффициентов косинусного преобразования в большинстве блоков, большие области будут сжаты неоптимально.

Учитывая это, каков лучший способ представить изображение на веб-странице ? Можете ли вы привести примеры веб-страниц , делающих что-то подобное? Можете ли вы указать мне инструкции или программное обеспечение , которое поможет решить некоторые из этих задач?

Я думал о том, чтобы, возможно, использовать изображение JPEG низкого качества, которое покрывает все изображение, а затем наложить несколько других изображений (JPEG или PNG). Я мог бы использовать правила CSS для размещения дополнительных изображений. Кроме того, я мог бы разделить изображение на прямоугольные изображения и собрать их, используя таблицу.

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

Answer 1

Вы можете сделать это с помощью экспериментальной версии утилиты jpegtran с опцией «drop». Получите его из http://jpegclub.org/jpegtran/. Вот пример (используя образец изображения из http://www.rawsamples.ch/). Я загрузил здесь все образцы в виде файлов PNG, чтобы избежать дополнительной рекомпрессии из службы хостинга.

Во-первых, изображение в формате JPEG высокого качества:

Это 1715K - больше мегабайта.

Теперь упало до ужасного качества (10% в Gimp, с подвыборкой 4: 2: 0):

Уууу, до 52K . JPEG потрясающий.

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

Но, к сожалению, теперь это обратно до 667K , что побеждает цель. Даже когда я использую 4: 2: 0, это все равно 378K - и это более справедливое сравнение, как вы увидите чуть позже.

Итак, я попробовал подход jpegtran -drop - я вырезал наложение той части, которую я хочу высокого качества:

что составляет 38K , кстати, и используется

jpegtran -drop + 592 + 62 overlay.jpg -outfile drop.jpg lowq.jpg

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

для окончательного 221K изображения. Это значительно лучший результат size , чем сохранение в высоком качестве, даже с субдискретизацией. Тем не менее, это, возможно, худший визуальный результат, так как вы не можете смешивать - он должен быть прямым, и все становится размером 8 × 8. Вы можете обойти это, осторожно выполняя отдельные фрагменты с промежуточными уровнями сжатия, поэтому переход не очевиден, но это кажется ... утомительным.

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

Однако, так как вы представляете на веб-странице, я бы выбрал другой подход: используйте CSS, поместите вашу высококачественную область в файл PNG с прозрачностью и поместите это прямо поверх низкоуровневой. качественный JPEG. А в вашем случае, когда область высокого качества мала (0,5% изображения!), Она, вероятно, лучшая.

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

Answer 2

Создание сжатых изображений в файле SVG

Изображения SVG хорошо поддерживаются в современных браузерах . Вы можете встраивать растровые изображения в файл SVG или иметь ссылку на них SVG. Обратите внимание, что для встраивания используется кодировка base-64, которая добавляет одну треть к размеру файла.

Ниже приведены инструкции для Inkscape . Обратите внимание, что вы можете выбрать, вставлять или связывать каждое изображение при его открытии / импорте.

1. Файл> Открыть большое изображение низкого качества. Это создает новое изображение SVG с такими же размерами, как у открытого изображения.
2. Файл> Импортировать высококачественные изображения меньшего размера. Эти изображения добавляются поверх некачественного изображения с шага 1.
3. Поместите меньшие изображения. Обратите внимание, что система координат Inkscape имеет (0, 0) в левом нижнем углу.
4. Файл> Сохранить как ... и выберите «Простой SVG».

Если вы решили связать изображения, вам нужно будет распространить их вместе с файлом SVG. Если вам нужно указать, куда указывают ссылки, вы можете открыть файл SVG в текстовом редакторе и изменить его там.

Answer 3

Подход к созданию единого объединенного изображения (@StephenG) позволит создать изображение с некоторыми областями низкого качества, а некоторые - с высоким, НО это не приведет к существенному сокращению размера загрузки.

Конечное изображение необходимо сохранить с «высоким качеством» для сохранения областей детализации (граней), но это также увеличит размер файла областей низкого качества. Я взял высококачественный JPEG (450 КБ), сохранил его как низкое качество (100 КБ), перезагрузил и затем снова сохранил как высокое качество. Окончательный размер файла был 300 КБ. Некоторая экономия, да, но артефакты, представленные этим процессом, были также неприятны.

Лично у меня было бы изображение низкого качества в качестве одного актива, а каждый раздел высокого качества - в качестве другого. Используйте макет HTML / CSS, чтобы расположить высококачественные разделы непосредственно над низкокачественными.

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

Answer 4

Вы можете:

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

Технически, HTML выглядит так:

<div style="position:relative; ">
<img src=LoQ-full.jpg style="position:absolute; top: 0; left: 0 ; " >
<img src=HiQ-part.jpg style="position:absolute; top: 250; left: 615 ; " >
</div>

• Позиция relative <div> делает его "позиционированным"
• ... так, чтобы absolute позиции изображений фактически относились к <div>

Используя это изображение (с измененным размером):

Вся картинка Hi-Q (90) - 360K, Lo-Q (10) завершена плюс часть Hi-Q - 51 + 5K, результат (скриншот) такой:

Answer 5

Использование PHP и Imagick

Имагик кроп: http://php.net/manual/en/imagick.cropimage.php

Imagick Compress:

http://php.net/manual/en/imagick.setcompressionquality.php http://php.net/manual/en/imagick.setimagecompression.php

Наложение Imagick (объединение): http://www.imagemagick.org/Usage/layers/ (или вы можете использовать css для установки точки изображения)

Answer 6

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

• JPEGmini
• Гетцли и Буттераугли (Google)
• jpeg-recompress

Answer 7

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

Объедините нужные вам части изображения высокого качества с изображением низкого качества. Для этого вы бы использовали редактор, такой как GIMP или Photoshop, и маску слоя.

Сохранение полученного изображения в другое изображение высокого (или среднего) качества.

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