Формат PNG и GIF и в формате JPEG и SVG - когда лучше использовать?
когда следует использовать определенные типы файлов изображений при создании веб-сайтов или интерфейсов и т. д.?
каковы их точки силы и слабости?
Я знаю, что PNG и GIF без потерь, в то время как JPEG с потерями.
Но в чем основное различие между PNG и GIF?
Почему я должен предпочесть одно другому?
Что такое SVG и когда я должен его использовать?
Если вы не заботитесь о каждом пикселе, вы всегда должны использовать JPEG, так как это " самый легкий" один?
12 ответов:
вы должны знать о нескольких ключевых факторах...
во-первых, есть два типа сжатия: без потерь и Lossy.
- без потерь означает, что изображение сделано меньше, но без ущерба для качества.
- Lossy означает, что изображение сделано (даже) меньше, но в ущерб качеству. Если вы сохраняете изображение в формате с потерями снова и снова, качество изображения будет получать все хуже и хуже.
существуют также различные глубины цвета (палитры): индексированные цвета и прямые цвет.
- проиндексированных означает, что изображение может хранить только ограниченное количество цветов (обычно 256), контролируемых автором, в так называемой цветовой карте
- прямые означает, что вы можете хранить много тысячи цвета, которые не были непосредственно выбранный автором
BMP - без потерь / индексируется и прямой
Это старый формат. Он без потерь (данные изображения не теряются при сохранении), но также мало для сжатия вообще, что означает сохранение, поскольку BMP приводит к очень большим размерам файлов. Он может иметь палитры как индексированных, так и прямых, но это небольшое утешение. Размеры файлов настолько неоправданно велики, что никто никогда не использует это формат.
хорошо для: ничего на самом деле. Нет ничего, что BMP превосходит, или не делается лучше другими форматами.
GIF - без потерь / индексируется только
GIF использует сжатие без потерь, что означает, что вы можете сохранять изображение снова и снова и никогда не терять никаких данных. Размеры файлов намного меньше, чем BMP, потому что на самом деле используется хорошее сжатие, но оно может хранить только индексированную палитру. Это означает, что для большинства случаев использования, в файле может быть не более 256 различных цветов. Это звучит как довольно небольшая сумма, и это так.
GIF изображения также могут быть анимированы и имеют прозрачность.
хорошо для: логотипы, рисунки, и другие простые изображения, которые должны быть небольшими. Только действительно используется для веб-сайтов.
JPEG - Lossy / Direct
JPEGs изображения были разработаны, чтобы сделайте детальные фотографические изображения как можно меньше, удалив информацию, которую человеческий глаз не заметит. В результате это формат с потерями, и сохранение одного и того же файла снова и снова приведет к потере большего количества данных с течением времени. Он имеет палитру из тысяч цветов и поэтому отлично подходит для фотографий, но сжатие с потерями означает, что это плохо для логотипов и линейных рисунков: они не только будут выглядеть нечеткими, но такие изображения также будут иметь больший размер файла по сравнению с GIF!
хорошее для фотографий. Кроме того, градиенты.
PNG-8 - Без Потерь / Проиндексированных
PNG-это более новый формат, и PNG-8 (индексированная версия PNG) действительно является хорошей заменой для GIF. К сожалению, однако, он имеет несколько недостатков: во-первых, он не может поддерживать анимацию, как GIF can (ну, это может, но только Firefox, кажется, поддерживает его, в отличие от GIF анимации, которая поддерживается каждым браузером). Во-вторых, у него есть некоторые проблемы с поддержкой старые браузеры, такие как IE6. В-третьих, важное программное обеспечение, такое как Photoshop, имеет очень плохую реализацию формата. (Черт бы тебя побрал, Саман!) PNG-8 может хранить только 256 цветов, таких как GIF.
хорошо для: главное, что PNG-8 делает лучше, чем gif, имеет поддержку Альфа-прозрачности.
PNG-24 - Без Потерь / Прямые
PNG-24-это отличный формат, который сочетает в себе кодировку без потерь с прямым цветом (тысячи цвета, как и JPEG). Это очень похоже на BMP в этом отношении, за исключением того, что PNG фактически сжимает изображения, поэтому он приводит к гораздо меньшим файлам. К сожалению, файлы PNG-24 по-прежнему будут больше, чем JPEG (для фотографий) и GIF/PNG-8 (для логотипов и графики), поэтому вам все равно нужно рассмотреть, действительно ли вы хотите использовать его.
несмотря на то, что PNG-24 позволяют тысячи цветов при сжатии, они не предназначены для замены изображений JPEG. Фотографии, сохраненные как PNG-24 будет вероятно, будет по крайней мере в 5 раз больше, чем эквивалентное изображение JPEG, с очень небольшим улучшением видимого качества. (Конечно, это может быть желательным результатом, если вы не беспокоитесь о размере файла и хотите получить изображение лучшего качества, которое вы можете.)
Так же, как PNG-8, PNG-24 поддерживает Альфа-прозрачность, тоже.
SVG - Без Потерь / Вектор
тип файла, который в настоящее время растет в популярности является SVG, который отличается от всех выше в том, что это вектор формат файла (выше все растр). Это означает, что он на самом деле состоит из линий и кривых вместо пикселей. Когда вы увеличиваете векторное изображение, вы все еще видите кривую или линию. При увеличении растрового изображения, вы увидите пиксели.
например:
Это означает, что SVG идеально подходит для логотипов и значков вы пожелайте сохранить резкость на экранах сетчатки или на различных размерах. Это также означает, что небольшой логотип SVG можно использовать в гораздо большем (большем) размере без ухудшения качества изображения-что-то, что потребует отдельного большего (с точки зрения размера файла) файла с растровыми форматами.
размеры файлов SVG часто крошечные, даже если они визуально очень большие, что здорово. Однако стоит иметь в виду, что это зависит от сложности используемых форм. SVGs требуют больше вычислительная мощность, чем растровые изображения, потому что математические расчеты участвуют в рисовании кривых и линий. Если ваш логотип особенно сложен, он может замедлить работу компьютера пользователя и даже иметь очень большой размер файла. Важно, чтобы вы максимально упростили свои векторные фигуры.
кроме того, SVG файлы записываются в XML, и поэтому могут быть открыты и отредактированы в текстовом редакторе(!). Это означает, что его значения можно манипулировать на лету. Например, вы можете использовать JavaScript, чтобы изменить цвет значка SVG на веб-сайте, так же, как вы бы какой-то текст (т. е. нет необходимости во втором изображении), или даже анимировать их.
в целом, они лучше всего подходят для простых плоских форм, таких как логотипы или графики.
Я надеюсь, что помогает!
JPEG не является самым легким для всех видов изображений(или даже большинства). Углы и прямые линии и простые "заливки" (блоки сплошного цвета) будут казаться размытыми или иметь артефакты в них в зависимости от уровня сжатия. Это формат с потерями, и лучше всего подходит для фотографий, где вы не можете ясно видеть артефакты. Прямые линии (например, в рисунках и комиксах и т. д.) сжимаются очень красиво в PNG, и это без потерь. GIF должен использоваться только тогда, когда вы хотите, чтобы прозрачность работала в IE6 или вы хотите анимация. GIF поддерживает только 256 цветовую палитру, но также без потерь.
Итак, в основном вот способ решить формат изображения:
- GIF, если требуется анимация или прозрачность, которая работает на IE6 (обратите внимание, прозрачность PNG работает после IE6)
- JPEG, если изображение является фотографией.
- PNG, если прямые линии, как в комическом или другом рисунке, или если требуется широкий цветовой диапазон с прозрачностью (и IE6 не является фактором)
и как прокомментируйте, если вы не уверены в том, что будет квалифицироваться, попробуйте каждый формат с различными коэффициентами сжатия и взвесьте качество и размер изображения и выберите, какой из них вы считаете лучшим. Я только даю эмпирические правила.
Google написал об этом очень хорошо. От выбор правильного формата изображения, вы можете найти диаграмму, чтобы принять решение:
Я обычно иду с PNG, так как он, кажется, имеет несколько преимуществ перед GIF. Раньше были патентные ограничения на GIF, но они истекли.
GIFs подходят для острых краев линии искусства (например, логотипы) с ограниченным количеством цветов. Это использует преимущества сжатия без потерь формата, который предпочитает плоские области однородного цвета с хорошо определенными краями (в отличие от JPEG, который предпочитает плавные градиенты и более мягкие изображения).
GIF-файлы могут быть использованы для небольших анимация и клипы с низким разрешением.
ввиду общего ограничения на палитру изображений GIF до 256 цветов, она обычно не используется в качестве формата для цифровой фотографии. Цифровые фотографы используют форматы файлов изображений, способные воспроизводить больший диапазон цветов, таких как TIFF, RAW или JPEG с потерями, который больше подходит для сжатия фотографий.
формат PNG является популярной альтернативой GIF изображений, так как он использует лучшие методы сжатия и не имеет ограничения в 256 цветов, но png не поддерживают анимацию. Форматы MNG и APNG, полученные из PNG, поддерживают анимацию, но не используются широко.
JPEG будет иметь низкое качество вокруг острых краев и т. д. и по этой причине он непригоден для большинства веб-графики. Он выделяется на фотографиях.
по сравнению с GIF, PNG предлагает лучшее сжатие, большую палитру и больше возможностей, включая прозрачность. И это без потерь.
GIF ограничен 256 цветами и не поддерживает реальную прозрачность. Вы должны использовать PNG вместо GIF, потому что он предлагает лучшее сжатие и функции. PNG отлично подходит для небольших и простых изображений, таких как логотипы, значки и т. д.
JPEG имеет лучшее сжатие со сложными изображениями, такими как фотографии.
png имеет более широкую цветовую палитру, чем gif, и gif является правильным, а png-нет. gif может делать анимацию, чего обычный-png не может. png-прозрачность поддерживается только Браузером примерно более поздним, чем IE6, но для этой проблемы есть исправление Javascript. Оба поддерживают Альфа-прозрачность. В общем, я бы сказал, что вы должны использовать png для большинства webgraphics при использовании jpeg для фотографий, скриншотов или похожих, потому что сжатие png не слишком хорошо работает на thoose.
есть хак, который можно сделать, чтобы использовать GIF изображения, чтобы показать истинный цвет. Можно подготовить GIF-анимацию с 256 цветными палитрами кадров с задержкой 0 кадров и установить анимацию, которая будет показана только один раз. Таким образом, все кадры могут быть показаны одновременно. В конце концов, истинные цветные изображения в формате GIF просмотру.
многие программы способны prapaering таких GIF изображений. Однако размер выходного файла больше, чем файл PNG. Он должен быть использован, если это действительно необходимо.
GIF основан на палитре из 256 цветов на изображение (по крайней мере, в его базовом воплощении). PNG может сделать "TrueColour", то есть 16,7 миллиона цветов из коробки. Без потерь PNG сжимает лучше, чем без потерь gif. GIF может делать" двоичную " прозрачность (0% непрозрачность или 100% непрозрачность). PNG может обрабатывать Альфа-прозрачные пленки.
в целом, если вам не нужно использовать Альфа-прозрачные изображения и поддерживать IE6, PNG, вероятно, лучший выбор, когда вам нужны пиксельные изображения для вектора иллюстрации и тому подобное. JPG непобедим для фотографий.
основное отличие заключается в том, что GIF запатентован и немного более широко поддерживается. PNG-это открытая спецификация, и Альфа-прозрачность не поддерживается в IE6. Поддержка была улучшена в IE7, но не полностью исправлена.
Что касается размеров файлов, GIF имеет меньшую цветовую палитру по умолчанию, поэтому они, как правило, имеют меньшие размеры файлов на первый взгляд. Файлы PNG имеют большую палету по умолчанию, однако вы можете уменьшить их цветовую палету, чтобы при этом они имели меньший размер файла, чем ФАЙЛ GIF. Проблема снова заключается в том, что эта функция не поддерживается в Интернете.
кроме того, поскольку PNGs может поддерживать Альфа-прозрачность, они являются единственным вариантом, если вы хотите изменить прозрачность, отличную от двоичной прозрачности.
GIF имеет 8-битную (256 цвет) палитру, где PNG как до 24-битной цветовой палитры. Таким образом, PNG может поддерживать больше цвета и, конечно же, алгоритм поддерживает сжатие
Если вы выбираете JPEG, и Вы имеете дело с изображениями для веб-сайта, вы можете рассмотреть Google Guetzli перцептивного кодера, который находится в свободном доступе. По моему опыту, для фиксированного качества Guetzli производит файлы меньшего размера, чем стандартные библиотеки кодирования JPEG, сохраняя при этом полную совместимость со стандартом JPEG (поэтому ваши изображения будут иметь ту же совместимость, что и обычные изображения JPEG).
единственный недостаток в том, что Гетцли берет много времени для кодирования.. но это делается только один раз, когда вы готовите изображение для сайта, а польза остается навсегда! Меньшие изображения будут занимать меньше времени для загрузки, поэтому скорость вашего сайта будет увеличиваться в повседневном использовании.