Максимальный размер PNG при определенных размерах
Формат изображений PNG используется во множестве случаев, так как использует сжатие без потерь и поддерживается практически любым графическим редактором. А самое вкусное то, что картинки в этом формате могут быть частично прозрачными. Это очень хорошо.
Учитывая возможности, которые предоставляет PNG, это также означает и больший размер файла на выходе. Это уже не так хорошо. Особенно, если png-файлы загружаются с веб-сайта, так как скорость и время загрузки имеют важное значение в сети Интернет.
В этой статье я расскажу о полезном сервисе, который круто сжимает изображения (png, jpg) без заметной потери качества. Например, картинку-баннер (png) исходным размером 455 Кб ему удалось сжать более, чем в 3,5 раза!
Уменьшаем размеры картинок PNG
TinyPNG поможет вам уменьшить размеры PNG картинок, чтобы страницы с ними быстрее грузились. Сервис оптимизирует их по определенному алгоритму, уменьшая количество цветов и удаляя лишние метаданные. Лично я не заметил каких-либо потерь в качестве обработанных изображений. С точки зрения размеров файла, результаты могут быть впечатляющими.
Начинаем! Откройте сервис по адресу https://tinypng.com/
Когда вы загрузили TinyPNG в соседней вкладке, у вас появляется выбор. Вы можете с помощью Drag’and’Drop перетащить мышкой свои файлы из проводника или Total Commander’а в область окна, выделенное штрихами. Или нажать на нее же и выбрать PNG или JPG файлы стандартным образом.
После загрузки файла(ов), TinyPNG принимается за работу. Процесс будет отображаться на экране, а по завершении вы узнаете, насколько хорошо панде удалось сжать ваш файл, в процентах и размерах.
Давайте проведем эксперимент на моем подопытном файлике banner4.png, размером в 455,4 Кб. После сжатия размер уменьшился на 72% и составил 130,3 Кб. То есть, в 3,5 раза. Здорово, правда?
А если вы загружаете несколько файлов, то интерфейс будет вот такой:
Чтобы не загружать каждый файл по отдельности, нажмите кнопку зеленую кнопку Download all. Все картинки скачаются в архиве. Можете и в Dropbox () сохранить при желании.
Если вы сам себе вебмастер и регулярно имеете дело с png или jpg файлами, то этот сервис будет хорошим помощником в деле оптимизации картинок. Сервис также предлагает плагины для Photoshop, WordPress и Magento 2.
А каким образом вы оптимизируете свои картинки, скриншоты, фотографии, баннеры и прочие изображения?
В настоящее время я создаю программу рисования на основе HTML5 canvas . Пользователь может нарисовать изображение или несколько "страниц" изображений и сохранить его в облаке для быстрого поиска позже. Это используется для интерактивной доски; учитель не всегда может быть уверен, что IWB, на котором они планируют урок, тот, который они будут использовать в этом классе, поэтому я хочу, чтобы данные были доступны из любого места.
Я отправляю данные холста на сервер как URI данных через Ajax, сохраняя данные в файловой системе и ссылку на файл в базе данных. Моя проблема в том, что я не уверен, сколько места в файловой системе эти изображения в конечном итоге займет.
Файлы сохраняются как PNG с альфа-прозрачным слоем и 1280x720 пикселей. В зависимости от того, что нарисовано, размер файла значительно варьируется, и я предполагаю, что PNG сжимаются. Из-за этого у меня возникли проблемы с вычислением максимально возможного размера файла, которым может быть такое изображение. Поскольку я хочу предположить худший сценарий, я буду считать, что сжатие PNG не делает ничего, чтобы уменьшить размер файла. Учитывая, что максимальный размер файла будет:
1280 x 720 x colordepth
Если да, то какое значение должно быть colordepth , учитывая, что я экспортирую изображения с помощью canvas.toDataURL() ? Разве это будет отличаться в зависимости от версий браузера canvas ? Я здесь полностью в темноте.
Я знаю, что сжатие PNG не очень хорошо сочетается с изображениями в стиле фото, поэтому я пытаюсь создать нечто, не просто сжимаемое (в основном мягкие, довольно случайные градиенты). Самое крупное, что я смог создать, было около 675 КБ, но я уверен, что это нигде рядом с максимальным максимальным размером.
Так что мне нужно знать, какой максимальный размер файла может быть, или какое изображение предложит наименьший потенциал для сжатия в PNG, поэтому я могу экспериментировать лучше.
Надеюсь, это имеет смысл.
Есть несколько похожих вопросов по SO:
но никто не ответил на мой вопрос. Просветите меня, если я что-то пропустил.
1 ответ
Для вычисления размера растрового изображения PNG использует предполагаемый альфа-канал
Width x height x 4
предоставит вам размер как необработанные несжатые байты.
Причина 4 заключается в том, что RGBA будет (обычно) представлен как 32-битные (следовательно, 4 байта).
Если альфа-канал отсутствует, чем умножить на 3 (24-разрядный, RGB каждый 8-бит).
В дополнение к этому заголовок и куски добавят размер, но сжатие уменьшит размер.
Я, однако, думаю, что это даст вам достаточно хорошее число для этой цели в качестве максимального значения.
В вашем случае размер будет максимальным:
1280 x 720 x 4 = 3 686 400 bytes
Чтобы получить килобайты, разделите на 1024, чтобы получить это, чтобы mb снова делить на 1024 (здесь результат был бы 3.5 Мб).
Совет. Для совместного использования чертежей вы можете захотеть разделить сериализованные объекты вместо данных-uri, поскольку создание данных-uri является голодным по производительности и создаст ненужные служебные данные, в то время как сериализованные объекты обычно имеют низкий размер и низкое влияние производительности. Их легче переносить по сети. Объекты могут содержать позиции линий, цвета и т.д.
Выдающиеся детали (вы не просили)
Некоторые форматы изображений, такие как JPG, поддерживают Lossy Compression . Когда Сжатое сжатое изображение сохраняется, а затем возвращается назад, изображение не на 100% точно так же, как вы его разработали, а просто «закрываете» его, вроде эскиза. Некоторые из оригинальных деталей теряются . Поскольку нет ожиданий точности, Lossy Compressed images обладает роскошью хранения небольшой информации об оригинальном дизайне, что приводит к небольшим файлам. Они даже позволяют вам указать, насколько точным должен быть результат: чем менее точный результат должен быть, тем меньше файл.
С другой стороны, формат PNG по дизайну поддерживает сжатие Lossless . Это означает, что после того, как изображение будет сохранено в файле, когда оно будет возвращено, все пиксели будут отображаться точно так же, как вы их разработали, не теряя при этом никаких деталей. Это здорово, но, к сожалению, это означает, что он должен хранить много информации, чтобы визуализировать изображение отлично, в результате чего большие файлы.
PNG делает свою интеллектуальную вещь для оптимизации необходимой информации, прежде чем сохранять ее в файл, но вы не можете указывать, как вы это делаете, с JPG, насколько сжатым или точным вы хотите, чтобы файл был. Результат такой же, как и есть, и вы не можете контролировать, насколько велика будет файл.
Некоторые предложения
Сказав это, есть несколько вещей, которые вы могли бы сделать, чтобы попытаться получить меньший файл.
- Большие области плоских цветов сжимаются лучше, чем сложные узорчатые области. Посмотрите, можете ли вы упростить свое изображение.
- У вас много негативного пространства вокруг изображения? Попытайтесь сократить его до минимума.
- Вы используете прозрачность? Если нет, попробуйте сохранить изображение как JPG.
- Если вы не можете сохранить его как JPG по какой-либо причине, но не используете прозрачность, откройте «прозрачность» из параметров сохранения. Это приведет к потере немного укусов из вашего конечного результата.
- Подумайте обрезать изображение по частям и составить его в финальном HTML, как своего рода загадку. Вы можете сохранить части, которые требуют прозрачности, как PNG, а другие части — сжатые JPG. Общий результат должен быть менее тяжелым.
- Используйте инструмент сжатия PNG (например, https://tinypng.com/). Имейте в виду, что эти инструменты используют алгоритм с потерями. Они пытаются упростить ваше изображение, чтобы сохранить его как файл меньшего размера. Они значительно уменьшают размер вашего файла, но конечный результат может потерять слишком много деталей. Вы всегда можете попробовать их и оценить результат в зависимости от приложения.
TinyPNG конвертирует в 8-битный PNG, который выглядит как GIF.
@Heanz. Правда. Он преобразуется в 8-разрядный. Но это не GIF. Он поддерживает альфа-прозрачность. По моему опыту, я никогда не замечал разницы между полномасштабным PNG и тем, который они производят.
@cokcypup Для логотипов, которые я верю, но для человеческого лица, никоим образом.
@Heanz я никогда не использовал для человеческих лиц, но я регулярно использую его для косметических упаковочных фотографий. Я не могу сказать, в чем разница. Тем не менее, мой комментарий об альфе является правильным. Формат GIF не поддерживает альфа-прозрачность.
Совсем недавно на почту пришло письмо от человека, который долгое время занимается html-версткой. В письме, читатель моего блога спрашивает, как сделать максимально маленьким размер png файла. Уверен, что ответ на данный вопрос будет интересен и другим читателям моего блога.
Итак, задача следующая:
Необходимо сжать png-файл и добиться тем самым уменьшение размера файла.
Для этого, в PhotoShop"e открываете панель «Action», затем, открываете сам файл (который хотите операцию сжатия) называете его как-нибудь. Затем идем в «Record» (кружочек будет красненьким), делаем необходимые операции и по завершении жмем на квадратик (слева от красного кружочка) это «Stop» далее открываете «Batch», выбираете записанный «Action».
Смотрите на скриншотах:
Надеюсь этот урок будет полезен Вам при очередной верстке сайта С уважением, Vasilenko Ivan!
Оптимизация изображений PNG
Если изображения, созданные или обработанные в Фотошоп, оптимизировались нами всё это время форматом JPG и однажды, нам захотелось попробовать сохранить (оптимизировать) их PNG или GIF, то мы действуем также как и в случае с оптимизацией JPG.
Щёлкнув по кнопке «Файл» верхнего меню мы развернём перечень опций, в котором выберем команду «Сохранить как…»:
Запомнив сочетание клавиш Shift+Ctrl+S, мы сократим количество своих действий.
Как уменьшить размер файла JPG ? 4 быстрых способа!
Нажатие такого сочетания клавиш сразу же выводит окошко выбора места сохранения и типа файла:
Давайте щёлкнем по стрелочке для раскрытия списка с типами файлов, где выберем тип PNG:
Как мы видим, эта процедура идентична оптимизации не только JPG, но и вообще любой процедуре сохранения созданного или каким-либо способом отредактированного файла.
После выбора формата PNG, Фотошоп предложит два варианта оптимизации и два варианта вывода уже оптимизированной картинки при просмотре, ну а наша задача сделать свой индивидуальный выбор:
Версия Фотошоп CS6 предусматривает дополнительное пользовательское сжатие на выбор, а предыдущая версия CS5 сжимает картинку самостоятельно автоматически, предлагая нам, лишь определиться с её выводом (появлением) при просмотре:
Когда мы говорим о просмотре, то ведём речь, так сказать, о двух видах просмотра. Один вид я бы назвал бытовым просмотром, то есть мы смотрим изображения средствами операционной системы (встроенный медиа плеер). К другому виду просмотра можно отнести изображения в среде Интернета.
Всё зависит от того кому предназначено изображение и где оно это самое изображение, покинув Фотошоп, будет размещено. Пожалуй, лучшим будет довериться своим глазам. Если, то, что мы видим после сжатия, глаз, как говорят, не радует, то мы пробуем другой вариант. Зацикливаться на степени сжатия и качестве воспроизведения картинки, не будем. Спать мы должны крепко и сладко (юмор).
Визуально изображение должно выглядеть достаточно качество и иметь не очень большой размер (как файл). К тому же у нас есть запасной вариант - JPG для обработанных фотографий. Длинные ресницы, осиная талия и всё такое.
Не будем забывать о супер возможности с помощью PNG при оптимизации, сохранить многоуровневую прозрачность, если наше изображение содержит слои с разной степенью прозрачности:
Давайте воспользуемся имеющейся возможностью Фотошоп CS6 дополнительной регулировки степени сжатия и посмотрим на размер файлов в первом и втором вариантах сжатия, а также на то, каким будет наше зрительное восприятие.
Оптимизируем изображение по варианту сжатия «Нет/быстро»:
А затем, по варианту «Самый маленький/медленно»:
Теперь с помощью средств операционной системы нашего компьютера посмотрим на наше изображение оптимизированное, или иначе говоря, сжатое с разной степенью.
Посмотрим на картинку с первым вариантом оптимизации. Достаточно просто навести курсор мыши на изображение:
Теперь переведём курсор мыши на изображение сжатое по второму варианту:
Итак, мы посмотрели и сравнили одно и то же изображение, оптимизированное двумя различными вариантами. От наших глаз не ускользнул тот факт, что в обоих вариантах размер изображения по высоте и ширине идентичен, а вот их размер как файлов значительно друг от друга отличается (в байтах). Что касается меня, то мои глаза не видят какой-то потери качества картинки при более высокой степени сжатия. Резкость (чёткость), контрастность, насыщенность цветами, мои глаза на обоих этих значках воспринимают одинаково.
Давайте посмотрим на оба варианта оптимизации с помощью средств операционной системы. Оптимизация по первому варианту сжатия:
Теперь посмотрим на оптимизацию с более высокой степенью сжатия (вариант 2):
Опять скажу о себе. При различном размере файлов мои глаза не видят отличий. При переключении с одной картинки на другую я не заметил перехода. Такое впечатление, будто кнопки переключения с изображения на изображение (вперёд/назад) не функционируют.
Для принятия решения о том, с какой степенью сжимать изображения в будущем и в зависимости от их места размещения, мы можем смотреть на изображения уже после их сжатия разными вариантами, в Фотошоп, используя режим нескольких окон. Процесс прост. Открыв оба изображения в Фотошоп, мы сравниваем их между собой, переводя взгляд с одного изображения на другое.
Чтобы провести этот сравнительный анализ нам нужно обратиться к пункту «Окно» верхнего меню и выбрать опцию «Упорядочить»:
Где щелчком по стрелочке открыть окошко с перечнем вариантов:
Поскольку в нашем примере изображений только два, то на вполне подойдёт режим двух окон. Мы можем выбрать горизонтальное расположение окон или же вертикальное. Выбираем тот вариант, который нам больше нравится и удобней:
What does TinyPNG do?
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!
Why should I use TinyPNG?
PNG is useful because it’s the only widely supported format that can store partially transparent images . The format uses compression, but the files can still be large. Use TinyPNG to shrink images for your apps and sites. It will use less bandwidth and load faster .
Can anyone tell the difference?
Excellent question! Let me give you a side by side comparison. Below are two photos of my cousin. The left image is saved as 24-bit PNG directly from Adobe Photoshop. On the right is the same image processed by TinyPNG. Spot any difference?
How does it work?
Excellent question! When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result: better PNG files with 100% support for transparency . Have your cake and eat it too!
In the above image the file size is reduced by more than 70% . I have excellent eyesight but can’t spot the difference either! Use the optimized image to save bandwidth and loading time and your website visitors will thank you.
Is it supported everywhere?
Excellent question! The files produced by TinyPNG are displayed perfectly on all modern browsers including mobile devices . Still need to support Internet Explorer 6? It normally ignores PNG transparency and displays a solid background color. With TinyPNG the background becomes transparent again. Binary transparency without any workarounds!
Is it safe to use animated PNG?
Excellent question! Chrome, Firefox and Safari all support APNG. Google added their support in Chrome 59 only just recently in June 2017 so it is expected that the format will really start to take off from now! It only leaves Microsoft Edge and we can vote for their support.
Apple added animated stickers to iMessage with the release of iOS 10.
Как уменьшить размер фото до нужного размера
If you want to create and compress stickers under 500 KB take a look at the iMessage Panda sticker example on Github.
What about Photoshop?
Excellent question! Only Photoshop CC 2015, 2017 and 2018 can save images as indexed PNG files with alpha transparency. With other versions it is impossible and Photoshop CS5 cannot even display them properly.
You can use Save for Web to export your images as 24-bit transparent PNG files and upload them to TinyPNG. We’ll convert them to tiny indexed PNG files. You can also install the TinyPNG Photoshop plugin. It allows you to scale, preview and save compressed PNG and JPEG images straight from Photoshop.
Без потери качества. Под «без потери качества» подразумевается, что визуально оригинальные и оптимизированные изображения ни чем не будут отличаться. Я читал на Хабре довольно много статьей посвященных данному вопросу, но скажу, большая часть - полная чушь, в них констатируются факты, а не причины. Данный обзор посвящен людям, которые имеют базовые знания об оптимизации изображений.
PNG
И так, как же происходит оптимизация? Давайте разберемся по порядку, в основном это происходит из-за нескольких причин, и сейчас мы их рассмотрим.Non-interlaced или Interlaced
Существуют два метода отображения изображений в браузере при загрузке:- Non-interlaced - браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
- Interlaced - до полной загрузки файла изображение в браузере отображается в низком разрешении. т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается, однако чересстрочное отображение также увеличивает размер файла.
ColorType и BitDepth
ColorType нужен для оптимизации количества цветов в изображении. По этому критерию бываю следующие форматы PNG:- Grayscale;
- Grayscale + alpha;
- Palette (256 цветов);
- RGB + alpha.
PNG RGB + alpha - 17 853 байт
PNG Palette - 13 446 байт
Разница в размере - 4407 байт (24%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.
BitDepth - битовая глубина, бывает двух видов:
- 1-bit;
- 2-bit;
- 4-bit;
- 8-bit;
- 16-bit.
Вот пример работы данной технологии (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму):
PNG 4-bit - 6 253 байт
PNG 8-bit - 5 921 байт
Разница в размере - 332 байт (5,3%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.
Обе технологии поддерживают почти все редакторы изображений, которые умеют сохранять в PNG, но об этом знают мало людей, и по этому разработчикам программ-оптимизаторов PNG приходится об этом заботиться.
Chunks
Если кто в танке не в курсе, PNG состоит из Chunks . Писать, что это такое Chunks не буду, можете сами прочитать. Лучше я покажу, для этого есть программа - TweakPNG , возьмите любое изображение формата PNG и откройте через данную программу и увидите всю структуру PNG.
Есть еще программы наподобие TweakPNG, но она лучшая и удобная. Об остальных программах расскажу в заключении.
Как видно из выше приведенного рисунка, существуют два вида Chunk (столбец Attributes):
- Critical chunks присутствуют в любом PNG-изображении (IHDR , PLTE для PNG Palette, один и более IDAT и IEND).
- Ancillary chunks являются дополнительными chunks, удаление тех или иных chunks позволяет уменьшить размер изображения, но не намного.
Оптимизация палитры
Может быть реализована только в PNG Palette, технология основана на оптимизации chunks PLTE , может уменьшить размер изображения, хотя и не намного. На мой взгляд лучше все это технология реализована в Color Quantizer , один из его алгоритмов был реализован и в TruePNG .Оптимизация альфа-канала
Про эту технологию узнал от Сергея Чикуенока (Про PNG. Часть 3). Сейчас эта технология развита, и используется очень часть и дает существенный прирост к оптимизации. Главный недостаток - технология вводит изменения в само изображение (в Chunks IDAT), а не в структуру, однако визуально изображение не изменится. Могу привести в пример две программы:- TruePNG от автора Color Quantizer;
- CryoPNG - более продвинутая технология оптимизации и требует большего времени, может увеличить степень сжатия.
Оригинальное изображение. Размер - 214 903 байт.
CryoPNG (параметр -f0). Размер - 107 806 байт.
CryoPNG (параметр -f1). Размер - 105 625 байт.
CryoPNG (параметр -f2). Размер - 107 743 байт.
CryoPNG (параметр -f3). Размер - 114 604 байт.
CryoPNG (параметр -f4). Размер - 109 053 байт.
Недостаток CryoPNG - требуется оптимизация всех пяти изображений для выявления наилучшего результата, а это в свою очередь требует большого количества времени.
TruePNG работает в этом плане аналогично CryoPNG -f0, в свою очередь CryoPNG -f0 является оптимальным с точки зрения оптимизации PNG (как говорится это просто опыт). По моим наблюдениям, CryoPNG -f1 и CryoPNG -f4 намного чаще оптимизируют PNG лучше CryoPNG -f0, по сравению с CryoPNG -f2 и CryoPNG -f3.
Алгоритм сжатия Deflate + Фильтрация строк
Как мы же говорили, PNG состоит из Chunks, в данном случае, нас интересует Chunks - IDAT. Для его сжатия в основном играют два фактора, фильтрация строк и алгоритм сжатия Deflate. Давайте об этом поговорим поподробнее.Фильтрация строк
Фильтры , которые применяются в PNG, нужны для того, чтобы подготовить данные к сжатию и таким образом увеличить его степень. Фильтр обрабатывает каждую строку таким образом, чтобы приходилось кодировать не сами значения байтов, а разницу между текущим и предыдущим. От фильтра зависит, какой считается предыдущим.- None - фильтр отсутствует;
- Sub смотрит байт в той же строке;
- Up - с тем же номером, что и текущий в предыдущей;
- Average берет оба и считает от них среднее арифметическое;
- Paeth смотрит байт перед байтом в предыдущей строке, сравнивает разницу и кодирует наименьшую.
PNGOut не создает такие фильтры, однако в новой версии появилась поддержка встроенных фильтров. Это было сделано по моей просьбе.
Алгоритм сжатия Deflate
На сегодняшний день есть несколько библиотек, основанных на алгоритме сжатия Deflate :| Библиотека
Deflate |
Скорость
работы |
Степень
сжатия |
Программы | Примечание |
| Zlib | Высокая | Низкая | TruePNG PNGWolf |
Благодаря высокой скорости работы может быстро перебрать большое количество значение параметров и выбрать оптимальные. |
| 7-zip | Средняя | Средняя | PNGWolf |
Не всегда выбранные значения параметров в Zlib являются для них оптимальными (близки к оптимальным). Перебор значений параметров будет занимать большое количество времени и почти всегда затраченное время не оправдывает полученный результат. |
| Kzip | Низкая | Высокая | PNGOut |
Важно : все эти программы дополняют друг друга, и они сильны, когда едины. Это самое большая проблема, когда их используют отдельно, а потом сравнивают полученные результаты. В первую очередь надо использовать Zlib, а потом уже 7-zip и/или Kzip.
В следующей части мы поговорим об этих программах поподробнее, а также построим три алгоритма оптимизации PNG (с учетом оптимизации альфа-канала) по степени сжатия и затраченного времени. Ниже приведен условный график зависимости степени сжатия от затраченного времени на оптимизацию Chunks IDAT.
Как видно из графика, чем больше степень сжатия, тем больше времени требуется.
И еще немного...
Здесь мы поговорим о двух программах:Рекомендую их использовать в самом конце оптимизации PNG и в том порядке, котором написал выше. Могут уменьшить размер PNG на несколько десятков байт, при этом скорость работы очень высокая.
JPEG
Итак мы переходим к JPEG, здесь все гораздо проще, и так продолжим. Но перед этим скажу, что JPEG нельзя пересохранить не потеряв качество, даже со степенью качеством 100 (это не максимальное качество, а математический предел оптимизации). Рассмотрим следующий пример (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму).Оригинальное изображение - 52 917 байт.
Новое изображение (сохранен через Adobe Photoshop CS5, Save for Web 100) - 53 767 байт
Вот так вот сильно изменилась картинки, да, визуально ничего не заметно. Как видно размер картинки увеличился. Это из-за специфики библиотеки, которая создает JPEG, о библиотеках поговорим чуть позже.
Есть только одна программа, которая позволяет пересохранить изображения в JPEG не потеряв качество - BetterJPEG (есть плагин к Adobe Photoshop). Если не ошибаюсь, для жителей стран СНГ для некоммерческого использования программа бесплатная. Лично я использую BetterJPEG, когда нет исходника и требуется незначительное редактирование изображения. Рассмотрим пример работы BetterJPEG.
Оригинальное изображение.
Новое изображение (усложняем ситуацию, добавляем надпись «HTML»).
Строим diff-разницу изображений.
Markers
JPEG в отличие от PNG состоит из маркеров. Рекомендую прочитать статью «Структура файла, маркеры» , также рекомендую вообще посмотреть сам сайт. Самая мощная программа по изучению структуры JPEG - JPEGsnoop . Есть еще программы, но о них расскажу в заключении. Для изучения структуры JPEG рекомендую следующее изображение - PhotoME .Удаления некоторых маркеров (APP0-APP15, COM), может существенно уменьшить размер изображения. Мне больше всего для этого нравится программа - Jhead , наиболее простая и удобная.
Progressive и Optimized
Существуют три метода отображения изображений в браузере при загрузке.- Стандартный. Сейчас почти не используется, аналогичен оптимизированному методу (степень сжатия хуже).
- Оптимизированный (Optimized) - создается улучшенный файл JPEG с меньшим размером файла. Браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
- Прогрессивный (Progressive) - изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки, т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Internet Explorer, включая восьмую версию, не поддерживает прогрессивную загрузку JPEG, он его показывает только после полной загрузки файла, что сильно отличается от поведения «традиционного» JPEG, когда изображение отображается сверху вниз, по мере загрузки.