8. Базовая оптимизация JPEG — Xiper
Автор: Евгений Рыжков Дата публикации:
JPEG это лучший формат для фотографий в веб. Так же хорошо походит для изображений, где присутствует плавная смена цветов: градиентов, свечений, теней и т.п. Формат способен отобразить максимальное число цветов, которое может передать монитор — 16,8 миллиона. Сама же аббревиатура JPEG (Joint Photographics Experts Group) означает группу специалистов, разработавших стандарт сжатия JPEG.
Метод сжатия JPEG является сжатием с потерями, вследствие выборочного удаления данных. В итоге получаем более легковесный файл, но с худшим качеством.
Имеем к примеру вот такое исходное фото:
С ним и будем эксперементировать. Открываем окно оптимизации изображения для веб (Файл -> Сохранить для Веб) и выбираем формат JPEG:
Опции предопределенная степень сжатия и качество управляют степенью сжатия файла: чем выше степень сжатия, тем больше потерь в изображении (хуже качество), тем меньше весит файл.
Обычно степень сжатия применяется в пределах 45-65.
Progressive задает режим построчной развертки изображения, тем самым обычно немного увеличивая размер файла (но бывают исключения, когда Progressive даже уменьшает размер).
Теория: базовые JPEG и построчная развертка
Базовые JPEG загружаются на последовательно, пользователь увидит картинку полностью, только когда она целиком загрузится:
Такой способ загрузки изображения является «базовым» и поддерживается всеми браузерами и устройствами для просмотра веб страниц.
При использовании построчная развертка пользователь увидит сразу картинку целиком. Но сначала она будет в плохом качестве, которое будет постепенно улучшаться по мере загрузки файла:
Построчная развертка не поддерживается старыми браузерами и некоторыми устройствами (они отобразят изображение последовательно).
Какой из способов лучше использовать однозначно сказать тяжело, на этот счет до сих пор ведутся споры: одни считают, что построчная развертка улучшает юзабилити, другие же сетуют, что лишний вес того не стоит да и построчная разверстка больше нагружает ресурсы пользователя. Выбирать метод нужно исходя из задач, стоящих перед верстальщиком.
Optimized — создается улучшенный файл JPEG с незначительно меньшим размером файла. Опция не может быть использована, когда установлен флажок «progressive».
Размытие (blur) задает эффект размытия, увеличивая степень сжатия файла. Можно использовать для незначительного уменьшения объема файла. Обычно применяют в пределах от 0,1 до 0,5.
Вернемся к нашей подопытной картинке. Чтобы поучить коэффициент пользы от оптимизации JPEG в photoshop, сохраню сначала картинку просто в JPEG (Файл-> Сохранить как..). Качество при сохранении установлю Medium, получаем:
36,8Kb
Теперь возьму исходную картинку и сохраню ее, используя ручные настройки, при этом качество должно остаться приемлемым.
Открываю окно оптимизации (Файл -> Сохранить для веб…). После сравнений различных вариантов, остановился на такой комбинации: качество 55, не использовать progressive, blur = 0,2
21,3Kb
Результат получился приятным: качество вышло лучше, а вес файла 57.8% меньше. Правда изображение немного потеряло цвета.
Советы
- всегда сохраняй оригинал изображения, т.к. каждое сохранение в формате JPEG приводит к потерям качества, даже если оно сохраняется в качестве 100;
- никогда не сохраняй изображение с качеством 100. Это не максимальное качество, а математический предел оптимизации, при котором изображение будет весить неоправданно много. Качества 95 вполне хватит, чтобы сохранить изображение практически без потерь;
- помни, что в photoshop при качестве ниже 50 включается дополнительный алгоритм оптимизации — color downsampling, который дополнительно усредняет цвет в соседних восьмипиксельных блока:
качество 50
качество 51
Поэтому если на изображении присутствуют очень мелкие контрастные детали, не следует выставлять качество ниже 51.
- если при загрузке страницы используются анимации и присутствуют JPEG-изображения, для них лучше не использовать progressive (помнишь, что это требует дополнительных ресурсов?).
Материалы
- Параметры оптимизации JPEG
- Настройки оптимизации JPEG-файлов в Photoshop
- Последовательные JPEG — быть или не быть?
- Оптимизация JPEG. Часть 3
Сохранение документов. » Adobe Photoshop
Одним из самых важных этапов работы является этап сохранения созданного документа. Для различных целей документы сохраняют по разному. Например для работы в Internet главным требованием для графического документа является его минимальный размер, для полиграфии же наоборот, размер значения не имеет, а имеет значение высокое качество. Для выполнения всех этих условий существуют специальные типы графических файлов, которые мы рассмотрим в этом разделе.Параметры графических форматов.
Рассмотрим основные факторы, которые следует учитывать при выборе типа графического файла.
Распространенность.
Многие приложения, в том числе Adobe Photoshop и Corel Photopaint, имеют собственные форматы файлов. Они поддерживают особые возможности этих программ, но могут оказаться несовместимыми с другими приложениями (например, программные продукты Corel полностью поддерживают форматы и другие форматы Adobe, в отличии от программных продуктов фирмы Adobe, которые с форматами Corel не работают принципиально). Программы иллюстрирования и издательские системы могут не уметь импортировать такие форматы или делать это некорректно. Если вы пользуетесь программами фирмы Adobe, то проблем с форматом Photoshop у вас не возникнет. Его \’понимают\’ Adobe Illustrator, Adobe InDesign, Adobe PageMaker и другие.
Соответствие сфере применения .
Большинство графических форматов ориентировано на конкретные области применения. В случае ошибки при выборе формата изображение может оказаться непригодным для использования. Например, сохранив изображение в формате JPEG с большим коэффициентом сжатия, вы сделаете его непригодным для использования в печати из-за потери качества. При этом повторное открытие и сохранение в другом формате не исправит допущенной ошибки.
Поддерживаемые типы точечных изображений и цветовые модели.
Выбирайте формат файлов, поддерживающий заданные сферой применения тины изображений. Например, формат BMP не поддерживает изображений в модели CMYK, использующейся в полиграфии, и, следовательно, не может использоваться в этой сфере. В Adobe Photoshop вы не сможете сохранить изображение в формате, который не поддерживает его тип или цветовую модель. Программа просто не предложит вам такой формат в списке допустимых. Тем не менее, следует учитывать возможность последующего преобразования типов и цветовых моделей, требуемых в выбранной сфере применения.
Возможность хранения дополнительных цветовых каналов.
Если вам требуются дополнительные цветовые каналы (например, для плашечных цветов), то это существенно ограничивает свободу выбора формата.
По существу, их поддерживают всего два формата: PSD и
Возможность хранения масок.
Чаще всего маски нужны только в процессе редактирования. Если вы не завершили редактирование изображения или планируете вернуться к нему через некоторое время, сохраняйте изображение вместе со всеми созданными масками. Хранение масок в виде альфа-каналов поддерживается далеко не всеми форматами.
Возможность хранения обтравочных контуров.
Обтравочные контуры создаются средствами Photoshop и используются для маскирования фрагментов изображения в программах иллюстрирования и издательских системах.
Если вы готовите изображения для верстки, то лучше выбирать форматы, поддерживающие обтравочные контуры. Разумеется, необходимо предварительно убедиться, что импорт обтравочных контуров в издательскую систему из выбранного формата возможен и осуществляется корректно.
Возможность сжатия графической информации .
Для уменьшения размеров графических файлов многие форматы предполагают сжатие данных. Выбор одного из таких форматов сэкономит место на вашем жестком диске и тех носителях, которые вы, возможно, используете для передачи файлов заказчикам или подрядчикам.
Способ сжатия.
Форматы файлов, поддерживающие сжатие, используют для этого различные алгоритмы.
Все алгоритмы сжатия делятся на те, что не приводят к потерям качества, и те, что снижают качество изображений. Последние позволяют достичь на порядок более высоких коэффициентов сжатия, Выбирайте формат, алгоритм сжатия в котором полностью соответствует сфере применения изображений. Если вы планируете использовать их только для экранного просмотра, то можете пожертвовать качеством изображения (разумеется, в разумных пределах). Подготовка изображений для типографской печати не допускает снижения качества.
Возможность хранения калибровочной информации.
Для точного воспроизведения цветов в полиграфии используются системы управления цветом. В рамках сквозного управления цветом цветовые профили встраиваются в файлы изображений. Если ваш производственный процесс использует управление цветом, то при сохранении файлов следует выбирать форматы, поддерживающие внедрение цветовых профилей.
В первом уроке мы уже рассматривали простейший механизм сохранения файлов. Тем не менее, я вкратце напомню о нем.
Для сохранения документа в Photoshop имеется не одна, а целых три команды: Save (Сохранить), Save As (Сохранить как) и Save for Web (Сохранить для публикации в Internet). Первая из них сохраняет документ под его текущим именем, записывая новую версию изображения поверх старой. Вторая команда, Save As (Сохранить как), предназначена для сохранения документа в файле с другим, отличным от текущего, именем. При этом имя текущего документа изменяется на новое. Наконец, команда Save for Web представляет сложный механизм подготовки изображения для размещения в Internet, что будет рассмотрено ниже.
В поле Имя файла вводят новое имя файла. По умолчанию предлагается его текущее имя. Обратите внимание, что расширение файла в поле File Name (Имя файла) не указано. Оно полностью определяется форматом, выбранным в списке Save As (Сохранить как). По умолчанию предлагается тот же формат, что и у файла текущего документа. Флажок Save Thumbnail (Сохранить миниатюру) позволяет сохранять вместе с изображением его уменьшенную копию, миниатюру. Как вы помните, она используется в диалоговом окне Open (Открыть) для предварительного просмотра открываемых изображений. Также очень важной является опция Save a Copy — она устанавливает режим.
при котором создается копия документа в файле с другим именем. Текущее имя документа при этом не изменяется.
При подготовке изображений для размещения в Internet имеет значение регистр символов, использованных в именах файлов. Некоторые операционные системы (в том числе UNIX, которая используется большинством серверов в Интернете) различают прописные и строчные буквы в именах файлов икаталогов. Чтобы избежать путаницы с регистром символов, обычно пользуются каким-то одним (как правило, нижним). По умолчанию Photoshop дает файлам расширения в верхнем регистре. Флажок Use Lower Case Extensions (Расширение в нижнем регистре) заставляет его использовать для расширений (типов файлов) нижний регистр.
Рассмотрим опции сохранения подробнее. На изображении представлены дополнительные надстройки к изображению, которые можно сохранить не во всех форматах.
Будьте внимательны: если в изображении есть, например, альфа-каналы, а флажок Alpha Channels выключен, то вы не сохраните альфа-каналы даже при выборе формата PSD, поддерживающего их наличие.
Теперь, когда мы умеем грамотно сохранять результат нашей работы, пришло время рассмотреть непосредственно плюсы и минусы, отличия и недостатки основных графических форматов.
Знаете ли вы, почему вы выбираете то, что делаете?
У меня есть подруга в Торонто, которая постоянно смотрит на меня как на своего рода фотографического оракула, готового сообщить ей фотоновости, которых еще не было, и дать мудрый совет по любому фотографическому процессу. Мало ли она знает, как неуместно ее направление. Тем не менее, время от времени я могу быть немного полезен.
Несколько недель назад мы опубликовали сообщение о новом обновлении JPEG, которое привлекло большое внимание (читай: дебаты), в том числе и ее.
Она отметила, что она и другие, кого она знала, постоянно работали в Adobe Photoshop и сохраняли свои фотофайлы PSD или RAW в форматах JPEG, но они были несколько не уверены в том, что это такое. Я понимаю, что это обычное явление, и я сам не понимал этого до тех пор, пока несколько лет назад. Если вы работали в Photoshop и нажали СОХРАНИТЬ КАК в JPEG, вы видели варианты, и многие, возможно, отклонили их. Вот короткая разбивка.
[ОБРАТНАЯ ПЕРЕМОТКА: JPEG получает серьезное обновление — теперь он конкурирует с RAW и TIFF?]
Как добраться
После того, как вы поработали с файлом и он готов к сохранению, выберите «Файл»> «Сохранить как»
Выберите JPEG в раскрывающемся меню «Формат» нажмите «Сохранить»
. Появится следующее меню с параметрами сохранения в формате JPEG.
Что они означают?
Почти каждый сделает вывод о том, что делает ползунок качества и как он повлияет на файл фотографии, что касается объяснения форматов, сайт Adobe Acrobat Standard разбивает их следующим образом:
Формат
Определяет способ отображения файла.
Доступно только для формата JPEG.
Базовый уровень (стандартный)
Отображает полностью загруженное изображение. Этот формат JPEG распознается большинством веб-браузеров.
Базовый (оптимизированный)
Оптимизирует качество цвета изображения и создает файлы меньшего размера, но поддерживается не всеми веб-браузерами.
Прогрессивная (3 скана-5 сканов)
Загрузка изображения, сначала в виде изображения с низким разрешением, с постепенным улучшением качества по мере продолжения загрузки.
Что это означает на практике?
Многое из этого будет зависеть от того, для чего будет использоваться конкретный файл. В наше время ведения блогов и мимолетного внимания быстро загружающиеся веб-страницы часто являются основным фактором. Фактически, медленная загрузка веб-страниц является основной причиной, по которой пользователи покидают свой текущий сайт. Помимо видео, фотографии и изображения, вероятно, являются самым важным фактором для улучшения требований к передаче данных страницы.
Итак, чтобы увеличить оборот и вернуть «клиентов» на ваш сайт, вам нужно, чтобы он работал бесперебойно.
Файлы JPEG великолепны, потому что они сильно сжаты, но при этом сохраняют очень хорошее качество, а без них Интернет был бы другим и более медленным местом. Если вы не знали, JPEG-файлы, по сути, считываются за несколько сканирований. С прогрессивными JPEG они будут хранить сканы (обычно от 3 до 5), и качество каждого скана увеличивается при отображении. Некоторые браузеры будут отображать их постепенно, поэтому при загрузке страницы пользователь что-то увидит, даже если есть что загрузить.
[ОБРАТНАЯ ПРОСМОТРКА: Коллекция Lightroom Workshop v5]
Базовая линия сохранит больше, так как это скан изображения сверху вниз в полном разрешении. Поэтому при загрузке загружается полное разрешение более плотными блоками. Стандарт будет именно таким, а Optimized будет несколько более сжатой версией с меньшим размером файла.
На самом деле выбор того, что использовать, зависит от предпочтений.
Чаще всего я вижу, что люди используют Baseline Optimized, потому что это смесь обоих миров, но лично я бы выбрал прогрессивный формат, даже если он составляет около 10% всех JPEG-файлов в Интернете.
Теги #фотошоп #Лайтрум #jpeg
Кишор Сох
Фотограф и писатель из Майами, его часто можно встретить в собачьих парках и аэропортах Лондона и Торонто. Он также большой поклонник чистки зубной нитью и самый счастливый парень в округе, когда в компании все хорошо.
jpeg — Сохранять параметры качества при сохранении jpg в фотошопе
У меня есть куча изображений, все сохранены с использованием JPEG, качество: 90, субдискретизация ВКЛ (2x2) .
При сохранении как .jpg в фотошопе Сохранить как диалоговое окно не предлагает ни опции качества 0-100, ни флажка/настройки подвыборки.
Можно ли сохранить параметры качества?
Использование Photoshop v20.
Редактировать: В комментариях упоминается несколько других методов сохранения:
- Экспортировать как: Имеет параметр качества 1-100%, но по какой-то причине качество 1% на самом деле соответствует качеству 44 jpg (и субдискретизации 2×2).
- Сохранить для Интернета: качество 0-100. Опять же, 0% здесь соответствует качеству 43 jpg (и субдискретизации 2×2).
- Быстрый экспорт позволяет экспортировать только в формате PNG.
Почему это не 1-к-1, я понятия не имею. ¯\_(ツ)_/¯
- Adobe-Photoshop
- JPEG
8
Не окончательный ответ, но в комментарии указано, что существует несколько способов сохранить файл в фотошопе, однако ни один из них не дает возможности сохранить качество или даже вручную сопоставить его:
Экспортировать как: имеет параметр качества 1-100%, но по какой-то причине качество 1% на самом деле соответствует качеству 44 jpg (и субдискретизации 2×2). 100% соответствует качеству 98 jpg (без субдискретизации). Я не уверен, что он масштабируется линейно.
Сохранить для Интернета: качество 0-100. Опять же, 0% здесь соответствует качеству 43 jpg (и субдискретизации 2×2).
