GIF, PNG, JPG или SVG. Какой использовать?
Если эта статья кажется вам немного знакомой, мы опубликовали ее первый выпуск еще в 2009 году. Хотя SVG добавила в веб-дизайн совершенно новое измерение, такие вопросы, как «В чем разница между JPEG и PNG?», Все еще актуальны как всегда. Мы подумали, что пришло время по-новому взглянуть на состояние игры в форматах веб-изображений.
Сегодняшнее краткое руководство даст вам краткое изложение различных типов файлов и того, где они работают лучше всего. Наслаждаться.
JPG против PNG против GIF против SVG — в чем разница?
| категория | палитра | Использовать для | |
| JPG | с потерями | Миллионы цветов | Неподвижные изображения фотография |
| GIF | Lossless | Максимум 256 цветов | Простые анимации Графика с плоскими цветами Графика без градиентов |
| PNG-8 | Lossless | Максимум 256 цветов | Похож на GIF Лучшая прозрачность, но без анимации Отлично подходит для икон |
| PNG-24 | Lossless | Неограниченное количество цветов | Аналогично PNG-8 Обрабатывает неподвижные изображения и прозрачность |
| SVG | Вектор / без потерь | Неограниченное количество цветов | Графика / логотипы для веб Сетчатки / с высоким разрешением экрана |
GIF: графический формат обмена
256 цветовая палитра.
Если только вы не вышли из слегка курящего DeLorean прямо с 1985 года , вы, скорее всего, уже знакомы с самым глупым форматом изображений в сети — GIF (Graphics Interchange Format).
Формат GIF является типом растрового изображения, но в отличие от JPEG или PNG, файлы GIF ограничены максимальной палитрой из 256 цветов. По сути, каждое GIF-изображение содержит предустановленную «коробку с карандашами», и невозможно по-настоящему смешать эти цвета для создания новых цветов.
В то время как 256 может показаться большим количеством мелков для работы, сложные фотографии обычно имеют много тысяч тонов. Этот цветовой диапазон теряется в процессе преобразования GIF, и это является основной причиной не использовать GIF для цветных фотографий.
Хотя GIF, как правило, является плохим выбором для изображений с широкими цветовыми вариациями, ограничение в 256 цветов может помочь сохранить небольшие размеры файлов, что идеально подходит даже для самых медленных интернет-скоростей. В течение многих лет GIF предоставлял единственную опцию прозрачности в Интернете — хотя PNG и SVG теперь предлагают это тоже.
Категория: без потерь
Выберите GIF для:
- Простые анимации
- Маленькие иконки
- Графика с небольшим разбросом пикселей (т. Е. Много плоских цветов, таких как логотипы и флаги)
JPEG
В зависимости от ваших предпочтений вы можете ссылаться на этот формат как «JPEG» или «JPG» — оба варианта являются приемлемыми вариациями одного и того же аббревиатуры — Joint Photographic Experts Group .
В отличие от 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 с настройками высочайшего качества.
PNG, JPG или SVG: что использовать?
Какой формат изображений лучше всего подходит для использования их на сайте?
Выбор состоит из: PNG, JPG и SVG.
- Вопрос задан более трёх лет назад
- 2327 просмотров
3 комментария
Простой 3 комментария
Чем лучше пользоваться: руками или ногами?
Все эти форматы для разных задач.
Странный вопрос, давайте следующий.
longclaps, или головой.
Решения вопроса 1
Для фото — JPEG.
Для схематических изображений (иконки, схемы, чертежи, графические примитивы) — PNG или SVG. Для сложных схематических изображений PNG может быть выгоднее.
Также замечу, что внедрение растрового изображения в SVG — возможно, но бессмысленно.
Ответ написан более трёх лет назад
Комментировать
Нравится 7 Комментировать
Ответы на вопрос 2
Для иконок svg, для фотографий — jpg, если нужна прозрачность на фотке — png
Ответ написан более трёх лет назад
Комментировать
Нравится 7 Комментировать
Для разных целей разные форматы.
Добавлю свое мнение к предыдущему ответу.
Скажем, фон. Может быть простым, неким абстрактным, но который нельзя отобразить с помощью чистого css. Для этих целей svg тоже будет идеальным выбором, поскольку может быть в пару килобайтов при неограниченном размере, при том что для jpg это же изображение может быть очень сложным и при самом идеальном варианте его можно будет ужать до пары сотен кб.
Однако, если тот же svg фон будет переполнен мелкими элементами, с достаточно большим количеством точек, то такой svg использовать в качестве фона будет нецелесообразно, поскольку даже при весе, меньшем чем в аналогичном по размеру jpg, этот svg будет визуально долго отрисовываться.
Еще момент, для chrome настоятельно рекомендуется использовать webp, которые при том же визуальном качестве существенно меньше по весу, чем jpg и png. Да и google любит его как свой формат и как следствие очень благоволит ему — достаточно прогнать сайт через PageSpeed Insights и посмотреть, что он там будет рекомендовать.
Если на сайте нет webp, таки рекомендация будет обязательно )
Ответ написан более трёх лет назад
Нравится 2 3 комментария
и посмотреть, что он там будет рекомендовать
Если вам не посрать на то, что там Гугль в своих интересах рекомендует.
К вашим интересам — оптимизации сайта ради ускорения выдачи клиентам и повышения в поисковых запросах — это благоволение никакого отношения не имеет.
Adamos, вообще то уже год как минимум гугл учитывает скорость — или я что то пропустил и они это уже отменили?
А так да, если вам гугл неважен, то и вопросов нет.
lagudal, разница в скорости от того, что вы специально для Хрома будете использовать webp, не настолько велика, чтобы вообще обращать на нее внимание.
Работать дальше с png или перейти на SVG?
Ребята такой глупый вопрос
До этого момента работал только с PNG форматами изображение например: Логотип
Сегодня взял заказ Дизайн/Верстка Лендинг пейджа
Что лучше использовать SVG или PNG для Логотипа ?
- Вопрос задан более трёх лет назад
- 4919 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 3
Евгений Вольф @Wolfnsex Куратор тега CSS
Если не хочешь быть первым — не вставай в очередь!
Что лучше использовать SVG или PNG для Логотипа ?
Лучше, подозреваю, что SVG. Так как SVG — это векторный формат и он хорошо выглядит на любом разрешении, в т.ч. на телефонах, у которых разрешение физическое может быть очень высоким, а фактическое — в несколько раз меньше.
К тому же, SVG обычно меньше занимает и т.д.
Но, не забывайте, что это два диаметрально противоположенных формата, и далеко не всё можно перевести в SVG-формат. Но то, что можно сделать — обычно делают именно в формате SVG.
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
FullStack Alex @FullStackAlex
Веб-разработчик, электрик, кочевник
в принципе для верстки сайтов svg должен быть первым выбором
но если логотип сделан на основе pixel и имеет очень много разной информации о цветах и формах то тогда никуда от png не денешься.
если же логотип создан как векторная графика, то зачем делать из нее пиксели то есть png? Только если векторная графика обратно же содержит много эффектов (например раскраска на основе сетей) и очень много anchors то прийдётся использовать png, так как размер файла svg будет в этом случае зашкаливать.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
svg -> png = easy
png -> svg = время
вот и вся разница. ну и вектор и в африке вектор, масштабируется без потерь + требования заказчика на поддержку броузеров. если не динозавр — то свг норм
Форматы изображений SVG, PNG и JPG: плюсы и минусы
Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться.
Когда дело доходит до создания изображений для Интернета и других цифровых целей, какие форматы файлов могут предоставить вам лучший результат? Вы должны думать о скорости в противовес качеству и размеру изображения. Итак, что вы должны использовать: SVG, PNG или JPG?
Было время, когда вы просто использовали JPG, чтобы соответствовать пространству на 72 dpi и двигались дальше. Уже нет. Экраны с высоким разрешением, несколько видовых экранов и необходимость иметь быстрый веб-сайт сделали все это гораздо более сложным процессом. Давайте рассмотрим плюсы и минусы каждого из этих форматов!
SVG
SVG или, как расшифровывается, масштабируемая векторная графика, невероятно практична. Вот почему дизайнеры используют данный формат чаще.
Поскольку SVG является векторным форматом, он отлично смотрится в любом размере и работает практически для любого типа изображения, кроме фотографии.
SVG — это формат без потерь, то есть он не теряет никаких данных при сжатии, отображает неограниченное количество цветов и чаще всего используется для графики и логотипов в интернете, а также для проектов, которые будут просматриваться на Retina и других экранах с высоким разрешением.
Плюсы SVG
- Векторный формат хорошо отображается в любом размере
- Возможность создания простых SVG-рендерингов в коде или текстовом редакторе
- Дизайн и экспорт сложной графики из Adobe Illustrator или Sketch
- Доступен текст SVG
- SVG легко стилизовать и написать
- Форматы SVG поддерживаются современными браузерами и соответствуют завтрашнему дню
- Формат очень сжимаемый и легкий
- Хорошо подходит для поиска из-за текстового формата
- Поддержка прозрачности
- Позволяет сохранять неподвижные или анимированные изображения
Минусы SVG
- Дизайн SVG может усложниться
- Не отображается в некоторых устаревших браузерах
- Ограниченная поддержка почтовых клиентов
PNG
PNG или портативная сетевая графика — это формат, разработанный для Интернета, который предлагает то, что JPG не может – прозрачность. Именно поэтому PNG настолько популярен для загрузки таких элементов, как логотипы для дизайна веб-сайтов.
Существует два типа PNG — PNG-8 и PNG-24. PNG-8 использует более ограниченную цветовую палитру всего с 256 цветами, имеет несколько лучшую прозрачность и экспортируется в небольшом размере. PNG-24 использует неограниченную цветовую палитру, поддерживает прозрачность, но экспортируется в большом размере. Оба типа PNG имеют сжатие без потерь.
Хотя форматы PNG похожи на GIF, они не поддерживают анимацию. Этот формат чаще всего используется для иконок, небольших неподвижных изображений или любого изображения, которое нуждается в прозрачности.
Плюсы PNG
- Поддержка прозрачности
- Подходит для изображений с текстом
- Форматы PNG хорошо отображают логотипы
- Включает встроенное текстовое описание для поисковых систем
- PNG-8 имеет небольшой размер файла и является самым легким
- Экспорт без неровных краев
Минусы PNG
- Размеры файлов быстро растут для больших файлов, таких как изображения
- Некоторые старые почтовые клиенты имеют проблемы с их визуализацией
- Нет анимации
- Файлы PNG-24 могут быть большими, что не совсем хорошо и удобно для обмена через Интернет
JPEG
JPG или JPEG, вероятно, самый известный формат изображения. Это опция по умолчанию для большинства изображений, потому что она удобна для фотографий благодаря практически неограниченному цветному дисплею.
JPG также предлагает возможность выбрать, каким сжатие изображения должно быть от 0% (сильное сжатие) до 100% (без сжатия). Большинство дизайнеров выбирают что-то в диапазоне от 60 до 70 процентов. Изображения по-прежнему хорошо выглядят на этом уровне сжатия, но размеры файлов значительно меньше.
JPG использует сжатие с потерями и не поддерживает исходные данные во время сжатия. Каждый раз, когда фото пересохраняется и экспортируется в формате JPG, оно ухудшается.
Формат JPG чаще всего используется для изображений, фотографий и всего, что имеет большое количество цветов.
Плюсы JPEG
- Отлично подходит для многоцветности и фотографии
- Легко уменьшить размер файла
- Согласованно отображается в почтовых клиентах
Минусы JPEG
- Нет прозрачности
- Создает неровные края для текста
- Без анимации
- Формат с потерями
- Автоматические метаданные для поиска не должны содержать информацию alt
Какой формат следует использовать?
Теперь, когда вы знаете, каковы некоторые различия между SVG, PNG и JPG, что из них вы должны использовать?
Вы можете задать себе несколько следующих вопросов, чтобы получить на это ответ.
Вам нужен векторный или растровый формат?
Растр: JPG или PNG
Вам нужна прозрачность?
Вы используете многоцветное изображение?
Это большая фотография?
Содержит ли изображение текст?
Сжатие без потерь важно для вас?
Нужно ли обновлять и перенастраивать графику?
Нет: PNG или JPG
Вы используете анимацию?
Нет: JPG или PNG
Вывод
Все три формата изображений – SVG, PNG и JPG – имеют практическое и широкое применение. Хотя SVG является новейшим форматом и часто может быть сохранен до наименьшего размера файла, это не всегда лучший вариант.
Подумайте о том, как вы используете изображения в вашем проекте, как вы выбираете тип файла, чтобы найти тот, который будет работать лучше всего для того, что вы пытаетесь достичь. Вы даже можете обнаружить, что некоторые проекты содержат изображения, использующие все три типа файлов. Это на самом деле происходит довольно часто!
Всем успешной работы и творчества!