GIF, PNG, JPG или SVG. Какой использовать?

  1. JPG против PNG против GIF против SVG - в чем разница?
  2. GIF: графический формат обмена
  3. Категория: без потерь
  4. Категория: потеря
  5. PNG-8
  6. PNG-24
  7. Категория: без потерь
  8. Используйте SVG для:
  9. Плоская цветная графика
  10. GIF: 17,6 КБ
  11. JPEG 100% (без сжатия): 53,3 КБ
  12. JPEG 75%: 33 КБ
  13. PNG-8: 11,8 КБ
  14. PNG-24: 19,6 КБ
  15. SVG: 6 КБ (как чисто векторная графика)
  16. Сложные цветные изображения
  17. GIF: 426 КБ
  18. JPEG 100% (без сжатия): 776 КБ
  19. JPEG 75%: 215 КБ
  20. PNG-8: 327 КБ
  21. PNG-24: 1,7 МБ
  22. Цветная фотография
  23. GIF: 453 КБ
  24. JPEG 100% (без сжатия): 410 КБ
  25. JPEG 75%: 410 КБ
  26. PNG-8: 395 КБ
  27. PNG-24: 1,03 МБ

Если эта статья кажется вам немного знакомой, мы опубликовали ее первый выпуск еще в 2009 году. Хотя SVG добавила совершенно новое измерение в веб-дизайн, такие вопросы, как «В чем разница между JPEG и PNG?», Все еще актуальны как всегда. Мы подумали, что пришло время по-новому взглянуть на состояние игры в форматах веб-изображений.

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

JPG против PNG против GIF против SVG - в чем разница?

Категория Палитра Использование для JPG Lossy Миллионы цветов Фотографии
Фотография GIF Lossless Максимум 256 цветов Простая анимация
Графика с плоскими цветами
Графика без градиентов PNG-8 Без потерь Максимум 256 цветов Аналогично GIF
Лучшая прозрачность, но без анимации
Отлично подходит для иконок PNG-24 Lossless Неограниченное количество цветов Аналогично PNG-8
Обрабатывает неподвижные изображения и прозрачность SVG Vector / без потерь Неограниченное количество цветов Графика / логотипы для веб-сайтов
Сетчатки / с высоким разрешением экрана

GIF: графический формат обмена

Если эта статья кажется вам немного знакомой, мы опубликовали ее первый выпуск еще в 2009 году

256 цветовая палитра.

Если только вы не вышли из Слабо курящий Делориан прямо с 1985 года вы, скорее всего, уже знакомы с самым глупым форматом изображений в Интернете - GIF Формат обмена графиками.

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

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

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

Категория: без потерь

Выберите GIF для:

  • Простые анимации
  • Маленькие иконки
  • Графика с небольшим изменением пикселя к пикселю (то есть много плоских цветов, таких как логотипы и флаги)

JPEG

В зависимости от ваших предпочтений, вы можете ссылаться на этот формат как «JPEG» или «JPG» - оба являются допустимыми вариациями одного и того же аббревиатуры - Объединенная группа экспертов по фотографии ,

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

Формат JPEG также позволяет гибко выбирать степень сжатия изображения - от 0% (сильное сжатие) до 100% (без сжатия). Как правило, настройка сжатия 60% -75% значительно сократит ваш файл, сохраняя при этом изображение на большинстве экранов приличным.

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

Также обратите внимание, что, в отличие от GIF и PNG, JPEG не может сохранить прозрачность.

Категория: потеря

Используйте JPEG для:

  • Неподвижные изображения
  • фотография
  • Изображения со сложными цветами и динамикой

PNG

PNG (Portable Network Graphics) - более новый формат файлов, чем GIF и JPEG, благодаря двум его вариантам похож на брак между форматами GIF и JPEG.

PNG-8

PNG-8 во многом похож на GIF и использует ту же самую 256-цветовую палитру (максимум). У этого есть лучшие варианты прозрачности и обычно экспортирует немного меньшие размеры файла. Однако PNG-8 не имеет функции анимации.

PNG-24

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

Категория: без потерь

Используйте PNG для:

  • Веб-графика, требующая прозрачности
  • Цветные тяжелые и сложные фотографии и графика
  • Изображения, которые требуют повторного редактирования и реэкспорта

SVG

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

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

SVG лучше всего подходит для отображения логотипов, значков, карт, флагов, диаграмм и другой графики, созданной в приложениях векторной графики, таких как Illustrator, Sketch и Inkscape. Написанный в разметке на основе XML, ваш SVG может быть отредактирован в любом текстовом редакторе и изменен с помощью JavaScript или CSS. Поскольку векторы можно масштабировать до любого размера, сохраняя при этом четкое качество изображения, они идеально подходят для адаптивного дизайна.

Хотя SVG по своей сути является векторным форматом, можно (даже часто) встраивать растровую графику в файл SVG - так же, как вы можете встраивать JPEG в ваш HTML.

Вы можете сделать это, либо связавшись с источником изображения через его URL (как вы могли бы сослаться на JPG на веб-странице), либо инкапсулировав пиксельное изображение в виде URI данных , Это дает SVG бесспорную гибкость и мощь.

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

Онлайн-сервисы, такие как WordPress, Flickr, Medium, Tumblr и Facebook, либо принудительно преобразуют ваш SVG в формат, который им нравится, либо, что более вероятно, напрямую блокируют загрузку SVG. Есть несколько вариантов хостинга SVG, включая svgur.com , imgh.us и даже Github, как Алекс продемонстрировал здесь ,

Несмотря на то, что я рад видеть, что хостинг-сервисы меньшего размера решают проблемы SVG, Github в настоящее время является единственным сервисом, дружественным к SVG, и я уверен, что на 99% он появится примерно через 5 лет. Если вы используете SVG для веб-дизайна, вы обнаружите, что вы почти всегда можете уменьшить размер файла по сравнению с чем-то вроде JPEG или PNG. Но учтите, что чем сложнее ваш SVG, тем больше будет размер файла.

Используйте SVG для:

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

Сравнивать и противопоставлять

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

Плоская цветная графика

Первый тип изображения, который мы собираемся рассмотреть, это плоская цветная графика. Это охватывает большинство логотипов и брендинга, значки, простые карты, диаграммы и диаграммы. Исходное изображение представляет собой PNG-изображение размером 23,4 КБ с размером 1280 x 1280.

Ниже вы сможете увидеть разницу в размере сжатия, а также качество изображения. Обратите внимание, что изображения были сохранены с помощью опции «Сохранить для Интернета и устройств» в Photoshop с настройками высочайшего качества.

GIF: 17,6 КБ

GIF: 17,6 КБ

JPEG 100% (без сжатия): 53,3 КБ

JPEG 100% (без сжатия): 53,3 КБ

JPEG 75%: 33 КБ

JPEG 75%: 33 КБ

PNG-8: 11,8 КБ

PNG-8: 11,8 КБ

PNG-24: 19,6 КБ

PNG-24: 19,6 КБ

SVG: 6 КБ (как чисто векторная графика)

В случае этого конкретного изображения при сравнении шести форматов качество не сильно ухудшается, хотя вы можете заметить небольшие артефакты вблизи краев внутри сжатого JPEG В случае этого конкретного изображения при сравнении шести форматов качество не сильно ухудшается, хотя вы можете заметить небольшие артефакты вблизи краев внутри сжатого JPEG. Это не всегда так с плоской цветной графикой, но в большинстве случаев вам будет хорошо работать с изображением с наименьшим байтом. Для этого изображения, предполагая, что у нас есть оригинальный векторный файл, SVG - очевидный выбор в 6 КБ. Если у нас нет вектора, опция PNG-8 - достойный запасной вариант с уменьшением исходного изображения с 23,4 КБ до 11,8 КБ.

Сложные цветные изображения

Исходное изображение представляет собой изображение JPEG размером 328 КБ с размером 1280 x 960. Ниже вы сможете увидеть разницу в размере сжатия, а также качество изображения. Обратите внимание, что изображения были сохранены с помощью опции «Сохранить для Интернета и устройств» в Photoshop с настройками высочайшего качества.

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

GIF: 426 КБ

GIF: 426 КБ

JPEG 100% (без сжатия): 776 КБ

JPEG 100% (без сжатия): 776 КБ

JPEG 75%: 215 КБ

JPEG 75%: 215 КБ

PNG-8: 327 КБ

PNG-8: 327 КБ

PNG-24: 1,7 МБ

PNG-24: 1,7 МБ

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

Цветная фотография

Исходное изображение представляет собой изображение JPEG размером 215 КБ с размером 1280 x 701. Ниже вы сможете увидеть разницу в размере сжатия, а также качество изображения. Обратите внимание, что изображения были сохранены с помощью опции «Сохранить для Интернета и устройств» в Photoshop с настройками высочайшего качества.

Опять же, здесь мало что можно получить с предложением SVG.

GIF: 453 КБ

GIF: 453 КБ

JPEG 100% (без сжатия): 410 КБ

JPEG 100% (без сжатия): 410 КБ

JPEG 75%: 410 КБ

JPEG 75%: 410 КБ

PNG-8: 395 КБ

PNG-8: 395 КБ

PNG-24: 1,03 МБ

PNG-24: 1,03 МБ

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

Есть вопрос о фотошопе? Почему бы не спросить это на нашем форумы ?