Сохранение файлов в других графических форматах. Испытания jpegtran на качество сжатия JPG, JPEG

Здравствуй Хабр!
Вот и настало время второй, и, надеюсь, долгожданной части. Настоятель рекомендую ознакомится с первой частью , ибо без этого будет тяжело понять, о чем я буду писать. В этой части я отойду от теории к практике, а именно покажу небольшое проект для комплексной оптимизации изображений.

Image Catalyst - сборник программ для комплексной оптимизации/сжатии изображений формата PNG и JPEG без потери качества в рамках того же формата. Имеет смысл применять для ускорения загрузки элементов графики (в частности, спрайтов) веб-страничек.

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

Загрузить Image Catalyst 2.0 можно отсюда (только для windows).

Инструменты оптимизации PNG

Для комплексной оптимизации изображений формата PNG используются следующие приложения:
  • (входит в состав AdvanceComp 1.15 от 01.11.2005);
  • CryoPNG от 23.10.2010;
  • DeflOpt 2.07 от 05.09.2007;
  • Defluff 0.3.2 от 07.04.2011;
  • TruePNG 0.3.2.5 от 07.06.2011;
  • PNGOut от 02.07.2011;
  • PNGWolf от 01.04.2011;
  • Zlib 1.2.5 от 19.04.2010.
Подробно об этих приложениях я рассказывал в первой части.

Инструменты оптимизации JPEG

Для комплексной оптимизации изображений формата JPEG используются следующие приложения:
  • Jhead 2.90 от 05.02.2010;
  • JPEGTran (входит в состав Libjpeg 8c от 16.01.2011).
Подробно об этих приложениях я также рассказывал в первой части.

Дополнительное ПО

На сегодняшний день используется также приложение - iniTool 1.20 от 07.02.2010.

Оптимизация PNG


Параметры оптимизации PNG
Поддерживаются оба метода отображения изображений в браузере при загрузке:
  • Non-interlaced - браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
  • Interlaced - до полной загрузки файла изображение в браузере отображается в низком разрешении. Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается, однако чересстрочное отображение также увеличивает размер файла.
Алгоритмы оптимизации PNG
Исходя из параметров оптимизации PNG были созданы следующие алгоритмы оптимизации:
  • Non-interlaced - использует Non-interlaced параметры оптимизации;
  • Interlaced - использует Interlaced параметры оптимизации;
Режимы оптимизации PNG:
В прошлой части, мы говорили, чем больше времени затрачивается на оптимизацию PNG, тем степень оптимизации выше, именно поэтому были разработаны несколько режимов оптимизации:
  • Fast - степень сжатия и скорость оптимизации достаточно высокая;
  • Normal - по сравнению с режимом Fast скорость оптимизации ниже в среднем в 3 раза, степень сжатия выше в среднем на 1,5%;
  • Xtreme - по сравнению с режимом Normal скорость оптимизации ниже в среднем в 4 раза, степень сжатия выше в среднем на 1%.
В некоторых случаях степень сжатия может быть выше на 10% и более.

Оптимизация JPEG


Параметры оптимизации JPEG
Поддерживаются два метода отображения изображений в браузере при загрузке:
  • Optimize - создается улучшенный файл JPEG с незначительно меньшим размером файла. Браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
  • Progressive - изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки, т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Internet Explorer, включая восьмую версию, не поддерживает прогрессивную загрузку JPEG, он его показывает только после полной загрузки файла, что сильно отличается от поведения «традиционного» JPEG, когда изображение отображается сверху вниз, по мере загрузки.
Алгоритмы оптимизации JPEG
Исходя из параметров оптимизации JPEG были созданы следующие алгоритмы оптимизации:
  • Optimize - использует Optimize параметр оптимизации;
  • Progressive - использует Progressive параметр оптимизации;
  • Maximum - сравниваются по размеру изображения, полученные Optimize и Progressive методами оптимизации, и выбирается файл с наименьшим размером, имеет смысл использовать, если размер изображений меньше 10 кбайт, в остальных случаях метод оптимизации Progressive практически всегда превосходит метод Optimize;
  • Default - оптимизирует изображение, но при этом не изменяет параметр оптимизации.

Инструменты оптимизации

  • По умолчанию количество одновременных потоков обработки изображений PNG равно количеству ядер в процессоре, если Вы хотите изменить количество одновременных потоков, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции. Не рекомендуется устанавливать количество одновременных потоков больше количества ядер в процессоре;
  • По умолчанию оптимизируются изображения PNG и JPEG в подпапках указанной папки, если Вы хотите отключить данную функцию, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию создается файл Images.cvs, если Вы не хотите создавать данный файл, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию при оптимизации JPEG-файлов удаляются все Metadata, если Вы не хотите удалять определенные Metadata, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию при оптимизации PNG-файлов удаляются все Chunks, если Вы не хотите удалять определенные Chunks, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию при оптимизации PNG-файлов применяется оптимизация параметров ColorType и BitDepth, если Вы не хотите изменять эти параметры, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию при оптимизации PNG-файлов с альфа-каналом применяется функция «Dirty Transparency», если Вы не хотите применять эту систему, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • Не рекомендуется запускать больше одной копии Image Catalyst за один сеанс оптимизации изображений.
  • В названии и/или в адресе изображений не должны быть символы, такие как & ^ % !

Благодарю за помощь

Хотел отдельно поблагодарить x128 и res2001 (если статья наберет +100, то я отправлю инвайт), без этих людей мой проект вряд ли мог быть реализован. Также хотел поблагодарить всех автор приложений, которые используются в Image Catalyst.

Пару слов о конкурентах

Здесь я расскажу пару слов о конкурентах, а точнее об одном из них, т.к. считаю его достойным конкурентом. ScriptPNG и ScriptJPG довольно интересные проекты, в отличии от Image Catalyst оптимизация изображений форматов PNG и JPEG разделена на два отдельных проекта и нет поддержки параллельной оптимизации PNG. Так же рекомендую посетить и сам сайт проекта, т.к. недавно там появились статьи об оптимизации PNG.

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

Существует один довольно интересный проект - JPGCrush - созданный специально для оптимизации JPEG без потери качества, являясь в свою очередь надстройкой над JPEGTran. Создает JPEG исключительно в формате Progressive. Единственный недостаток - работает только в *nix-системах. Если кто может помочь мне с этой проблемой, прошу обращайтесь в личку.

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

Теги: Добавить метки

Битовая глубина (только в 32-битном режиме)

Задает битовую глубину (16-, 24- или 32-битовую) сохраняемого изображения.

Сжатие изображения

Задает метод сжатия данных совмещенного изображения. При сохранении 32-битового файла tiff можно задать сжатие с прогнозированием, однако вариант использования сжатия jpeg не предлагается. Сжатие с прогнозированием обеспечивает более качественное сжатие данных путем упорядочения значений с плавающей точкой, оно совместимо со сжатием LZW и ZIP.

Примечание.

Сжатие JPEG доступно только для непрозрачных изображений RGB и полутоновых изображений с глубиной цвета 8 бит на канал, размер которых не превышает 30 000 пикселей в ширину или высоту.

Порядок пикселей

Позволяет записать файл TIFF, в котором информация о каналах записывается либо поочередно, либо последовательно. Прежде программа всегда создавала файлы, в которых данные каждого из каналов для каждого пиксела записывались поочередно. Теоретически файл, записанный последовательно, может считываться и записываться быстрее, а также лучше сжимается. Оба метода упорядочения каналов обратно совместимы с более ранними версиями Photoshop.

Формат

Определяет платформу, на которой файл может быть прочитан. Этот параметр полезен в случаях, когда неизвестно, какой программой можно открыть выбранный файл. Photoshop и приложения последнего поколения могут считывать файлы с использованием как формата IBM PC, так и формата Macintosh.

Позволяет сохранять данные с различным разрешением. Photoshop не предлагает возможностей открытия файлов с различным разрешением, изображение открывается в файле с самым высоким разрешением. Однако Adobe InDesign и некоторые серверы изображений поддерживают открытие файлов в форматах с различным разрешением.

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

Сжатие слоев

Определяет метод сжатия данных для пикселов в слоях (вместо комбинирования данных). Многие приложения не могут считывать данные слоев и пропускают их при открытии файла TIFF. Photoshop, однако, может считывать данные слоев в файлах TIFF. Хотя размер файлов, содержащих данные слоев, больше размера файлов без них, сохранение данных слоев избавляет от необходимости сохранять и работать с отдельным файлом PSD для хранения данных слоев. Выберите параметр «Удалить слои и сохранить копию», чтобы выполнить сведение изображения.

Примечание.

Чтобы получать от Photoshop запрос подтверждения перед сохранением изображения с несколькими слоями, выберите параметр «Выводить предупреждение перед сохранением многослойных файлов в формате TIFF» в области «Обработка файлов» диалогового окна «Установки».

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

PNG

И так, как же происходит оптимизация? Давайте разберемся по порядку, в основном это происходит из-за нескольких причин, и сейчас мы их рассмотрим.
Non-interlaced или Interlaced
Существуют два метода отображения изображений в браузере при загрузке:
  • Non-interlaced - браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
  • Interlaced - до полной загрузки файла изображение в браузере отображается в низком разрешении. т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается, однако чересстрочное отображение также увеличивает размер файла.
В заключении дам пару ссылок, где подробнее рассмотрены способы отображения изображений в браузере при загрузке.
ColorType и BitDepth
ColorType нужен для оптимизации количества цветов в изображении. По этому критерию бываю следующие форматы PNG:
  1. Grayscale;
  2. Grayscale + alpha;
  3. Palette (256 цветов);
  4. RGB + alpha.
Технология ColorType как раз выбирает тот формат, при котором изображение будет весить меньше всего, но при этом визуально не изменится. Вот пример работы данной технологии (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму):

PNG RGB + alpha - 17 853 байт

PNG Palette - 13 446 байт

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

BitDepth - битовая глубина, бывает двух видов:

  1. 1-bit;
  2. 2-bit;
  3. 4-bit;
  4. 8-bit;
  5. 16-bit.
Технология BitDepth аналогично ColorType.
Вот пример работы данной технологии (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму):

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, нужны для того, чтобы подготовить данные к сжатию и таким образом увеличить его степень. Фильтр обрабатывает каждую строку таким образом, чтобы приходилось кодировать не сами значения байтов, а разницу между текущим и предыдущим. От фильтра зависит, какой считается предыдущим.
  1. None - фильтр отсутствует;
  2. Sub смотрит байт в той же строке;
  3. Up - с тем же номером, что и текущий в предыдущей;
  4. Average берет оба и считает от них среднее арифметическое;
  5. Paeth смотрит байт перед байтом в предыдущей строке, сравнивает разницу и кодирует наименьшую.
Вообще говоря, нет каких-то определенных рекомендаций, какой фильтр выбирать. Для каждой строки можно выбрать свой фильтр, поэтому часто просто применяют все фильтры подряд и смотрят, с каким сжатие получается лучше всего. Существует еще один фильтр - Adaptive, - можно сказать это «микс» из фильтров. Фильтры поддерживают почти все программы оптимизаторы PNG, но лично мне известны только две программы, которые имеют более продвинутую систему создания фильтров:
PNGOut не создает такие фильтры, однако в новой версии появилась поддержка встроенных фильтров. Это было сделано по моей просьбе.
Алгоритм сжатия Deflate
На сегодняшний день есть несколько библиотек, основанных на алгоритме сжатия Deflate :
Библиотека
Deflate 		Скорость
работы 		Степень
сжатия 		Программы Примечание
Zlib Высокая Низкая TruePNG

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

Важно : все эти программы дополняют друг друга, и они сильны, когда едины. Это самое большая проблема, когда их используют отдельно, а потом сравнивают полученные результаты. В первую очередь надо использовать 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, когда изображение отображается сверху вниз, по мере загрузки.
Подробнее об этом можно прочитать в статье

Если изображения, созданные или обработанные в Фотошоп, оптимизировались нами всё это время форматом JPG и однажды, нам захотелось попробовать сохранить (оптимизировать) их PNG или GIF, то мы действуем также как и в случае с оптимизацией JPG.

Щёлкнув по кнопке «Файл» верхнего меню мы развернём перечень опций, в котором выберем команду «Сохранить как…»:

Запомнив сочетание клавиш Shift+Ctrl+S, мы сократим количество своих действий. Нажатие такого сочетания клавиш сразу же выводит окошко выбора места сохранения и типа файла:

Давайте щёлкнем по стрелочке для раскрытия списка с типами файлов, где выберем тип PNG:

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

После выбора формата PNG, Фотошоп предложит два варианта оптимизации и два варианта вывода уже оптимизированной картинки при просмотре, ну а наша задача сделать свой индивидуальный выбор:

Версия Фотошоп CS6 предусматривает дополнительное пользовательское сжатие на выбор, а предыдущая версия CS5 сжимает картинку самостоятельно автоматически, предлагая нам, лишь определиться с её выводом (появлением) при просмотре:

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

Всё зависит от того кому предназначено изображение и где оно это самое изображение, покинув Фотошоп, будет размещено. Пожалуй, лучшим будет довериться своим глазам. Если, то, что мы видим после сжатия, глаз, как говорят, не радует, то мы пробуем другой вариант. Зацикливаться на степени сжатия и качестве воспроизведения картинки, не будем. Спать мы должны крепко и сладко (юмор).

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

Не будем забывать о супер возможности с помощью PNG при оптимизации, сохранить многоуровневую прозрачность, если наше изображение содержит слои с разной степенью прозрачности:

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

Оптимизируем изображение по варианту сжатия «Нет/быстро»:

А затем, по варианту «Самый маленький/медленно»:

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

Посмотрим на картинку с первым вариантом оптимизации. Достаточно просто навести курсор мыши на изображение:

Теперь переведём курсор мыши на изображение сжатое по второму варианту:

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

Давайте посмотрим на оба варианта оптимизации с помощью средств операционной системы. Оптимизация по первому варианту сжатия:

Теперь посмотрим на оптимизацию с более высокой степенью сжатия (вариант 2):

Опять скажу о себе. При различном размере файлов мои глаза не видят отличий. При переключении с одной картинки на другую я не заметил перехода. Такое впечатление, будто кнопки переключения с изображения на изображение (вперёд/назад) не функционируют.

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

Чтобы провести этот сравнительный анализ нам нужно обратиться к пункту «Окно» верхнего меню и выбрать опцию «Упорядочить»:

Где щелчком по стрелочке открыть окошко с перечнем вариантов:

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