Какие форматы веб-графики использовать?

Веб-сайты могут содержать графику в формате JPEG, GIF, PNG, SVG. Какие из них следует использовать и когда?

Когда использовать JPG

• фотографические изображения
• когда сжатие не имеет значения

Когда использовать PNG

• когда вам нужна прозрачность
• когда у вас есть узоры (фоны)

Когда использовать GIF

• когда вам нужна обратно совместимая анимация *
• когда изображение состоит в основном из нескольких цветов (2-16) **
• когда вам не нужна прозрачность и есть паттерны (хотя png предпочтительнее)

_{* С появлением CSS-анимации в качестве жизнеспособного варианта почти для всех браузеров использование формата .GIF все меньше и меньше подходит для веб-анимации. .jpg, .pngИ .gifвсе они могут быть установлены , чтобы иметь «анимированный» функцию с использованием CSS. Хотя анимированные GIF-файлы могут привлекательно использоваться в веб-дизайне в определенных сценариях, исключения встречаются редко, поэтому лучше всего избегать их.}

_{** ( .gifизображения ограничены только 256 цветами в своей палитре.)}

(перенесено из дублирующего вопроса)

Это полностью зависит от того, какой образ вы хотите сохранить.

• PNG - это формат сжатия без потерь, который лучше всего подходит для «векторной» растровой графики (т. Е. Графики с большими регулярными областями одинакового цвета и четко определенными краями; графики, содержащие чистый текст).

• SVG - векторный формат , лучше всего подходящий для векторной графики (короче говоря, наборы геометрических элементов вместо наборов пикселей). SVG безгранично масштабируется, а растровая графика при увеличении теряет качество.

• JPG - это формат сжатия с потерями (помимо прочего, он удаляет нюансы изображения, невидимые человеческому глазу, для экономии места на диске). Лучше всего подходит для фотографий; из-за метода сжатия он не очень подходит для векторных иллюстраций или текста.

Совместимость браузера:

• Графика PNG поддерживается во всех браузерах, за исключением IE 6, если PNG содержит альфа-прозрачность (прозрачные части будут отображаться как сплошная серая), и всех версий IE, если PNG находится внутри элемента HTML с непрозрачностью менее 100 % (но это крайний случай).

• SVG еще не всегда доступен, потому что поддержка браузеров на данный момент не на 100% . Могут также быть другие поведенческие различия с нормальным <img>признаком. Используйте это, только если вы знаете, что делаете.

• Стандартный JPG поддерживается во всех браузерах, если он сохраняется в режиме RGB, а не в CMYK (если ваша программа не делает различий, вероятно, это значение по умолчанию).

Вы должны знать о нескольких ключевых факторах ...

Во-первых, существует два типа сжатия: Lossless и Lossy .

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

Существуют также разные глубины цвета (палитры): индексированный цвет и прямой цвет .

• Индексированный означает, что изображение может хранить только ограниченное количество цветов (обычно 256), контролируемых автором, в так называемой Цветовой карте
• Прямой означает, что вы можете хранить тысячи цветов, которые не были выбраны автором напрямую.

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, - это поддержка альфа-прозрачности.

Важное примечание: Photoshop наконец-то добавил поддержку альфа-прозрачности в своих последних версиях. Если у вас есть старый, есть способы конвертировать Photoshop PNG-24 в файлы PNG-8, сохраняя при этом их прозрачность. Один метод - PNGQuant , другой - сохранить ваши файлы с помощью Fireworks .

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 пишутся с использованием XML, поэтому их можно открывать и редактировать в текстовом редакторе, чтобы им можно было управлять на лету, если вы хотите. Например, вы можете использовать JavaScript для изменения цвета значка SVG на веб-сайте так же, как если бы вы использовали какой-либо текст (т. Е. Нет необходимости во втором изображении).

Надеюсь, это поможет!

JPG:

Преимущества:

• Доступно много разных уровней сжатия
• Легко манипулировать всеми редакторами изображений

Неудобства:

• Сжатие артефактов

Использует:

• Большие фотографии или изображения с большим количеством цветов
• Когда требуется высокая степень сжатия

PNG:

Преимущества:

• Прозрачность с альфа!
• Много цветов
• Может заменить JPG

Неудобства:

• Меньше сжатия, чем JPG (но не так сильно)
• Несовместимо с IE6 (и 7, я считаю) - для этого нужно использовать патч или хак. Но кого это волнует? Должен использовать;)

Использует:

• Маленькие или средние фотографии / изображения с большим количеством цветов
• Необходимо использовать, если вы хотите прозрачность градиента
• Иконки
• Логотипы

GIF:

Преимущества:

• Может быть анимированным
• Очень светлый, если вы используете какой-то цвет (например, 8-16 или 32 разных цвета)
• прозрачность

Неудобства:

• Не может иметь более 255 цветов.
• Анимированный GIF может заставить людей бежать
• Никакой альфы для прозрачности (прозрачно или нет!)

Использует:

• Анимированные GIF (я использую их в основном в информационных бюллетенях)
• Иконки
• Анимированный значок \ о /
• Логотипы

Веб-сайты могут содержать графику в формате JPEG, GIF, PNG, SVG. Какие из них следует использовать и когда?

Для фотографий:

JPEG, если нет необходимости в прозрачности. PNG для фото графики, которая нуждается в прозрачности.

Хотя это не на 100% верно, это хорошее эмпирическое правило. Проверьте другие ответы на этот вопрос, чтобы узнать больше о других форматах. Кроме того, проверьте, какой формат растровых изображений лучше для цифрового отображения изображений, когда нет прозрачности; JPEG или PNG? и выбор наших тегов формата файла , таких как jpeg , png , gif & svg, чтобы узнать больше.

Для графики:

SVG с PNG / JPEG Fallback.

Нет абсолютно никаких причин не предоставлять SVG в наши дни. Они реализованы практически так же, как любое обычное изображение, и гораздо более универсальны.

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

Что такое SVG?

SVG выступает за Scalable Vector Graphic. Не вдаваясь в технические аспекты, разница между SVG и другими пиксельными форматами заключается в том, что данные для композиции графики хранятся в виде математических вычислений. Когда браузер открывает SVG, он должен выполнить вычисления для визуализации SVG. Старые браузеры не имеют функции для выполнения этих вычислений или обработки SVG, более того, старые компьютеры могли изо всех сил пытаться отобразить тяжелую веб-страницу SVG, даже если бы они могли использоваться 10 лет назад (чего они не могли). Данные для SVG хранятся в шестнадцатеричном формате (base-16), что позволяет оптимизировать его для файлов очень малых размеров по сравнению с двоичным хранилищем данных пикселей.

Вот некоторые ресурсы для того, чтобы узнать больше о том, как реализовать альтернативную технику:

1. Освоение использования SVG для сетчатки, отступления с помощью сценария PNG

2. Пересмотр рабочего процесса SVG для производительности и прогрессивного развития с прозрачными URI данных

3. CSS Tricks - SVG-отступления

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

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

Когда использовать SVG

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

Когда использовать иконочные шрифты

• Когда вам нужен обширный набор иконок
• Когда, как и SVG, вам нужны преимущества векторных форматов файлов
• Если вы можете позволить себе использовать только современные браузеры (поддержка веб-шрифтов является относительно новой для некоторых браузеров)

</DA01>

Почему SVG самый лучший вариант?

• Масштабирование до любого размера из одного файла (не нужно использовать @2x.jpgдля экранов сетчатки или растягивать графику)

• Очень часто файлы меньшего размера, чем JPEG и PNG

• Практически никогда не придется жертвовать качеством в логотипе

• Делает адаптивный дизайн проще во многих отношениях

Заметки

• Поддержка встроенных SVG менее распространена, поэтому в целях безопасности лучше всего на данный момент ссылаться на файлы с помощью тегов изображений. (Если вы собираетесь повторно использовать графику где-либо еще, например, значки навигации, вы все равно хотите ссылаться на нее внешне, чтобы браузер кэшировал ее и экономил время при загрузке других страниц.)

• IE не поддерживает SVGZсжатый формат, доступный для графики SVG. Для максимальной совместимости между браузерами и последними предыдущими версиями лучше всего использовать их SVG 1.0в данный момент.

• Вы по-прежнему можете создавать спрайт-листы с SVG почти так же, как и с другими форматами изображений, но вместо использования фактических значений пикселей для определения координат x и y каждого изображения используйте значения в процентах.

  Как насчет тех случаев, когда процентные значения не достаточно точны?

  Вы должны создать спрайт-лист, чтобы разделить ширину и высоту на 100 и получить целые числа или числа с 1 десятичным знаком не более. Например, если вы объединяете 7 x 10px x 10pxзначков в лист спрайта, не создавайте холст, который есть 70px x 10px.

  Зачем? Потому что, когда вы делите 100 на 7, вы получаете 14.285714285714285714285714285714, что, как округленный процент, определенно приведет к некоторой несовершенной математике.

  Вместо этого создайте 80px x 10pxхолст, и не беспокойтесь о пустых 12,5%. Значки будут отображаться с шагом 12,5%, что, разумеется, намного проще в работе.

Вы должны использовать .jpeg для фотографий или изображений с большим количеством цветов. Тип файла .gif полезен для анимированных изображений или там, где требуется прозрачность, но он уменьшается при использовании. Наиболее популярным форматом является .png, который также может обеспечивать альфа-прозрачность и больший диапазон цветов, чем тип файла .gif. Для более подробного обзора, ознакомьтесь со статьей Джонатана Снука « Какой формат изображения лучше» .

Хорошей формулой может быть использование JPEG для фотографий и PNG для всего остального.

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

Я использую PNG практически для всего, так как в нем нет артефактов сжатия, которые есть у JEPG, и он почти универсально совместим в наши дни (я видел пару редакторов сайтов, которые не очень хорошо к этому относятся, например, такие как: настольная версия программного обеспечения SiteBuilder от Homestead, но это все).

Вы должны выбрать свое изображение в базе на уровне сжатия / качества, которого вы хотите достичь.

Интернет - это скорость загрузки информации, и чем меньше размер изображения, тем лучше скорость загрузки страницы.

JPG : для изображений с миллионами цветов (фотография)

PNG и GIF : для прозрачности и небольшого количества цветов. Я использую его только под разными цветами 64/128, но обычно под 256. (значки, векторные изображения, которые должны быть растровыми, высококонтрастный цвет, градиенты с небольшим количеством цветов)

Как выбрать между PNG и GIF?

Прежде всего, проверьте оптимизацию сжатия / качества и выберите, кто даст вам лучший результат при меньшем весе. Я все еще широко использую GIF, и иногда лучше, чем PNG для изображений того же типа. Не различайте один формат для другого, просто выберите тот, который выглядит более подходящим для вашей оптимизации.

• Выберите GIF: для анимированных изображений не более 256 цветов
• Если вам не нужна анимация, вы можете выбрать PNG. Выбрал правильный PNG: есть 2 вида 8bit и 24bit. В 8 битах это, как правило, лучшая версия GIF без анимации для качества / сжатия (но, как я уже говорил, проверяйте ее при сохранении для Web). 24bit не имеет сжатия (поэтому его вряд ли можно использовать для какого-то особого графического эффекта) и имеет альфа-переменную для использования прозрачности цвета (старые браузеры IE не поддерживают это, если вы не применяете специальный фильтр или поведение .htc к странице ).

Из разных статей видно, что 90% веб-дизайнеров до сих пор считают, что PNG - это формат без потерь . Многие профессионалы даже не знают о существовании PNG-8.

Но очевидно, что PNG-8 - это то, что они должны использовать для Интернета, а не PNG-32. Потому что он обеспечивает в 2–5 раз меньшие размеры файлов с приемлемым качеством.

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

Вот хороший инструмент для сравнения форматов PNG и JPEG с потерями: PNG против JPEG

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

GIF - графический формат информации

Графический формат GIF лучше всего подходит для изображений с несколькими цветами: диаграммы, графики или текст, заданный в качестве графики. Чем меньше цветов вы используете, тем эффективнее файлы GIF. GIF файлы ...

• может содержать до 256 цветов.

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

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

• без потерь, что означает, что качество изображения не ухудшается в процессе сжатия.

• могут быть чересстрочными, чтобы при загрузке они выглядели плавно, от более низкого качества. Это дает вашим посетителям что-то на что посмотреть, пока они ждут.

• не подходят для фотографий - вы теряете качество и файлы не будут компактными. Используйте графический формат JPG для фотографий.

JPG - Объединенная группа экспертов по фотографии

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

• может содержать до 16 миллионов цветов.

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

• бывают трех типов: базовый или стандартный, базовый оптимизированный или стандартный оптимизированный, и прогрессивный. Базовая линия была разработана для браузеров, которые мы считали бы древними в настоящее время (например, Internet Explorer версии 1). Оптимизированная базовая линия обеспечивает большее сжатие по сравнению со стандартной базовой линией, и практически каждый браузер сегодня может прочитать такое изображение. Прогрессивный JPG, подобно чересстрочному GIF-файлу, создается по мере загрузки, начиная от грубого представления изображения до его законченного вида. Хотя это хороший формат веб-графики, старые браузеры не все поддерживают этот формат.

• не подходят для изображений только с несколькими цветами, такими как текст, заданный в виде графики, или изображения с областями плоских цветов. Если вы используете JPG для этих графиков, они будут больше, чем необходимо, и выглядят «пятнистыми».

PNG - прогрессивная сетевая графика

PNG - новейший формат веб-графики. PNG файлы ...

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

• компактны и универсальны и могут сочетать в себе лучшие функции GIF и JPG, такие как возможность иметь прозрачный фон или возможность содержать изображения с миллионами цветов.

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

Когда использовать что?

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

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

• Если ваша графика имеет много цветов (например, фото), выберите JPG.

• Если у вашей графики мало цветов, выберите GIF. При использовании GIF попробуйте оптимизированные палитры, которые содержат только используемые цвета - они могут сократить размеры файлов вдвое.

В идеальном мире все сводится к следующему:

JPEG - для растровых изображений и фотографий

PNG - для векторной графики (например, логотипы и т. Д.)

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

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(РЕДАКТИРОВАТЬ: Кроме того, я думаю, что даже IE 7 имеет проблемы с некоторыми функциями PNG.)

GIF-файлы имеют только два преимущества перед PNG:

1. (Почти) отличная поддержка браузера (хотя нет прозрачности, так что это не так уж и много)
2. Они могут быть анимированными, однако анимированная графика должна использоваться с осторожностью в веб-дизайне.

РЕДАКТИРОВАТЬ: PNG всегда предпочтительнее, чем GIF, где он поддерживается и используется, так как PNG является открытым форматом.

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

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