Когда следует использовать определенные типы файлов изображений при создании веб-сайтов или интерфейсов и т.д.?
Каковы их сильные и слабые стороны?
Я знаю, что PNG и GIF без потерь, а JPEG - с потерями.
Но в чем основное отличие PNG и GIF?
Почему я должен выбирать один за другим?
Что такое SVG и когда я должен его использовать?
Если вы не заботитесь о каждом пикселе, всегда ли вы используете JPEG, так как он "самый легкий"?
Вы должны знать о нескольких ключевых факторах...
Во-первых, существуют два типа сжатия: Lossless и Lossy.
Существуют также разные глубины цвета (палитры): Индексированный цвет и Прямой цвет.
BMP - Lossless/Indexed и Direct
Это старый формат. Это Lossless (данные об изображении не теряются при сохранении), но также практически никакого сжатия, что означает сохранение, поскольку BMP приводит к ОЧЕНЬ большим размерам файлов. Он может иметь палитры как Indexed, так и Direct, но это небольшое утешение. Размеры файлов настолько неоправданны, что никто никогда не использует этот формат.
Хорошо: ничего действительно. Существует не что-то, что BMP превосходит или не улучшается другими форматами.
GIF - Без потерь/Только индексирование
GIF использует сжатие без потерь, что означает, что вы можете сохранять изображение снова и снова и никогда не теряете никаких данных. Размеры файлов намного меньше, чем BMP, потому что хорошее сжатие фактически используется, но оно может хранить только палитру Indexed. Это означает, что для большинства случаев использования, в файле может быть только 256 различных цветов. Это звучит довольно мало, и это так.
Изображения GIF также могут быть анимированы и иметь прозрачность.
Хорошо для: Логотипы, чертежи линий и другие простые изображения, которые должны быть небольшими. Только на самом деле используется для веб-сайтов.
JPEG - Lossy/Direct
Изображения JPEG были предназначены для того, чтобы сделать как можно более подробные фотографические изображения, удалив информацию, которую человеческий глаз не заметит. В результате формат Lossy и сохранение одного и того же файла снова и снова будут приводить к тому, что с течением времени будет потеряно больше данных. У него есть палитра тысяч цветов, и это отлично подходит для фотографий, но сжатие с потерями означает, что это плохо для логотипов и линейных рисунков: они не только выглядят нечеткими, но и такие изображения также будут иметь больший размер файла по сравнению с GIF!
Хорошо для: Фотографии. Кроме того, градиенты.
PNG-8 - Lossless/Indexed
PNG - более новый формат, а PNG-8 (индексированная версия PNG) - действительно хорошая замена для GIF. Однако, к сожалению, у него есть несколько недостатков: во-первых, он не может поддерживать анимацию, как GIF (может, она может, но только Firefox, похоже, поддерживает ее, в отличие от анимации GIF, которая поддерживается каждым браузером). Во-вторых, он имеет некоторые проблемы с поддержкой старых браузеров, таких как IE6. В-третьих, важное программное обеспечение, такое как Photoshop, имеет очень плохую реализацию формата. (Черт вас, Adobe!) PNG-8 может хранить только 256 цветов, например GIF.
Хорошо для: Главное, что PNG-8 работает лучше, чем GIF, поддерживает Alpha Transparency.
PNG-24 - Lossless/Direct
PNG-24 - отличный формат, который сочетает кодировку Lossless с прямым цветом (тысячи цветов, как JPEG). Это очень похоже на BMP в этом отношении, за исключением того, что PNG фактически сжимает изображения, поэтому это приводит к значительно меньшим файлам. К сожалению, файлы PNG-24 по-прежнему будут больше, чем JPEG (для фотографий), а также GIF/PNG-8 (для логотипов и графики), поэтому вам все равно нужно учитывать, действительно ли вы хотите его использовать.
Несмотря на то, что PNG-24 позволяют тысячи цветов при сжатии, они не предназначены для замены изображений JPEG. Фотография, сохраненная как PNG-24, будет, по меньшей мере, в 5 раз больше, чем эквивалентное изображение в формате JPEG, с очень небольшим улучшением видимого качества. (Конечно, это может быть желательным результатом, если вас не интересует размер файла и вы хотите получить изображение лучшего качества, которое вы можете.)
Как и PNG-8, PNG-24 поддерживает альфа-прозрачность.
SVG - Lossless/Vector
Тип файла, который в настоящее время растет в популярности, - это SVG, который отличается от всего выше, чем файл vector ( выше все raster). Это означает, что он фактически состоит из линий и кривых вместо пикселей. Когда вы увеличиваете векторное изображение, вы все равно видите кривую или линию. Когда вы увеличите масштаб растрового изображения, вы увидите пиксели.
Например:
Это означает, что SVG идеально подходит для логотипов и значков, которые вы хотите сохранить резкость на экранах сетчатки или разных размеров. Это также означает, что небольшой логотип SVG можно использовать в гораздо большем (большем) размере без ухудшения качества изображения - то, что потребует отдельного большего (с точки зрения файла) файла с растровыми форматами.
Размер SVG файлов часто крошечный, даже если они визуально очень большие, и это здорово. Однако стоит иметь в виду, что это зависит от сложности используемых форм. SVG требуют большей вычислительной мощности, чем растровые изображения, потому что математические вычисления участвуют в рисовании кривых и линий. Если ваш логотип особенно сложный, он может замедлить работу компьютера пользователя и даже иметь очень большой размер файла. Важно, чтобы вы максимально упростили свои векторные фигуры.
Кроме того, SVG файлы записываются в XML, поэтому их можно открыть и отредактировать в текстовом редакторе (!). Это означает, что его значения можно манипулировать "на лету". Например, вы можете использовать JavaScript, чтобы изменить цвет значка SVG на веб-сайте, так же, как и какой-либо текст (т.е. Нет необходимости во втором изображении) или даже оживить их.
В целом, они лучше всего подходят для простых плоских фигур, таких как логотипы или графики.
Я надеюсь, что это поможет!
JPEG не самый легкий для всех видов изображений (или даже большинства). Углы и прямые линии и простые "заливки" (блоки сплошного цвета) будут размытыми или иметь артефакты в них в зависимости от уровня сжатия. Это формат с потерями и лучше всего подходит для фотографий, где вы не можете видеть артефакты четко. Прямые линии (например, в рисунках и комиксах и т.д.) Очень сжимаются в PNG и без потерь. GIF следует использовать только тогда, когда вы хотите, чтобы прозрачность работала в IE6 или вам нужна анимация. GIF поддерживает только 256 цветовую палитру, но также без потерь.
Итак, в принципе, это способ определить формат изображения:
И как прокомментировано, если вы не знаете, что будет квалифицироваться, попробуйте каждый формат с различными коэффициентами сжатия и взвешивайте качество и размер изображения и выбирайте, какой из них вы считаете лучшим. Я только даю эмпирические правила.
Google написал об этом очень хорошо. Из Выбор правильного формата изображения вы можете найти блок-схему, чтобы принять решение:
Обычно я использую PNG, так как у него есть несколько преимуществ перед GIF. Раньше существовали патентные ограничения на GIF, но они истекли.
GIF файлы подходят для рисования с острыми краями (например, логотипы) с ограниченным количеством цветов. Это позволяет использовать сжатие без потерь формата, которое поддерживает плоские области однородного цвета с четко определенными краями (в отличие от 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-transparent поддерживается только браузером примерно в последнее время, чем IE6, но есть исправление Javascript для этой проблемы. Оба поддерживают альфа-прозрачность. В общем, я бы сказал, что вы должны использовать png для большинства веб-графики, используя jpeg для фотографий, скриншотов или похожих, потому что сжатие png не слишком хорошо работает на thoose.
GIF на основе палитры из 256 цветов на изображение (по крайней мере, в ее базовом воплощении). PNG может делать "TrueColour", то есть 16,7 миллионов цветов из коробки. Без потерь PNG сжимается лучше, чем GIF без потерь. GIF может выполнять "двоичную" прозрачность (непрозрачность 0% или непрозрачность 100%). PNG может обрабатывать альфа-прозрачные пленки.
В целом, если вам не нужно использовать альфа-прозрачные изображения и поддержку IE6, PNG, вероятно, лучший выбор, когда вам нужны пиксельные изображения для векторных иллюстраций и т.д. JPG идеально подходит для фотографий.
Существует хак, который можно использовать для использования изображений GIF для отображения истинного цвета. Можно подготовить анимацию GIF с 256 цветовыми палитру кадров с 0 задержкой кадра и установить анимацию для отображения только один раз. Таким образом, все кадры могут отображаться одновременно. В конце отображается истинное цветное изображение GIF.
Многие программы способны копировать такие изображения GIF. Однако размер выходного файла больше, чем PNG файл. Он должен использоваться, если это действительно необходимо.
Основное отличие - GIF запатентован и немного более широко поддерживается. PNG является открытой спецификацией, а альфа-прозрачность не поддерживается в IE6. Поддержка была улучшена в IE7, но не полностью исправлена.
Что касается размеров файлов, GIF имеет меньший по умолчанию цветной поддон, поэтому на первый взгляд они имеют меньший размер файлов. PNG файлы имеют больший палитру по умолчанию, однако вы можете сжимать их палитру цветов, чтобы при их уменьшении размер файла меньше, чем GIF. Проблема еще раз заключается в том, что эта функция не поддерживается в Internet Explorer.
Кроме того, поскольку PNG могут поддерживать альфа-прозрачность, они являются единственным вариантом, если вы хотите изменить прозрачность, отличную от двоичной прозрачности.
GIF имеет 8-битную (256 цветовую) палитру, где PNG - до 24 бит цветовой палитры. Таким образом, PNG может поддерживать больший цвет и, конечно, алгоритм поддерживает сжатие
Если вы выбираете JPEG, и имеете дело с изображениями для веб-сайта, вы можете рассмотреть Google Guetzli перцептивный кодер, который свободно доступен. По моему опыту, для фиксированного качества Guetzli создает файлы меньшего размера, чем стандартные библиотеки кодирования JPEG, сохраняя при этом полную совместимость со стандартом JPEG (поэтому ваши изображения будут иметь такую же совместимость, что и обычные изображения в формате JPEG).
Единственным недостатком является то, что Guetzli требует много времени для кодирования.. но это делается только один раз, когда вы готовите изображение для веб-сайта, в то время как преимущества остаются навсегда! Для меньших изображений потребуется меньше времени для загрузки, поэтому скорость вашего сайта будет увеличиваться в повседневном использовании.