SVG vs PNG vs JPG: Plusy i minusy formatu obrazu
Jakie formaty plików dadzą Ci najlepszy efekt, jeśli chodzi o tworzenie obrazów do Internetu i innych celów cyfrowych? Musisz pomyśleć o szybkości, jakości obrazu i skali. Więc czego powinieneś używać: SVG vs PNG vs JPG?
Był czas, kiedy po prostu użyłeś formatu JPG, aby dopasować przestrzeń do 72 dpi i ruszyłeś dalej. Nigdy więcej. Ekrany o wysokiej rozdzielczości, wiele rzutni i potrzeba posiadania zgrabnej strony internetowej sprawiły, że jest to znacznie bardziej złożony proces. Poznajmy zalety i wady każdego z tych formatów!
SVG
SVG wygląda świetnie w każdym rozmiarze i działa na prawie każdym rodzaju obrazu innym niż zdjęcie.SVG, czyli skalowalna grafika wektorowa, jest niezwykle praktyczny. Dlatego projektanci używają go częściej.
Ponieważ SVG jest formatem wektorowym, świetnie wyglądają w każdym rozmiarze i działają na prawie każdym typie obrazu innym niż zdjęcie.
SVG jest formatem bezstratnym - co oznacza, że nie traci żadnych danych podczas kompresji - renderuje nieograniczoną liczbę kolorów i jest najczęściej używany do grafiki i logo w Internecie oraz do projektów, które będą wyświetlane na siatkówce lub innych ekranach o wysokiej rozdzielczości.
Plusy SVG
- Format wektorowy renderuje się dobrze w dowolnym rozmiarze
- Możliwość tworzenia prostych renderów SVG w edytorze kodu lub tekstu
- Projektuj i eksportuj złożoną grafikę z Adobe Illustrator lub Sketch
- Tekst SVG jest dostępny
- Pliki SVG można łatwo stylizować i pisać
- Formaty SVG są obsługiwane przez nowoczesne przeglądarki i są przyszłościowe
- Format jest wysoce ściśliwy i lekki
- Dobry do wyszukiwania ze względu na format tekstowy
- Obsługuje przezroczystość
- Umożliwia wyświetlanie nieruchomych lub animowanych obrazów
Wady SVG
- Projektowanie plików SVG może się komplikować
- Nie renderuj w niektórych zdegradowanych przeglądarkach
- Ograniczona obsługa klientów e-mail
Chcieć wiedzieć więcej? Mamy dwa inne przewodniki wyjaśniające więcej na temat SVG: Praktyczny przewodnik dla początkujących po SVG i jak (i dlaczego) SVG zamierza przejąć.
PNG
PNG oferuje coś, czego JPG nie potrafi - przezroczystość.PNG, czyli Portable Network Graphics, to format zaprojektowany dla Internetu, który oferuje coś, czego JPG nie potrafi - przezroczystość. Tylko dlatego PNG jest tak popularny, że przesyła elementy takie jak logo do projektów stron internetowych.
Istnieją dwa rodzaje plików PNG - PNG-8 i PNG-24. PNG-8 używa bardziej ograniczonej palety kolorów z zaledwie 256 kolorami, ma nieco lepszą przezroczystość i eksportuje przy małym rozmiarze. PNG-24 używa nieograniczonej palety kolorów, zachowuje przezroczystość, ale eksportuje w większym rozmiarze. Oba typy PNG mają bezstratną kompresję.
Chociaż formaty PNG są podobne do plików GIF, nie obsługują animacji. Ten format jest najczęściej używany w przypadku ikon, małych zdjęć lub każdego obrazu, który wymaga przezroczystości.
Plusy PNG
- Obsługuje przezroczystość
- Dobre dla obrazów z tekstem
- Formaty PNG dobrze renderują logo
- Zawiera osadzony opis tekstowy dla wyszukiwarek
- PNG-8 ma mały rozmiar pliku i jest najbardziej lekki
- Eksportuje bez poszarpanych krawędzi
Wady PNG
- Rozmiary plików szybko rosną w przypadku dużych plików, takich jak obrazy
- Niektóre starsze klienty e-mail mają problem z ich renderowaniem
- Brak animacji
- Pliki PNG-24 mogą być duże; nie tak dobre do udostępniania w sieci
JPEG
Za każdym razem, gdy zdjęcie zostanie ponownie zapisane i wyeksportowane jako plik JPG, ulegnie degradacji.JPG lub Joint Photographic Experts Group, lub JPEG, jest prawdopodobnie najbardziej znanym formatem obrazu. Jest to domyślna opcja dla większości zapisywanych zdjęć, ponieważ jest przyjazna dla zdjęć dzięki praktycznie nieograniczonemu kolorowi wyświetlacza.
JPG oferuje również możliwość wyboru stopnia kompresji obrazu od 0 procent (intensywna kompresja) do 100 procent (brak kompresji). Większość projektantów wybiera coś w przedziale od 60 do 70 procent. Obrazy nadal wyglądają dobrze na tym poziomie kompresji, ale rozmiary plików są znacznie mniejsze.
JPG używa kompresji stratnej i nie zachowuje oryginalnych danych podczas kompresji. Za każdym razem, gdy zdjęcie zostanie ponownie zapisane i wyeksportowane jako plik JPG, ulegnie degradacji.
Format JPG jest najczęściej używany do zdjęć, fotografii i wszystkiego, co ma dużo kolorów.
Plusy JPEG
- Doskonały do wysokich kolorów i fotografii
- Łatwo zmniejszyć rozmiary plików
- Renderuje konsekwentnie w klientach e-mail
Wady JPEG
- Brak przejrzystości
- Tworzy postrzępione krawędzie tekstu
- Brak animacji
- Format stratny
- Brak automatycznych metadanych dla wyszukiwania, musi zawierać informacje
Jakiego formatu należy użyć?
Skoro już wiesz, jakie są różnice między SVG a PNG a JPG, czego powinieneś użyć?
Możesz zadać sobie kilka pytań, aby uzyskać odpowiedź.
Potrzebujesz formatu wektorowego lub rastrowego?
Wektor: SVG
Raster: JPG lub PNG
Potrzebujesz przejrzystości?
Tak: SVG lub PNG
Nie: JPG
Czy używasz obrazu w wysokim kolorze?
Tak: JPG lub PNG
Nie: SVG
Czy to duże zdjęcie?
Tak: JPG
Nie: PNG
Czy obraz zawiera tekst?
Tak: PNG
Nie: JPG
Czy kompresja bezstratna jest dla Ciebie ważna?
Tak: SVG lub PNG
Nie: JPG
Czy grafika musi zostać zaktualizowana i ponownie wdrożona?
Tak: SVG
Nie: PNG lub JPG
Używasz animacji?
Tak: SVG
Nie: JPG lub PNG
Wniosek
Wszystkie trzy formaty obrazu - SVG, PNG i JPG - mają praktyczne i szerokie zastosowanie. Chociaż SVG jest najnowszym formatem i często można go zapisać w najmniejszym rozmiarze, nie zawsze jest to najlepsza opcja.
Zastanów się, jak korzystasz z obrazów w swoim projekcie, wybierając typ pliku, aby znaleźć taki, który będzie najlepszy dla tego, co próbujesz osiągnąć. Może się nawet okazać, że projekty zawierają obrazy wykorzystujące wszystkie trzy typy plików. (W rzeczywistości jest to dość powszechne!)
