Когда следует использовать определенные типы файлов изображений при создании веб-сайтов или интерфейсов и т. Д.?
Каковы их сильные и слабые стороны?
Я знаю, что PNG & GIF без потерь, а JPEG с потерями.
Но в чем главное отличие PNG и GIF?
Почему я должен предпочесть одно другому? Что такое SVG и когда мне его использовать?
Если вас не заботит каждый пиксель, следует ли вам всегда использовать JPEG, поскольку он самый «светлый»?
Ответы:
Вы должны знать о нескольких ключевых факторах ...
Во-первых, существует два типа сжатия: Lossless и Lossy .
Существуют также разные глубины цвета (палитры): индексированный цвет и прямой цвет .
BMP - без потерь / индексированный и прямой
Это старый формат. Это без потерь (никакие данные изображения не теряются при сохранении), но также практически нет сжатия, что означает сохранение, поскольку BMP приводит к ОЧЕНЬ большим размерам файлов. Он может иметь палитры Indexed и Direct, но это небольшое утешение. Размеры файлов настолько велики, что никто никогда не использует этот формат.
Хорошо для: ничего особенного. В BMP нет ничего превосходного или лучше других форматов.
GIF - без потерь / только индексированные
GIF использует сжатие без потерь, что означает, что вы можете сохранять изображение снова и снова и никогда не потерять какие-либо данные. Размеры файлов намного меньше, чем BMP, потому что на самом деле используется хорошее сжатие, но оно может хранить только индексированную палитру. Это означает, что в большинстве случаев в файле может быть не более 256 разных цветов. Это звучит как довольно небольшое количество, и это так.
Изображения GIF также могут быть анимированными и иметь прозрачность.
Хорошо для: логотипы, линейные рисунки и другие простые изображения, которые должны быть маленькими. Действительно используется только для веб-сайтов.
JPEG - Lossy / Direct
Изображения JPEG были разработаны таким образом, чтобы детализировать фотографические изображения как можно меньше, удаляя информацию, которую человеческий глаз не заметит. В результате это формат с потерями, и сохранение одного и того же файла снова и снова приведет к потере большего количества данных с течением времени. Он имеет палитру тысяч цветов и поэтому отлично подходит для фотографий, но сжатие с потерями означает, что это плохо для логотипов и штриховых рисунков: они не только будут выглядеть нечеткими, но и такие изображения будут иметь больший размер файла по сравнению с GIF-файлами!
Хорошо для: Фотографии. Также градиенты.
PNG-8 - без потерь / индексированный
PNG является более новым форматом, а PNG-8 (индексированная версия PNG) действительно является хорошей заменой GIF-файлам. К сожалению, однако, у него есть несколько недостатков: во-первых, он не может поддерживать анимацию, как GIF (может, но может, но только Firefox поддерживает ее, в отличие от GIF-анимации, поддерживаемой каждым браузером). Во-вторых, у него есть проблемы с поддержкой старых браузеров, таких как IE6. В-третьих, важные программы, такие как Photoshop, имеют очень плохую реализацию формата. (Черт возьми, Adobe!) 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 - Lossless / Vector
Тип файла, который в настоящее время становится все более популярным, это SVG, который отличается от всего вышеперечисленного тем, что это векторный формат файла (все вышеупомянутые растровые ). Это означает, что он на самом деле состоит из линий и кривых, а не пикселей. Когда вы увеличиваете векторное изображение, вы все равно видите кривую или линию. При увеличении растрового изображения вы увидите пиксели.
Например:
Это означает, что SVG идеально подходит для логотипов и иконок, которые вы хотите сохранить резкость на экранах Retina или разных размеров. Это также означает, что маленький логотип SVG можно использовать в гораздо большем (большем) размере без ухудшения качества изображения - что потребует отдельного более крупного (с точки зрения размера файла) файла с растровыми форматами.
Размеры файлов SVG часто крошечные, даже если они визуально очень большие, и это здорово. Однако стоит помнить, что это зависит от сложности используемых форм. SVG требует большей вычислительной мощности, чем растровые изображения, потому что математические вычисления участвуют в построении кривых и линий Если ваш логотип особенно сложен, он может замедлить работу компьютера пользователя и даже иметь очень большой размер файла. Важно, чтобы вы максимально упростили свои векторные фигуры.
Кроме того, файлы SVG пишутся в формате XML, поэтому их можно открывать и редактировать в текстовом редакторе (!). Это означает, что его значения можно манипулировать на лету. Например, вы можете использовать JavaScript, чтобы изменить цвет значка SVG на веб-сайте, так же, как если бы вы использовали какой-либо текст (т.е. не нужно второе изображение), или даже анимировать их.
В целом, они лучше всего подходят для простых плоских форм, таких как логотипы или графики.
Надеюсь, это поможет!
JPEG не самый легкий для всех видов изображений (или даже для большинства). Углы и прямые линии и простые «заливки» (блоки сплошного цвета) будут выглядеть размытыми или иметь артефакты в них в зависимости от уровня сжатия. Это формат с потерями, и он лучше всего подходит для фотографий, где вы не можете четко видеть артефакты. Прямые линии (такие как рисунки, комиксы и т. Д.) Очень хорошо сжимаются в формате PNG и без потерь. GIF следует использовать только тогда, когда вы хотите, чтобы прозрачность работала в IE6, или если вы хотите анимацию. GIF поддерживает только 256 цветов палитры, но также без потерь.
Таким образом, в основном вот способ определить формат изображения:
И, как уже отмечалось, если вы не уверены, что подойдет, попробуйте каждый формат с разными коэффициентами сжатия, взвесьте качество и размер изображения и выберите, какой из них вы считаете лучшим. Я только даю эмпирические правила.
Я обычно использую 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 имеет лучшее сжатие со сложными изображениями, такими как фотографии.
Существует способ, позволяющий использовать изображения GIF для отображения истинного цвета. Можно подготовить анимацию в формате GIF с 256 кадрами с цветовой палитрой с задержкой 0 кадров и настроить отображение анимации только один раз. Таким образом, все кадры могут быть показаны одновременно. В конце отображается изображение в цвете GIF.
Многие программы способны подготавливать такие изображения в формате GIF. Однако размер выходного файла больше, чем у файла PNG. Он должен быть использован, если это действительно необходимо.
PNG имеет более широкий цветовой палитры, чем GIF и GIF является надлежащим, в то время как PNG нет. GIF может делать анимацию, что не может нормальный PNG. png-прозрачность поддерживается только браузером, выпущенным сравнительно недавно, чем IE6, но для этой проблемы есть исправление Javascript. Оба поддерживают альфа-прозрачность. В целом, я бы сказал, что вы должны использовать png для большинства веб-графики, в то время как jpeg для фотографий, снимков экрана или подобного, потому что png сжатие не слишком хорошо работает на Thoose.
GIF основан на палитре 256 цветов на изображение (по крайней мере, в его базовом воплощении). PNG может делать «TrueColour», т.е. 16,7 миллионов цветов из коробки. PNG без потерь сжимает лучше, чем GIF без потерь. GIF может делать «двоичную» прозрачность (непрозрачность 0% или непрозрачность 100%). PNG может обрабатывать альфа-пленки.
В общем, если вам не нужно использовать альфа-прозрачные изображения и поддерживать IE6, PNG, вероятно, будет лучшим выбором, когда вам нужны пиксельные изображения для векторных иллюстраций и тому подобное. JPG непобедим для фотографий.
По состоянию на 2018 год у нас появилось несколько новых форматов, улучшена поддержка предыдущих форматов и некоторые хитрые способы использования видео вместо изображений.
Для фотографий
jpg - по-прежнему самый широко поддерживаемый формат изображения.
webp- Новый формат от Google. Хороший потенциал, хотя поддержка браузера невелика.
Для икон и графики
svg- как только возможно. Он хорошо масштабируется на экранах сетчатки, редактируется в текстовых редакторах и настраивается с помощью JS / CSS при загрузке в DOM.
png- если это связано с растровой графикой (т.е. при создании в фотошопе). Поддерживает прозрачность, которая очень важна в этом случае использования.
Для анимации
svg- плюс CSS анимации для векторной графики. Все преимущества SVG + сила CSS анимации.
gif - по-прежнему самый широко поддерживаемый формат анимированных изображений.
mp4- если анимированные изображения на самом деле короткие видеоклипы. Twitter / WhatsApp конвертирует GIF в MP4.
apng- Достойная поддержка браузера (т.е. нет IE, Edge), но его создание не так просто, как GIF.
webp- близко к использованию mp4. Плохая поддержка
Это хорошее сравнение различных форматов анимированных изображений.
Наконец, какой бы ни был формат, обязательно оптимизируйте его - есть инструменты для каждого формата (например, SVGO, Guetzli, OptiPNG и т. Д.), Которые могут сэкономить значительную пропускную способность.
Основное отличие заключается в том, что GIF запатентован и немного более широко поддерживается. PNG является открытой спецификацией, и альфа-прозрачность не поддерживается в IE6. Поддержка была улучшена в IE7, но не полностью исправлена.
Что касается размеров файлов, GIF имеет меньшую цветовую палитру по умолчанию, поэтому на первый взгляд они имеют меньший размер. PNG-файлы имеют более крупную палитру по умолчанию, однако вы можете уменьшить их цветовую палитру, чтобы в результате размер файла уменьшился по сравнению с GIF. Проблема снова заключается в том, что эта функция не поддерживается в Internet Explorer.
Кроме того, поскольку PNG-файлы могут поддерживать альфа-прозрачность, они являются единственным вариантом, если вы хотите изменить прозрачность, кроме бинарной прозрачности.
Если вы выбираете JPEG, и вы имеете дело с изображениями для веб-сайта, вы можете рассмотреть Google Guetzli перцептуальный кодировщик , который находится в свободном доступе. По моему опыту, для фиксированного качества Guetzli производит файлы меньшего размера, чем стандартные библиотеки кодирования JPEG, сохраняя полную совместимость со стандартом JPEG (поэтому ваши изображения будут иметь такую же совместимость, что и обычные изображения JPEG).
Единственным недостатком является то, что Гетцли берет много времени для кодирования ... но это делается только один раз, когда вы готовите изображение для веб-сайта, в то время как преимущества остаются навсегда! Для загрузки небольших изображений требуется меньше времени, поэтому скорость вашего сайта будет увеличиваться при повседневном использовании.
GIF имеет 8-битную (256 цветов) палитру, где PNG - до 24-битной цветовой палитры. Таким образом, PNG может поддерживать больше цвета и, конечно, алгоритм поддерживает сжатие
Как отмечает @aarjithn, этот WebP является кодеком для хранения фотографий.
Это также кодек для хранения анимации (последовательность анимированных изображений). По состоянию на 2020 год большинство основных браузеров имеют встроенную поддержку ( таблица совместимости ). Примечание для WIC плагин доступен.
Он имеет преимущества перед GIF, потому что основан на видеокодеке VP8. и имеет более широкий диапазон цветов, чем GIF, где GIF ограничивает до 256 цветов, расширяет его до 2 24 = 16777216 цветов, сохраняя при этом значительный объем пространства.