SVG срещу PNG срещу JPG: плюсове и минуси за формат на изображението
Когато става въпрос за създаване на изображения за интернет и други цифрови цели, кои формати на файлове ще ви дадат най-добрия резултат? Трябва да мислите за скорост спрямо качество на изображението и мащаб. И така, какво да използвате: SVG срещу PNG срещу JPG?
Имаше време, когато просто използвахте размер на JPG, за да паснете на пространството при 72 dpi и продължихте. Вече не. Екрани с висока разделителна способност, множество екрани за показване и необходимост от бърз уебсайт го направиха много по-сложен процес. Нека се потопим в плюсовете и минусите на всеки от тези формати!
SVG
SVG изглежда страхотно при всякакъв размер и работи за почти всеки тип изображение, различно от снимка.SVG или Scalable Vector Graphics е невероятно практичен. Ето защо дизайнерите го използват по-често.
Тъй като SVG е векторен формат, те изглеждат страхотно при всякакъв размер и работят за почти всеки тип изображение, различно от снимка.
SVG е формат без загуби - което означава, че не губи никакви данни при компресиране - създава неограничен брой цветове и най-често се използва за графика и лога в мрежата и за проекти, които ще бъдат гледани на ретината или други екрани с висока разделителна способност.
Плюсове на SVG
- Векторният формат прави добре във всякакъв размер
- Възможност за създаване на прости SVG рендери в редактор на код или текст
- Проектиране и експортиране на сложна графика от Adobe Illustrator или Sketch
- SVG текстът е достъпен
- SVG файловете са лесни за стил и сценарий
- SVG форматите се поддържат от съвременни браузъри и са доказателство за бъдещето
- Форматът е силно сгъваем и лек
- Подходящ за търсене поради текстово базиран формат
- Подкрепя прозрачността
- Позволява за неподвижни или анимирани изображения
Минуси на SVG
- Проектирането на SVG може да се усложни
- Не изобразявайте на някои деградирани браузъри
- Ограничена поддръжка за клиенти с имейл
Искате ли да знаете повече? Имаме още два ръководства, обясняващи повече за SVG: Ръководството за практически начинаещи за SVG и как (и защо) SVG ще поеме управлението.
PNG
PNG предлага нещо, което JPG не може - прозрачност.PNG или Portable Network Graphics е формат, предназначен за мрежата, който предлага нещо, което JPG не може - прозрачност. Само това е причината PNG да е толкова популярен за качване на елементи като лога в дизайни на уебсайтове.
Има два типа PNG - PNG-8 и PNG-24. PNG-8 използва по-ограничена цветова палитра с едва 256 цвята, има малко по-добра прозрачност и се експортира в малък размер. PNG-24 използва неограничена цветова палитра, поддържа прозрачност, но експортира в по-голям размер. И двата типа PNG имат компресия без загуби.
Въпреки че форматите на PNG са подобни на GIF, те не поддържат анимация. Този формат се използва най-често за икони, малки неподвижни изображения или всяко изображение, което се нуждае от прозрачност.
Плюсове на PNG
- Подкрепя прозрачността
- Подходящ за изображения с текст в тях
- PNG форматите изобразяват лога добре
- Включва вградено текстово описание за търсачките
- PNG-8 има малък размер на файла и е най-лек
- Износ без назъбени ръбове
Минуси на PNG
- Размерите на файловете растат бързо за големи файлове като изображения
- Някои по-стари имейл клиенти имат проблеми с рендирането им
- Без анимация
- PNG-24 файловете могат да бъдат големи; не е толкова добър за споделяне в мрежата
JPEG
Всеки път, когато снимката бъде запаметена и експортирана като JPG, тя ще се разгражда.JPG, или Joint Photographic Experts Group или JPEG, вероятно е най-известният формат на изображенията. Това е опцията по подразбиране за повечето спестявания на изображения, тъй като е приятелски настроена благодарение на практически неограничен цветен дисплей.
JPG предлага също така възможността да избирате как трябва да бъде компресирано изображение от 0 процента (силно компресиране) до 100 процента (без компресия). Повечето дизайнери избират нещо в диапазона от 60 до 70 процента. Изображенията все още изглеждат добре на това ниво на компресия, но размерите на файловете са значително по-малки.
JPG използва компресия на загуба и не поддържа оригинални данни по време на компресия. Всеки път, когато снимката бъде запаметена и експортирана като JPG, тя ще се разгражда.
JPG форматът се използва най-често за изображения, фотография и всичко с много цвят.
Плюсове на JPEG
- Чудесен за висок цвят и фотография
- Лесно се намаляват размерите на файловете
- Показва последователно в имейл клиенти
Минуси от JPEG
- Няма прозрачност
- Създава назъбени ръбове за текст
- Без анимация
- Формат на загуба
- Няма автоматични метаданни за търсене, трябва да включва информация
Какъв формат трябва да използвате?
Сега, когато знаете какви са разликите между SVG срещу PNG срещу JPG, какво трябва да използвате?
Можете да си зададете няколко въпроса, за да стигнете до този отговор.
Имате ли нужда от вектор или растер формат?
Вектор: SVG
Растер: JPG или PNG
Имате ли нужда от прозрачност?
Да: SVG или PNG
№: JPG
Използвате ли изображение с висок цвят?
Да: JPG или PNG
№: SVG
Голяма снимка ли е?
Да: JPG
№: PNG
Съдържа ли изображението текст?
Да: PNG
№: JPG
Важна ли е компресията без загуби?
Да: SVG или PNG
№: JPG
Графиката трябва ли да бъде актуализирана и преразпределена?
Да: SVG
№: PNG или JPG
Използвате ли анимация?
Да: SVG
№: JPG или PNG
заключение
И трите формата на изображение - SVG, PNG и JPG - имат практически и широкообхватни приложения. Въпреки че SVG е най-новият формат и често може да бъде записан до най-малкия размер на файла, това не винаги е най-добрият вариант.
Помислете как използвате изображения във вашия проект, докато избирате тип файл, за да намерите този, който ще работи най-добре за това, което се опитвате да постигнете. Може дори да откриете, че проектите включват изображения, които използват и трите типа файлове. (Всъщност е доста често срещано!)
