Руководство для начинающих по JPEG и PNG (и как их использовать)

Что было бы в Интернете с изображениями? За несколько десятилетий Интернет превратился из цифрового матричного принтера в динамический сервер мультимедиа, включая изображения, видео, анимацию и многое другое. Однако когда дело доходит до цифровых фотографий, может возникнуть путаница между JPEG и PNG, особенно когда использовать каждый из них.

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

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

Разница между JPEG и PNG

На первый взгляд (в буквальном смысле) между JPEG и PNG нет никакой разницы. Другими словами, если мы поместим два изображения и попросим вас выбрать, какое из них в формате JPEG, а какое в формате PNG, в большинстве случаев вы не сможете сказать, что именно. Например, возьмите следующее изображение:

Можете ли вы принять решение о том, является ли эта мормонская бабочка Алого цвета изображением в формате JPEG или PNG? Конечно, без системы отсчета сравнивать нельзя:

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

• Формат файлов Объединенной группы экспертов по фотографии (JPEG) обеспечивает сжатие цифровых изображений с потерями. Это означает, что качество изображения заметно, если баланс между этим и размером файла слишком сильно колеблется. JPEG — это «плоские» файлы. Другими словами, они не могут отображать прозрачность внутри файла. Хотя вы можете настроить уровень сжатия, даже при лучших настройках JPEG будет 8-битным файлом, что влияет на динамический диапазон. Более того, JPEG часто включает цветовой профиль, который сообщает мониторам, как отображать цвета внутри.
• В отличие от этого, изображения Portable Network Graphics (PNG) готовы к размещению в Интернете. Это более динамичный формат, чем JPEG, с возможностью вывода 24-битных файлов. Это также формат «без потерь», что означает, что вы можете дублировать его без ухудшения качества изображения. Однако вы не можете настроить сжатие для файлов PNG, а цветовой профиль отсутствует. Несмотря на это, PNG идеально подходит для Интернета, исходя из его технических характеристик.

Это кажется ясным — PNG подходят для Интернета, а JPEG — нет. Ну, это не полная история. Каждый тип файла отлично подходит для определенных приложений. Далее мы их обсудим.

JPEG против PNG: когда вы должны использовать каждый из них

Интернет получает лучшее от файлов JPEG и PNG. На самом деле, они хорошо сочетаются друг с другом без особого пересечения. В качестве удобного звукового фрагмента, вот когда вам следует использовать JPEG против PNG:

Если вы хотите отобразить фотографию, используйте JPEG. Для любого другого файла — особенно цифровой графики — используйте PNG.

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

Например, если вы планируете копировать изображения, используйте формат файла, отличный от JPEG. Это связано с тем, что форматы сжатия с потерями восстанавливают только приблизительную версию файла. Напротив, PNG представляет собой воспроизведение 1:1, поскольку обеспечивает сжатие без потерь.

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

Другие форматы изображений, о которых вы должны знать

Конечно, JPEG и PNG — не единственное сравнение форматов файлов изображений, которое следует учитывать. Существует множество других типов файлов, которые конкурируют за внимание и имеют другие варианты использования:

• Формат графического интерфейса (GIF). Если вы публикуете мем или видео-реакцию в Твиттере с анимацией, это GIF. На самом деле PNG стремился заменить файлы GIF в своей исходной спецификации, и оба они предлагают слои прозрачности.
• Формат файла изображения с тегами (TIFF). Этот растровый формат файлов отлично подходит для печати благодаря поддержке цветовых пространств CMYK.
• Необработанный формат изображения (RAW). Вы будете использовать это только в том случае, если вы фотограф, и это относится только к камере, которую вы используете. Хотя вы можете просматривать файлы RAW на своем компьютере, для их просмотра вам потребуется специальное программное обеспечение. Размеры файлов астрономические, потому что данные полные. На самом деле форматы RAW — это не изображения, а данные, которые при кодировании представляют собой изображение.
• Высокоэффективный файл изображения (HEIF). Это основной формат файлов устройств iOS. Он предлагает лучшее сжатие и размеры файлов, чем JPEG, и может обрабатывать множество различных мультимедийных форматов.

Хотя каждый из этих файлов изображений будет использоваться в Интернете (за исключением файлов RAW в отношении отображения), JPEG по-прежнему доминирует над PNG. У них обоих есть конкретные варианты использования, для которых плюсы и минусы хорошо сбалансированы.

Как подготовить изображения к загрузке (3 способа)

Несмотря на то, что JPEG и PNG оказались ничьей в отношении конечного качества отображения, вы должны обрабатывать каждый формат по-своему, чтобы извлечь из него максимальную пользу. Есть три области, на которые вы можете повлиять на размер файла, качество и общую подготовку ваших изображений:

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

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

1. Установите свои размеры

Размеры изображения важнее для конечного пользователя, чем любая другая точка в цепочке. Это связано с тем, что браузер должен загрузить изображение, а большой файл ухудшит взаимодействие с пользователем (UX). Хотя это не единственное соображение. Конечно, качество тоже имеет значение. Если вы решите сделать изображение крошечным по размеру, это повлияет на конечное качество изображения (в большей степени для JPEG, чем для PNG).

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

Современный кроп-сенсор и полнокадровые цифровые камеры могут создавать изображения с размерами по умолчанию около 6000 x 3000 пикселей (хотя между камерами существуют большие различия). Напротив, изображения с «длинным краем» размером около 2000 пикселей распространены в социальных сетях. Имейте в виду, что это для отображения в полном окне просмотра устройства.

Для изображений блога это эмпирическое правило 2000 пикселей может быть даже всего 1000 пикселей. При этом также учитываются изображения высокой четкости или «Retina». Им часто требуется вдвое больше размеров, чтобы они отображались столь же четко на экранах высокой четкости. На самом деле, резолюция — это хорошее место, чтобы перейти к следующему.

2. Установите правильное разрешение

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

Мы используем Pixels Per Inch (PPI), чтобы обсудить, сколько пикселей может поместиться на экране. Вы также можете выразить это в сантиметрах или точках. Последний предназначен для физических форматов печати, и круги графического дизайна часто используют DPI. Таким образом, вы услышите, что он используется взаимозаменяемо, хотя PPI — правильный термин.

Хотя спецификация изображения PNG использует 72 PPI в качестве оптимального проектного разрешения, это не будет учитывать современные экраны высокой четкости. Хотя вы можете удвоить размеры изображения, чтобы сделать его четким на всех экранах, вы также можете сделать то же самое и с разрешением. Например, сделайте скриншот рабочего стола macOS Big Sur:

Это PNG с 1000 пикселями по длинному краю (в данном случае сверху и снизу). Тем не менее, он использует 144 PPI — хотя есть некоторая «магия» загрузки, которая преобразует разрешение в 72 PPI при загрузке в WordPress.

Изображения PNG и JPEG также могут использовать гораздо более высокие значения PPI — разрешение для печати составляет около 300 DPI/PPI. Более того, многие изображения со стоковых фотосайтов, таких как Pixabay, загружаются с разрешением 300 PPI:

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

3. Оптимизируйте изображения с помощью сжатия

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

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

Эти артефакты должны быть минимальными, чтобы изображение было хорошо представлено. Из-за этого существует множество инструментов для выполнения этой работы. Наиболее доступным является TinyPNG, хотя он также сжимает JPEG:

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

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

JPEG против PNG: как максимально использовать каждый формат

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

• Используйте размеры от 1000 до 2048 пикселей по длинному краю.
• Установите разрешение 144 PPI для всех ваших изображений, чтобы убедиться, что они отображаются четкими и четкими на всех экранах.
• Применяйте тонкое сжатие с помощью оптимизации изображения, чтобы уменьшить размер файла. Принимая все во внимание, большинство изображений будут иметь размер около 100–200 КБ.

Здесь немного больше, основанное на конкретных форматах файлов:

• Для файлов PNG уменьшение размера может слишком сильно ухудшить качество изображения. Идея здесь состоит в том, чтобы поддерживать как можно более высокое разрешение, чтобы смягчить эти факторы.
• Файлы JPEG не выдерживают копирования, так как каждое дублирование ухудшается больше, чем предыдущее. Если вы можете контролировать, откуда берется JPEG (например, если вы сделали фотографию), создайте JPEG из файла TIFF или RAW, чтобы сохранить качество изображения.
• По нашему опыту, файлы JPEG не так хорошо сжимаются, как файлы других форматов. Это означает, что важно подготовить и оптимизировать эти изображения до того, как вы приступите к этапу сжатия.

К настоящему времени вы должны иметь четкое представление о JPEG и PNG, когда их использовать и как подготовить файлы; и если вы все еще хотите знать, какое изображение было JPEG из начала статьи, это первое!

Подведение итогов

Кажется, что изображения управляют паутиной. По этой причине у нас есть несколько форматов файлов, которые помогают нам обеспечить нужное качество при приемлемом размере файла для приложения. JPEG и PNG — это обычное сравнение, потому что неясно, в чем они хороши, и это два популярных формата изображений.

Короче говоря, JPEG для фотографий, а PNG для графики. При подготовке файлов главной задачей должно быть сохранение высокого качества изображения, а не размера файла. Тем не менее, в то время как настройки разрешения дают вам самые большие изменения, это больше влияет на качество изображения. Хитрость заключается в том, чтобы сбалансировать размеры, разрешение и сжатие, чтобы получить изображение, идеально подходящее для Интернета.

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

Изображение предоставлено: minka2507, christels .