() translation by (you can also view the original English article)
Вы когда-нибудь задумывались, что разница между JPEG, GIF и PNG изображения, которые мы используем в Интернете? Как дизайнер - и особенно веб-дизайнер - важно знать разницу между различными форматами изображений и тем, как их использовать в каждой ситуации. В этой статье рассказывается, как использовать их для каждой ситуации, чтобы размеры файлов были небольшими и качество изображения было высоким. Мы размещаем это в разделе «Basix», но информация должна быть интересной для тех, кто хочет получить более глубокое понимание форматов изображений.
Различия
Чтобы лучше всего использовать инструмент, вам сначала нужно понять, как работает инструмент. Чтобы лучше понять, как использовать типы изображений, нам нужно посмотреть, как работает их алгоритм сжатия. Я знаю, я знаю, ты не подражаешь цифрам и кто действительно заботится? Это все равно что водить машину; вы можете управлять им лучше, когда знаете, как взаимодействуют все маленькие части. Кроме этого, если что-то пойдет не так, вы знаете, как это исправить!
О формате .JPG
JPEG был разработан Совместной группой экспертов по фотографиям. Как вы могли догадаться, это хорошо работает для естественных типов изображений (фотография). Естественные типы изображений, такие как фотография, имеют плавные вариации цветов, что означает, что формат JPEG также хорошо работает для изображений, которые содержат градиенты и различные тона и цвета.
Важным моментом в отношении JPEG является то, что они, как правило, имеют формат с потерями, если вы не используете другой вариант, который без потерь. Потеря компрессии - это просто форма кодирования, которая отбрасывает (теряет) некоторые из ее данных ... вот почему, если вы сохраните JPG 100 раз, со временем она будет постепенно ухудшаться. Существуют «без потерь» версии JPG, но эти варианты не распространены, хотя и не имеют широкой поддержки. Если вам нужно сохранить данные изображения в формате без потерь, лучше использовать формат, например TIFF или PSD.
Теперь для технической части: процесс JPEG делит изображение на блоки размером 8 × 8 пикселей и запускает их через вычисление DCT (дискретное косинусное преобразование), за которым следует квантование (JPEG 2000, более новая версия, использует вейвлет-преобразование вместо DCT ).
С точки зрения непрофессионала: он в основном рассматривает блоки изображения и определяет небольшие цветовые вариации, а затем отбрасывает некоторые из этих вариаций, основываясь на выбранном вами уровне сжатия. Отброшенные данные полностью удаляются из файла, что приводит к небольшому файлу. Следовательно, это также снижает качество изображения; Вероятно, вы знаете, что если вы установите очень высокое сжатие, вы получите ухудшенное пикселированное изображение ... тогда как более низкие параметры сжатия приведут к созданию более качественного изображения.
О. Формате GIF
GIF (Graphics Interchange Format) был разработан CompuServe и использует метод сжатия LZW (Lempel-Ziv-Welch), который без потерь. Этот метод сжатия создает таблицу цветов для изображения, где каждому значению цвета присваиваются пиксели. Этот метод сжатия делает этот формат изображения идеальным для линейного искусства, логотипов или других простых изображений без градиентов или различного цвета.
Одна интересная заметка об этом методе сжатия заключается в том, что он смотрит на изменение изображения по горизонтали. Это означает, что изображения, в которых изменения цвета пикселя, которые происходят чаще по горизонтали, будут больше, чем изображения, где изменения цвета пикселей происходят чаще по вертикали. Формат поддерживает до 8 бит на пиксель, что позволяет одному изображению ссылаться на палитру размером до 256 различных цветов. Вы можете использовать меньше цветов (возможно, вы видели GIF-изображения, используя только несколько цветов), что может привести к некоторым интересным, даже художественным результатам.
GIF могут делать две дополнительные вещи, которые JPEG не могут. Во-первых, GIF может использовать прозрачность. В пикселях GIF либо 100% прозрачны, либо 100% непрозрачны. GIF также является многоформатным форматом, поэтому вы можете использовать анимацию (лучше или хуже).
О. Формате PNG
PNG (Portable Network Graphics) была создана для существенной замены или, по крайней мере, улучшения формата GIF. PNG использует метод сжатия DEFLATE - тот же алгоритм, который используется в zip и gzip. Я не буду вдаваться в то, как работает этот метод сжатия, потому что это слишком сложно для этой статьи, но это сжатие без потерь. Из-за этого формат PNG имеет тенденцию приводить к большему размеру изображения, чем JPEG, когда используется для изображений фотографического типа. При использовании для изображений типа линейного искусства PNG приводит к значительно меньшим размерам файлов, чем JPEG, и почти всегда меньшим размерам, чем GIF.
В отличие от GIF, PNG такой же, как JPEG, в том смысле, что это единый формат изображения; что означает, что PNG не поддерживает анимацию. Тем не менее, он поддерживает основное преимущество, которое ни поддержка JPEG, ни поддержка GIF: альфа-прозрачность. Пиксели в PNG-изображении могут быть прозрачными на 50%, в отличие от формата GIF, который требовал бы, чтобы эти пиксели были либо на 100% прозрачными, либо на 100% непрозрачными. Как вы можете себе представить, это позволит лучше смешивать и плавную графику, чем GIF. PNG также реализует несколько других улучшений по сравнению с форматом GIF, но они не нужны для того, чтобы войти.
Излишне говорить, что PNG - гораздо лучший формат для использования, чем GIF почти во всех отношениях, за исключением очень маленьких файлов (например, это используется в фоновых шаблонах). Формат PNG нарисовал ранний огонь от веб-дизайнеров, поскольку он не совместим с некоторыми старыми веб-браузерами, но эта проблема в значительной степени может быть решена с помощью нескольких великолепных сценариев в наши дни, таких как DD_Belated script.
Как вы, наверное, знаете, существуют два основных типа PNG.
- PNG8 (8 бит) - по сути, такой же, как GIF с точки зрения ограничений цвета (максимум 256 цветов), но допускает альфа-прозрачность
- PNG24 (24-бит) - позволяет использовать гораздо более широкий диапазон цветов.
Использование JPEG, GIF и PNG
Ниже приведены два примера изображений, которые я буду использовать, чтобы показать, как и когда использовать каждый формат изображения. Возможно, вы уже знакомы с этими методами, но если вы их действительно не изучали, это стоит посмотреть.
Использование JPG
Как вы можете видеть, изображение ниже является фотографическим по своей природе с цветами и тонами, которые сильно различаются. Очевидно, что не все изображения будут использовать много цветов, но этот образ отлично подходит для использования в формате JPEG.
Простой JPG
На рисунке ниже показаны сжатие JPEG с параметром качества 100% до 0%. При 100% -ном качестве изображение кажется без потерь, но данные по-прежнему отбрасываются с исходного изображения. Человеческий глаз не может видеть потерю данных, поскольку он является миниатюрным. При 50% качество изображения заметно снижается, но, как видите, размер файла более чем на 100 тыс. Меньше. Это огромная разница с несколько минимальной видимой потерей качества. При 25% изображение действительно начинает плохо выглядеть и не спасло лишний размер файла. При 0% изображение выглядит ужасно и, хотя изображение намного меньше размера файла, чем 100%, компромисс не стоит.
Примеры сжатия JPG
Это изображение, вероятно, будет выглядеть лучше всего на уровне ~ 65%, что уменьшит размер изображения почти на 100 тыс. Чтобы определить наилучшие настройки для JPEG, медленно уменьшайте слайдер, пока не начнете видеть, что качество изображения действительно ухудшается Затем переместите качество примерно на 5-10% или около того.
65% сжатия JPG
Мы знаем, что этот JPG выглядит прилично для Интернета; Давайте посмотрим на некоторые сопоставления файлов / качества для других форматов:
GIF приводит к размеру файла 63.77K и ужасно выглядящему изображению.
PNG8 приводит к размеру файла 53.52K из-за более сложных методов сжатия, но выглядит так же, как GIF.
PNG24 приводит к размеру файла 253,9 тыс. И выглядит близко к оригиналу, но не стоит большого размера файла.
Наилучшим вариантом для этого типа изображения является JPEG при ~ 65% качества; небольшой размер файла (39.77K) с очень небольшим количеством потери качества изображения.
Использование GIF и PNG8
Как вы можете видеть ниже, изображение не использует разные цвета или тона, а вместо этого сплошные цвета. Это изображение 5.72K (GIF) и использует в общей сложности 8 цветов. Это делает GIF и PNG8 отличными форматами для линейного искусства, простых цветных логотипов и т. Д. PNG8 будет лучшим выбором здесь, поскольку это приводит к меньшему размеру файла (3.54K) из-за лучшего метода сжатия, который он использует.
Сжатие GIF (уведомление ограниченная цветовая палитра)
Когда вы пытаетесь сохранить GIF, как и предыдущее изображение, как JPEG, это может привести к пикселизации или искажению изображения. Это всегда приводит к значительно большему размеру файлов, когда вы имеете дело с фотографией и другими богатыми изображениями. Изображение ниже установлено с максимальным сжатием и приводит к размеру файла почти 8K для JPEG против 5.72K для GIF и 3.54K для PNG8.
Сжатие GIF ...
По сравнению с сжатием JPG низкого качества
В отличие от JPEG и PNG24, GIF и PNG8 позволяют вам выбрать, сколько цветов можно использовать (до 256). В случае изображений, таких как логотипы и простые линии, вы можете добиться меньшего размера файла, выбрав меньшее количество цветов. Будьте осторожны, чтобы вы не выбрали слишком мало цветов, хотя это может сделать изображение намного хуже.
Пример выбора GIF цвета
Изображение ниже представляет собой PNG8 с прозрачностью (GIF выглядит так же), как и в Photoshop. При использовании прозрачности с GIF или PNG8 вы хотите установить матовую картинку изображения на любой цвет, который будет иметь фон - для лучшего смешивания и более чистого изображения. Как упоминалось ранее, это связано с тем, что GIF не поддерживает альфа-прозрачность, и Photoshop не поддерживает альфа-прозрачность в формате PNG8, даже несмотря на то, что он ее поддерживает (Edit - с тех пор исправлено в новых версиях Photoshop).
PNG8 пример
К счастью, Fireworks позволяет использовать Alpha Transparency в формате PNG8 (C'mon Photoshop!). Как вы можете видеть на изображении ниже, черный градиент все еще ограничен вариацией тона, что делает градиент немного изменчивым. Самое замечательное в использовании альфа-прозрачности с PNG8 - вы по-прежнему получаете небольшой размер файла, но края плавно плавятся, и даже небольшие градиенты выглядят великолепно.
Другим важным преимуществом формата PNG8 является то, что IE6 поддерживает использование альфа-прозрачности с ним изначально! Это означает, что для простых изображений, требующих альфа-прозрачности (тени, логотипы и т. Д.), Вам не нужно взламывать IE6 при использовании PNG8 и альфа-прозрачности!
PNG8 Пример альфа-прозрачности
К сожалению, вы не можете сохранить изображение PNG8 с альфа-прозрачностью в Photoshop, поэтому вам нужно будет перейти в Fireworks, чтобы сделать это.
В палитре Optimize выберите формат PNG8 с выбранным альфа-прозрачностью, затем нажмите «Перестроить» в нижнем правом углу.
Вам не нужно выбирать матовый цвет, и вы можете настроить количество цветов в соответствии с вашими потребностями и уменьшить размер файла. В примере справа я сохранил эти настройки как «PNG8 Alpha-T», так что мне не нужно повторно выбирать каждую опцию каждый раз, когда я хочу сохранить изображение PNG8 с альфа-прозрачностью.
Вот и все!
С помощью PNG24
Использование PNG24 в основном та же идея, что и использование GIF или PNG8, за исключением того, что это приведет к большему размеру файла, поскольку он поддерживает гораздо более широкий диапазон цветовых вариаций. Если у вас есть изображения с более сложными градиентами, требующими прозрачности или большей глубины цвета, PNG24 - лучший выбор. К сожалению, IE6 не поддерживает PNG24 изначально; поэтому вам придется «взломать» его, чтобы он работал правильно.
В большинстве случаев PNG24 отлично справляется с необходимостью прозрачности - они намного выше по размеру файла, но хорошо работают в таких случаях, как фирменные логотипы, качество которых важно, и вы не хотите использовать формат с потерями.
Другие форматы
WebP (Формат веб-изображений Google):
Это относительно новый формат, объявленный всего пару недель назад самим Google. Из их пресс-релиза:
«Чтобы улучшить сжатие, которое предоставляет JPEG, мы использовали компрессор изображения на основе кодека VP8, который Google открывал в мае 2010 года. Мы применили методы из видеофрагментарного видеокодирования VP8, чтобы нажимать конверт в кодировании неподвижного изображения. Мы также адаптировали очень легкий контейнер на основе RIFF. Хотя этот формат контейнера вносит минимальные накладные расходы только на 20 байт на изображение, он может расширяться, чтобы позволить авторам сохранять метаданные, которые они хотели бы сохранить.
Хотя преимущества формата изображения на основе VP8 были понятны в теории, нам нужно было протестировать их в реальном мире. Чтобы оценить эффективность наших усилий, мы случайно выбрали около 1000000 изображений из Интернета (в основном JPEG и некоторые PNG и GIF) и перекодировали их в WebP без ощутимого компрометации визуального качества. Это привело к уменьшению размера файла на 39%. Мы ожидаем, что разработчики на практике даже улучшат размер файла с помощью WebP, начиная с несжатого изображения ».
Цель здесь проста: ускорить работу с изображениями в Интернете с использованием более современных алгоритмов. Вопрос в следующем: Будет ли принят? Google - это огромная компания с реальной способностью продвигать этот формат в массы, но, как мы видели с некоторыми из ее продуктов (я смотрю на вас, Wave!), Даже отличные идеи могут упасть.
Формат SVG
«Масштабируемая векторная графика» - это формат, который никогда не попадал в качестве широко используемого типа изображения. Идея этого формата - разрешить «векторную графику» в Интернете. Формат использует XML в качестве основы для описания 2D-изображения в Интернете. Поддержка браузера для SVG несовместима, но если вы действительно хотите включить масштабируемую графику, стоит прочитать этот формат.
Вывод
В свободное время я призываю вас углубиться в эти форматы изображений и все, что они могут предложить. Вы узнаете много и точно знаете, что вы можете сделать с этими форматами изображений, или которые можно использовать для каждой ситуации. Значение супер-малых размеров файлов для изображений, по-видимому, проходит по мере расширения широкополосного доступа в Интернете, но скорость всегда будет полезной характеристикой сайта, и понимание этих форматов изображений является первым шагом к оптимизации ваших собственных изображений в Интернете.
Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь публиковать их ниже!
