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

Когда использовать 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 .

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

Также есть разные глубины цвета (палитры): Indexed color и Direct color .

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

BMP — без потерь/индексированный и прямой

Это старый формат. Это без потерь (данные изображения не теряются при сохранении), но также практически отсутствует сжатие, что означает, что сохранение в формате BMP приводит к ОЧЕНЬ большим размерам файлов. Он может иметь палитры как Indexed, так и Direct, но это небольшое утешение. Размеры файлов настолько неоправданно велики, что никто никогда не использует этот формат.

Подходит для: Ничего особенного. Нет ничего, в чем BMP превосходил бы другие форматы.

GIF — без потерь / только индексированные

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

GIF-изображения также могут быть анимированы и иметь прозрачность.

Подходит для: логотипов, штриховых рисунков и других простых изображений, которые должны быть маленькими. Только действительно используется для веб-сайтов.

JPEG — с потерями / прямой

Изображения в формате 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 — без потерь/вектор

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

Например:

Это означает, что SVG идеально подходит для логотипов и значков, которые вы хотите сохранить четкостью на экранах Retina или в других размерах.

Кроме того, файлы SVG написаны с использованием XML, поэтому их можно открывать и редактировать в текстовом редакторе, чтобы при желании ими можно было манипулировать на лету. Например, вы можете использовать JavaScript для изменения цвета значка SVG на веб-сайте так же, как и для текста (т. е. второе изображение не требуется).

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

JPG:

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

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

Неудобства:

• Артефакты сжатия

Использование:

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

PNG:

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

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

Неудобства:

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

Использование:

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

гифка :

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

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

Неудобства:

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

Использование:

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

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

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

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

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

Для графики:

SVG с резервным PNG/JPEG.

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

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

Что такое SVG?

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

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

1. Освоение использования SVG для сети Retina, запасные варианты со сценарием PNG

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

3. CSS-трюки — запасные варианты 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

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

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

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

</DA01>

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

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

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

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

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

Заметки

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

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

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

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

  Вы должны построить лист спрайтов с целью иметь возможность разделить ширину и высоту на 100 и получить целые числа или числа с одним десятичным знаком максимум. Например, если вы размещаете 7 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, и в наши дни он почти универсален (я видел пару редакторов сайтов, которые не очень хорошо к нему относятся, например, настольная версия программного обеспечения Homestead SiteBuilder, но это все).

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

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

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

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

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

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

• Выберите GIF: для анимированных изображений не более 256 цветов
• Если вам не нужна анимация, вы можете выбрать PNG. Выбрал правильный PNG: есть 2 вида 8bit и 24bit. 8bit , как правило, лучшая версия GIF без анимации для качества/сжатия (но, как я уже сказал, не всегда, проверяйте это при сохранении для Интернета). 24-битный формат не имеет сжатия (поэтому редко используйте его для каких-то специальных графических эффектов) и имеет альфа-значение для использования прозрачности цвета (старые браузеры 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 миллионов цветов.

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

• бывают трех типов: базовые или стандартные, базовые или стандартные оптимизированные и прогрессивные. Baseline был разработан для браузеров, которые в наши дни считаются устаревшими (например, 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. Так что, если вы не уверены, что выбрать, это может быть хорошим решением.