Kiedy używać obrazków z rozszerzeniem .png .jpg, a kiedy z rozszerzeniem .svg? Czy obrazki .svg powinno się stosować tylko do ikonek, a do większych obrazków na stronie używać np. .png albo .jpg?
1
3
rysiek81 napisał(a):
Czy obrazki .svg powinno się stosować tylko do ikonek?
Nie, przykład Mapa Rzeczypospolitej Obojga Narodów, Sytuacja wyznaniowa w Rzeczypospolitej 1573.
svg jest do grafiki wektorowej
0
@KamilAdam: to jeśli mam do wyboru wielki obrazek .svg i .png, który chce dodać na strone to lepiej .svg czy .png użyć?
0
Zależy; co ten obrazek przedstawia?
0
Zależy co chcesz osiągnąć
- Jak szybkość ładowania strony to lżejszy
- Jak estetykę to ładniejszy
5
Podszedłbym do tego tak:
- jpg, jeżeli zależy mi na tym, ile zdjęcie waży (więc jak się szybko się załaduje na każdym możliwym urządzeniu etc.) ale godzę się na kompromis jakości
- png, gdy mam zwykły obrazek rastrowy, ale chcę zachować lepszą jakość (i / lub przezroczystość)
- svg, gdy mam cokolwiek, co przy powiększeniu / pomniejszeniu ma wyglądać dalej super (to jest główna zaleta grafiki wektorowej)
Pliki svg to nie konkurencja dla jotpegów, a raczej uzupełnienie i vice versa. Nie polecam nikomu robić diagramu, wykresu, map etc. w grafice rastrowej.
6
Kiedy używać obrazków z rozszerzeniem .png .jpg, a kiedy z rozszerzeniem .svg? Czy obrazki .svg powinno się stosować tylko do ikonek, a do większych obrazków na stronie używać np. .png albo .jpg?
*.svg - zapisuje dane wektorowo, tj. w postaci kształtów geometrycznych. Możesz tam tworzyć proste ikonki, ale również bardzo zaawansowane rzeczy. SVG może dużo zajmować, jeśli jest tam dużo elementów. Dużą zaletą SVG jest możliwość skalowania bez straty jakości (kółko w powiększeniu dalej będzie wyglądać jak kółko, a nie zbiór pikseli. Tak samo jeśli w .svg jest tekst, to będzie on dalej czytelny w dużym powiększeniu).
https://pl.wikipedia.org/wiki/Grafika_wektorowa
Fajnie się to sprawdza do ikonek, wykresów, map, czy czegoś zrobionego w wektorowych programach graficznych (zwierzątka, postacie, wektorowe scenki, cokolwiek).
No i SVG możesz używać samemu w swoich webowych apkach, manipulować tym za pomocą JavaScript. Można w ten sposób robić na stronach np. klikalne kółka*, wielokąty, strzałki i inne geometryczne elementy interfejsu użytkownika, dodawać do tego eventy itp.
.png, .oraz .jpg opisują formaty rastrowe. Czyli grafika tam jest zapisana jako zbiór pikseli. Czyli np. zdjęcia będziesz tak zapisywać.
Przy czym .jpg jest zwykle mniejszy, niestety kosztem jakości, bo kompresja.
w .png też jest kompresja, ale bezstratna, więc jakość jest taka sama (jednak pliki zwykle są większe). Ponadto w .png jest przezroczystość.
jeszcze jest .gif, który można porównać do .png (rastrowy, bezstratna kompresja, przezroczystość), ale .gif ma tylko 256 kolorów, za to ma możliwość animacji.
no i rastrowe formaty przy powiększeniu wyglądają dość pikselowo.
*tak, kółka można robić też w CSS za pomocą border-radius: 50%, ale robienie tego w CSS to sztuczka, a w SVG masz prawdziwe kółka czy inne figury geometryczne, których w CSS już tak łatwo nie zrobisz
7
http://www.zsp.szubin.pl/zadania/techinfZSZ/Grafika%20bimapowa/gb7.htm
JPG do zdjęć z natury.
GIF do grafik z ograniczoną paletą kolorów, dużymi jednolitymi obszarami, ostrymi krawędziami.
PNG jest podobne do GIF, ale oferuje więcej niż 256 kolorów i osobny kanał alfa (bo w GIF przezroczystość jest tylko zero-jedynkowa).
SVG jest wektorowe i dobrze nadaje się np. do map, ew. ikonek. Czegoś co sobie rysujesz od podstaw w edytorze wektorowym. Bo wektoryzacja istniejących grafik to już raczej pomyłka.
4
A tak w ogóle, to chcesz poważnie rozważyć WebP jako alternatywę dla png — bo jest już dosyć szeroko dostępne, a mniejsze¹ przy porównywalnym czasie dekompresji. A być może jako alternatywę dla JPEG-a też, ale tutaj nie jestem przekonany o wyższości jednego rozwiązania nad drugim…
Zatem ja bym schemat decyzyjny widział tak:
- Jeśli mam coś prostego geometrycznie (ikonka, graf, mapa, wykres, schemat…), to SVG.
- Jeśli mam coś, gdzie chcę bezwzględnie kompresję bezstratną i krytycznie zależy mi na jakości, to WebP z png jako backupem na starsze urządzenia.
- Jeśli mam coś, gdzie chcę przezroczystość, to jak w punkcie drugim.
- Jak mam „po prostu” obrazek, to JPEG lub WebP z JPEG-iem jako backupem, jeśli akurat wypadnie lepiej.
„Zaawansowanych” JPEG-ów (z przezroczystością, kodowaniem arytmetycznym, itd.) lepiej nie używać, bo mało co łyka i są z tym tylko problemy.
¹ Mój zbiór 733 ikonek potworów do eRPeGów, orginalnie w png, zmalał o ponad połowę po przekształceniu bezstratnym do WebP, a o ponad jedną trzecią w porównaniu do optymalizowanego png, przy dużo krótszym czasie rekompresji (~20x różnica).