Почему при сохранении в jpg из фотошопа теряется качество

Обновлено: 05.01.2025

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

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

1. Сохраняем изображение со стандартными настройками фотошоп

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

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

После этого переходим в верхнем меню в "Файл" - "Экспортировать" - "Сохранить для Web" и в открывшейся панели настроек сохранения устанавливаем jpg наилучшего качества. Сохраним изображение в JPG, так как это самый популярный формат как для фотографов, так и для веба. Галочку на пункте "Оптимизация" оставим, хотя данный параметр уже подразумевает искажение цвета, так как он оптимизирует изображение, т.е. немного его сжимает, что приводит к искажению и цвета и общего качества, но искажения очень минимальны, а польза от оптимизации ощутима.

Теперь открываем сохранённую палитру фотошопом и снова инструментом "Пипетка" проверяем результат. Как мы видим, цветовая гамма сильно искажена, т.е. цвета при сохранении изменились.

Даже если рядом сопоставить изображения видна разница, на одном цвета ярче, на другом бледнее.

Повторюсь, что на дешёвых мониторах данная разница не видна, но нам же нужно максимально точно передать цвет и мы рассчитываем, что нашу работу будут смотреть не только владельцы дешёвых мониторов?

2. Настраиваем цвета фотошоп

Давайте откроем настройки цвета фотошоп и изменим их, после чего повторим эксперимент. Переходим в верхнем меню "Редактирование" - "Настройка цветов..", либо нажимаем комбинацию клавиш "Shift" + "Ctrl" + "K". В появившемся окне нам необходимо поменять настройку RGB на "sRGB IEC61966-2.1", по умолчанию у меня стоит "Adobe RGB (1998)". Меняем данную настройку и сохраняем изменения, кликнув на "Ok".

3. Сохраняем изображение с новыми настройками фотошоп

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

Результат радует, все шесть цветов в палитре абсолютно идентичны, т.е. фотошоп передал все цвета именно в том качестве, которое мы видели на рабочем экране.

Вывод

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

Настоящий урок я посвятил 1 подготовке любого цифрового изображения, читаемого графическим редактором Adobe Photoshop, будь то PSD-файла, TIF-изображения или «большой» JPEG-картинки, к публикации на сайте, в форуме или социальных сетях, а также к пересылке по электронной почте. Другими словами, «джейпег» для Интернет. В рифму получилось.

Безусловно, форматы изображений, которые умеет читать Photoshop, едва ли исчерпываются названными тремя. И что приятно, большинство можно перевести в JPEG. Вне зависимости от исходного формата в Photoshop существуют два пути «джейпегизации». Возможность выбирать приятна вдвойне. Оба пути различаются. Внешние отличия обнаруживаются невооружённым взглядом, отличия в назначении («Каким путём следовать?») я выделю специально.

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

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

Покажу, как сохранить изображение в формате JPEG на примере рисунка, созданного в Photoshop.

Первый способ

1 шаг

Открываю исходное изображение в Photoshop. В моём случае это файл с названием «Пример.psd», содержащий нарисованный шар.

Нажимаю на клавиатуре сочетание клавиш «Ctrl», «Shift» и клавиши, обозначенной латинской буквой «S» либо выбираю в главном меню «Файл» («File») > «Сохранить Как…» («Save As…»). Появляется диалоговое окно с заголовком «Сохранить как».

2 шаг

Выбираю месторасположение будущего JPEG-изображения. В поле «Имя файла» ввожу новое название картинки, если необходимо. В ниспадающем списке «Тип файла» выбираю формат «JPEG (*.JPG, *.JPEG, *.JPE)».

Параметры ниже оставляю без изменений, удостоверившись, что в качестве цветового профиля, встраиваемого в будущее JPEG-изображение, указан и выбран «стандартный» sRGB. Если это так, то перехожу к 4-ому шагу.

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

3 шаг

Нажимаю на клавиатуре клавишу «Esc», чтобы закрыть окно «Сохранить как».

Выбираю в главном меню «Изображение» («Image») > «Режим» («Mode»). Если «галочка» установлена напротив «8 бит\канал» («8Bits\Channel»), то выбираю «16 бит\канал» («16bits\Channel»). Увеличение глубины цвета желательно, чтобы конвертация из одного цветового профиля в другой прошла аккуратно. Визуально на исходном и итоговом изображениях изменение глубины цвета едва ли отразится.

Затем выбираю в главном меню «Редактировать» («Edit») > «Преобразовать в профиль» («Convert to Profile»). Появляется диалоговое окно с заголовком «Преобразовать в профиль».

В моём случае исходный цветовой профиль («Source Space»), который описывает цвета в рисунке, называется «Adobe RGB (1998)». Выбираю в ниспадающем списке «Целевой профиль» («Destination Space») значение «sRGB IEC61966-2.1». Проверяю параметры преобразования – они располагаются ниже: параметр «Инструмент» («Engine») имеет значение «Adobe (ACE)», «Метод (рендеринга)» («Intent») – «Относительный колориметрический» («Relative Colorimetric»), установлена «галочка» напротив параметра «Использовать компенсацию точки чёрного» («Use Black Point Compensation»), «галочка» отсутствует напротив параметра «Свести изображение, чтобы сохранить вид» («Flatten Image to Preserve Appearance»).

Если Вы увеличили глубину цвета (я проделал это чуть раньше), то параметр «Использовать дизеринг» («Use Dither») будет неактивным. Если в открытом изображении всего один слой (когда Вы открываете JPEG-картинки или «простые» TIF-изображения, обычно, так и есть), то параметр «Свести изображение, чтобы сохранить вид», также, неактивен.

Нажимаю кнопку «Готово» («OK»). Окно «Преобразовать в профиль» исчезает.

Снова открываю окно «Сохранить как» и проделываю действия 2-ого шага.

4 шаг

Нажимаю в окне «Сохранить как» кнопку «Сохранить».

В главном окне программы появляется новое диалоговое окно с заголовком «Параметры JPEG» («JPEG Options»). Параметр «Качество» («Quality») позволяет задавать соотношение качества выходного изображения и объёма, который картинка будет занимать в памяти компьютера. Таким образом, оплатой за уменьшение объёма является деградация качества исходного изображения. Чем меньше значение параметра «Качество», тем меньше объём JPEG-изображения.

В рассматриваемом примере я остановлюсь на значении равном 6.

Чтобы оценить качество картинки до сохранения, установлю рядом с параметром «Предпросмотр» («Preview») «галочку».

5 шаг

Установлю значение второго параметра – «Форматирование» («Format Options») – равным «Стандартное оптимизированное» («Baseline Optimized»). Объём будущей JPEG-картинки уменьшился, а качество изображения осталось прежним.

6 шаг

Нажимаю в окне «Параметры JPEG» («JPEG Options») кнопку «Готово» («OK») и проверяю результат.

Сравниваю объёмы исходного PSD-рисунка (

3000 Kb) и итоговой JPEG-картинки (82 Kb). Таким образом, JPEG-файл получился примерно в 36 раз меньше исходного изображения при визуально равном качестве. Удобно!

Обращаю внимание, что размер итогового JPEG-изображения остался прежним, как у исходного PSD-рисунка он равен 2480 пикселей × 2480 пикселей.

Закрываю исходное изображение. В появившемся диалогом окошке с предложением сохранить изменения, выбираю «Нет» («No»).

Второй способ

1 шаг

Открываю исходное изображение в Photoshop.

Нажимаю на клавиатуре сочетание клавиш «Ctrl», «Alt», «Shift» и клавиши, обозначенной латинской буквой «S» либо выбираю в главном меню «Файл» > «Сохранить для Веб…» («Save for Web…»).

Появится новое диалоговое окно с одноимённым заголовком.

2 шаг

В появившемся окне «Сохранить для Веб» («Save for Web») в ниспадающем списке в верхней части окна выбираю значение «JPEG».

3 шаг

Устанавливаю значение параметра «Качество» («Quality») на максимум.

4 шаг

Уменьшаю размер изображения с помощью параметра «Размер изображения» («Image Size»).

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

В данном примере ввожу в поле «Ширина» («Width») значение 600. Автоматически изменится значение в поле «Высота» («Height»). Также, автоматически изменится размер выходного изображения относительно размера исходного рисунка, указанный в поле «Процент» («Percent»). Изменения происходят автоматически и поле «Процент» находится в активном состоянии, если поля-параметры «Ширина» и «Высота» связаны, о чём свидетельствует соответствующий значок, расположенный справа от названных полей.

В окошке предпросмотра слева оценю размер и качество изображения. А примерный объём последнего смогу узнать по числу, указанному, обычно, в килобайтах (Kb) или мегабайтах (Mb) под левым углом окошка.

5 шаг

Устанавливаю «галочку» рядом с параметром «Оптимизированный» («Optimized»).

6 шаг

Если хочу ещё сократить объём выходного изображения, то уменьшаю значение параметра «Качество» («Quality»). Рекомендую придерживаться значений в пределах 45-90.

В данном случае я выберу значение равное 75.

В итоге, среднестатистическое, при скорости доступа в Интернет равной одному мегабиту (1 Mbits), время загрузки моего рисунка из Интернет составит одну секунду. Оно указывается под значением объёма будущего JPEG-изображения.

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

7 шаг

Устанавливаю «галочку» рядом с параметром «Преобразовать в sRGB» («Convert to sRGB») и выбираю значение «Цвета, отображаемые монитором» («Monitor Color») в ниспадающем списке ниже.

8 шаг

Наконец, устанавливаю «галочку» рядом с параметром «Встроенный цветовой профиль» («Embed Color Profile»).

9 шаг

В появившемся диалоговом окне с заголовком «Сохранить оптимизированное изображение как» («Save Optimized As») выбираю месторасположение JPEG-картинки и задаю её имя, если необходимо. Нажимаю в активном окне кнопку «Сохранить». Оба окна исчезают. Теперь могу оценить результат.

Изображение, полученное вторым способом, удобно применять для публикации в Интернет. А изображение, полученное первым способом, можно помимо публикации в Интернет выводить на печать. В виду того, что размер изображения не изменялся, оно не подвергалось интерполяции, а значит его качество априори выше качества изображения, полученного вторым способом.

Подробнее об интерполяции и её влиянии на деградацию качества цифрового изображения я расскажу в уроке «Что такое интерполяция?»

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

Прошу Вас поделиться в комментариях результатами упражнений.

Упражнения

36 Mb) с изображениями-примерами.

Подготовьте фотографию «Пример1.jpg» для публикации в электронном портфолио. Для этого создайте три JPEG-изображения максимального, насколько это возможно, качества. Пусть объём каждого (место, занимаемое в памяти компьютера) не превышает 100. При этом, пусть высота первой картинки будет равна 800 пикселам, второй – 500 пикселам, и третьей – 50 пикселам. Какое значение параметра «Качество» Вам потребовалось установить в каждом из трёх случаев? При каком минимальном значении параметра «Качество» третья картинка выглядит приемлемо?
Подготовьте рисунок «Пример2.psd» к печати в местной фотолаборатории, которая не принимает -файлы, сохранив изображение в максимальном качестве в формате JPEG. Каков фактический объём получившейся JPEG-картинки?
Подготовьте фотографию «Пример1.jpg» к отправке на фотоконкурс. Организаторы конкурса хотят оценить не только смысловое содержание фотографии, но и её техническое качество. Поэтому они установили требования к принимаемым произведениям: объём – не более 300, размер – не менее 2048 пикселей по длинной стороне. Какая пара чисел «значения параметра “Качество” - размер по длинной стороне в пикселах» будут наиболее эффективно удовлетворять указанным требованиям?
Сохраните рисунок «Пример2.psd» в формате JPEG в 7-10 вариантах, отличающихся лишь значением параметра «Качество» на 10-15%. Например, «Пример2_10.jpg» сохраните со значением параметра «Качество» равным 10, «Пример2_20.jpg» – со значением параметра «Качество» равным 20 и так далее. При этом, размер всех вариантов уменьшите вчетверо относительно размера исходного изображения. Затем последовательно, начиная от картинки наилучшего качества, покажите в одном и том же масштабе все варианты двум-трём людям и попросите их выбрать варианты приемлемого качества. Начиная с какого значения параметра «Качество», картинка перестаёт быть визуально приятной (укажите среднее значение)?
Сохраните фотографию «Пример3.tif» в формате JPEG в трёх вариантах максимального, насколько это возможно, качества так, чтобы каждый вариант пользователь мог загрузить не более, чем за 1 секунду при скорости доступа в Интернет равной 1 Mbits. В первом варианте уменьшайте размер за счёт параметра «Качество», во втором варианте – за счёт параметра «Размер изображения» (или «Процент»), в третьем варианте – за счёт комбинирования и первого, и второго параметров. Покажите все варианты двум-трём людям и попросите их выбрать вариант наилучшего качества. Какой подход позволяет получить изображение наилучшего технического качества?

Примечание:

1 Одна из причин, побудивших меня подготовить данный урок заключается в следующем. Периодически я получаю фотографии и разнообразные изображения. Друзья присылают личные снимки, участники занятий – результаты выполненных заданий. Многие из присылаемых картинок, мягко говоря, огромны «не по назначению»: как по объёму в килобайтах, так и по размеру в пикселах. Требуется время, чтобы скачать изображения. А если фотографии, объём которых исчисляется мегабайтами, направятся ко мне во вложении к письму по электронной почте, то почтовый клиент будет воспроизводить их с временной задержкой, иногда достаточно ощутимой, и в 100% масштабе. Признаюсь, всё это создаёт неудобства. Представьте, сколько бы чужого времени я тратил, если бы публиковал на своём сайте или отправлял потенциальным клиентам фотографии в оригинальном качестве. Обратно к тексту.

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

А всё почему?, а всё потому, что графический формат JPEG не предназначен для редактирования.
Учите материальную часть)) Ну а если в фотошоп пересохранить jpg в tiff например?
и обрабатывать уже этот полученный tiff ?

Да, это правильно. Чтобы весил полегче, сохраняйте Tiff с LZW компрессией.
Но это если мы говорим о многократном пересохранении файла.

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

1. Открыл исходник
2. Отретушированную версию сохраняешь в PSD (зачем tiff ?)
3. Готовый вариант сохраняешь в Jpg
а) для печати (на листе формата печати)
б) для web (по требованиям сайта)
в) в CMYK для типографии (тут может потребоваться tiff)
4. Перенёс исходник в архив, а готовый вариант в соответствующую папочку
5. Убил все PSD Выложите файл. Покрутим всем миром. Только не марку 400х300 точек, а нормальный файл. На файлообменку куда-нить За не именеем гербовой - пишут на обычной. ;-)
Тут уж, что есть - то есть. Считаем этот Jpg - исходником и не трогаем, а вся ретушь только с копиями в PSD. Выложите файл. Покрутим всем миром. Только не марку 400х300 точек, а нормальный файл. На файлообменку куда-нить Т.е я открываю жипег , сразу без обработки сохраняю как PSD , потом открываю этот psd и работаю с ним без потери кач-ва и глубины цвета , потом сохраняю в жипег для печати. я правильно понимаю?

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

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

Non-interlaced или Interlaced

Non-interlaced — браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
Interlaced — до полной загрузки файла изображение в браузере отображается в низком разрешении. т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается, однако чересстрочное отображение также увеличивает размер файла.

ColorType и BitDepth

Grayscale;
Grayscale + alpha;
Palette (256 цветов);
RGB;
RGB + alpha.

PNG RGB + alpha — 17 853 байт

PNG Palette — 13 446 байт

Разница в размере — 4407 байт (24%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.

PNG 4-bit — 6 253 байт

Разница в размере — 332 байт (5,3%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.

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

Chunks

Если кто ~~в танке~~ не в курсе, PNG состоит из Chunks. Писать, что это такое Chunks не буду, можете сами прочитать. Лучше я покажу, для этого есть программа — TweakPNG, возьмите любое изображение формата PNG и откройте через данную программу и увидите всю структуру PNG.

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

Critical chunks присутствуют в любом PNG-изображении (IHDR, PLTE для PNG Palette, один и более IDAT и IEND).
Ancillary chunks являются дополнительными chunks, удаление тех или иных chunks позволяет уменьшить размер изображения, но не намного.

Оптимизация палитры

Может быть реализована только в PNG Palette, технология основана на оптимизации chunks PLTE, может уменьшить размер изображения, хотя и не намного. На мой взгляд лучше все это технология реализована в Color Quantizer, один из его алгоритмов был реализован и в TruePNG.

Оптимизация альфа-канала

от автора Color Quantizer; — более продвинутая технология оптимизации и требует большего времени, может увеличить степень сжатия.

Оригинальное изображение. Размер — 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. Давайте об этом поговорим поподробнее.

Фильтрация строк

None — фильтр отсутствует;
Sub смотрит байт в той же строке;
Up — с тем же номером, что и текущий в предыдущей;
Average берет оба и считает от них среднее арифметическое;
Paeth смотрит байт перед байтом в предыдущей строке, сравнивает разницу и кодирует наименьшую.

; .

Алгоритм сжатия Deflate

На сегодняшний день есть несколько библиотек, основанных на алгоритме сжатия Deflate:

Библиотека Deflate	Скорость работы	Степень сжатия	Программы	Примечание
Zlib	Высокая	Низкая	TruePNG OptiPNG PNGWolf	Благодаря высокой скорости работы может быстро перебрать большое количество значение параметров и выбрать оптимальные.
7-zip	Средняя	Средняя	AdfDef PNGWolf	Не всегда выбранные значения параметров в Zlib являются для них оптимальными (близки к оптимальным). Перебор значений параметров будет занимать большое количество времени и почти всегда затраченное время не оправдывает полученный результат.
Kzip	Низкая	Высокая	PNGOut

PNGWolf использет одновременно и Zlib, и 7-zip.

Важно: все эти программы дополняют друг друга, и они сильны, когда едины. Это самое большая проблема, когда их используют отдельно, а потом сравнивают полученные результаты. В первую очередь надо использовать Zlib, а потом уже 7-zip и/или Kzip.

В следующей части мы поговорим об этих программах поподробнее, а также построим три алгоритма оптимизации PNG (с учетом оптимизации альфа-канала) по степени сжатия и затраченного времени. Ниже приведен условный график зависимости степени сжатия от затраченного времени на оптимизацию Chunks IDAT.

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

И еще немного.

Итак мы переходим к JPEG, здесь все гораздо проще, и так продолжим. Но перед этим скажу, что JPEG нельзя пересохранить не потеряв качество, даже со степенью качеством 100 (это не максимальное качество, а математический предел оптимизации). Рассмотрим следующий пример (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму).

Оригинальное изображение — 52 917 байт.

Новое изображение (сохранен через Adobe Photoshop CS5, Save for Web 100) — 53 767 байт

Строим diff-разницу изображений.

Вот так вот сильно изменилась картинки, да, визуально ничего не заметно. Как видно размер картинки увеличился. Это из-за специфики библиотеки, которая создает 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, когда изображение отображается сверху вниз, по мере загрузки.

Библиотека создания JPEG

использует свои собственные библиотеки, их вообще несколько, например, Adobe Photoshop, Save for web — используется для сохранения в WEB. . Использую почти все программы, которые умеют сохранять в JPEG, включая Adobe Fireworks. В библиотеке LibJPEG есть очень интересная программа — JPEGTran (оптимизирует изображение, без потери качества). Имеет смысл применять, если Вы создаете изображения JPEG через Photoshop или Illustrator и оптимизируете через JPEGTran, то получаете максимальный эффект оптимизации, т.к. выходит, что используются две библиотеки. К сожалению, у меня так и не получилось заставить Photoshop сохранять в JPEG, без потери качества.

Сказать какая из двух библиотек оптимизирует лучше, вопрос очень сложный и не однозначный, но из-за очень высокой скорости работы JPEGTran, Вы просто не замечаете его работу, только не забывайте проверять размер изображения, увеличился или нет, Все это можно сделать и через bat. Помните, JPEGTran может переводить JPEG из Progressive в Optimized и наоборот, не изменяя саму картинку.

Заключение

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

Читайте также: