Który format jest lepszy do zapisywania obrazów przeznaczonych na strony internetowe; PNG czy SVG?

Odpowiedzi:

8

Powiedziałbym PNG po prostu dlatego, że wydaje się być bardziej akceptowanym formatem niż SVG.

Philip Regan
źródło
3
W przypadku wysokiej jakości SVG jest to lepsze, ale w praktyce jedynym prawdziwym rozwiązaniem jest PNG, ponieważ SVG nie jest obecnie obsługiwany na całym świecie.
Littlemad,
@ Littlemad Renderowanie i wyświetlanie plików SVG jest również wolniejsze niż zwykłe ścieranie obrazu za pomocą PNG.
Mateen Ulhaq,
1
@Littlemad Nie musisz. Możesz użyć obejścia VML dla IE <9 lub możesz wstępnie renderować go na serwerze, a nawet użyć osadzonego Flasha, który renderuje go w IE. Wszystkie przeglądarki (przynajmniej te główne) obsługują SVG, tylko IE 6, 7 i 8 są z nami do cholery. Więc po prostu zastosuj obejście, które nie jest okropne, jeśli widzą gorszą stronę, to ich wina. To bardzo przypomina SDTV vs HDTV lub DVD vs BluRay.
Camilo Martin
1
W 2014 r. Ta odpowiedź powinna raczej poprzeć SVG.
Hanna
1
2015 caniuse.com/#search=svg - w zasadzie nie ma IE8
goodship11
18

Prostą odpowiedzią jest użycie obu.

Fakt, że podałeś SVG jako opcję, oznacza, że ​​możemy wykluczyć grafikę fotograficzną jako zamierzony przypadek użycia - ponieważ SVG są dobre tylko dla grafiki liniowej, takiej jak logo, ikony i ilustracje podobne do clipartów.

Jeśli zastanawiasz się nad tym wyborem w przypadku grafiki fotograficznej, nie ma wyboru; PNG prawdopodobnie zawsze będzie lepszy. W przypadku grafiki, w której SVG jest realną opcją, SVG jest najlepszą opcją z rezerwowym formatem PNG / JPEG. PNG ma wiele zalet, ale ze względu na skalowalność i rozmiar pliku często nie będzie pasował do SVG.

Używając tylko jednego lub drugiego środka, będziesz musiał poświęcić kompatybilność wsteczną lub stopniowe ulepszanie.

Porównując je ze sobą, PNG z pewnością będzie obsługiwany przez więcej przeglądarek niż SVG w tym momencie, ale rozdzielczości nowo wydanych urządzeń stale się zwiększają, co oznacza, że ​​PNG będą musiały być obsługiwane w oparciu o wiele różnych rozdzielczości (poprzez zapytania mediów, JavaScript lub sniffing agenta użytkownika) lub skalowane przez przeglądarki, co może dawać niedoskonałe wyniki.

Patrząc na to , co wiemy o przyszłości; zawsze wyższe rozdzielczości, szersze wsparcie i szersze wykorzystanie plików SVG w Internecie; warto budować na nadchodzące wydarzenia.

Zasadniczo strony internetowe powinny być budowane przez wiele lat; za 5 lat Twoja pięknie zgodna z poprzednimi wersjami witryna może wyglądać niesamowicie, ponieważ 2% użytkowników Internetu nadal korzysta ze starych przeglądarek, ale dość słabych w aktualnych przeglądarkach z szalonymi rozdzielczościami - więc jest to bardzo trudny wybór, w jaki sposób kompromis.

Twoje opcje w listopadzie 2014 r

  1. Tylko pliki PNG

    • Ze względu na jakość musisz podać co najmniej pięć różnych wersji w zależności od rozmiarów ekranu i rozdzielczości - i to bardzo konserwatywny szacunek, możesz uzyskać 10-15 wersji tego samego obrazu, jeśli chcesz być bardzo dokładny . To także zajmuje trochę czasu.

    • Jeśli zdecydujesz się wyświetlać pojedynczą grafikę i skalować ją w przeglądarce, wyniki będą prawdopodobnie mniej niż idealne, a nawet mogą być brzydkie w zależności od skali.

    • Duża liczba zapytań o media może niepotrzebnie nadmuchać CSS i negatywnie wpłynąć na szybkość ładowania strony.

    • Będzie wyglądać świetnie na starszych przeglądarkach i urządzeniach, ale nie tak wspaniale na nowszych.

  2. Pliki SVG z jednym rezerwowym plikiem PNG / JPEG / GIF

    • Możesz używać plików SVG wszędzie, a następnie przywrócić je do innego formatu dla przeglądarek, które nie obsługują SVG. Główną zaletą jest to, że potrzebujesz tylko jednego pliku dla wszystkich różnych rozdzielczości.

    • Jeśli skompromitujesz i zaakceptujesz, że użytkownicy przestarzałych przeglądarek mogą żyć z niedokładnie skalowaną grafiką, potrzebujesz tylko jednej innej wersji każdego pliku w formacie PNG, JPEG lub GIF.

    • Realizacja zajmie tyle samo czasu, co zapytania o media wyłącznie w formacie PNG - być może nawet mniej, co oznacza, że ​​prawdopodobnie będzie to około tej samej ceny.

    • Będzie wyglądać świetnie na wszystkich nowych urządzeniach, z poświęceniem starszej technologii.

  3. SVG z wieloma awariami PNG / JPEG / GIF zależy od rozdzielczości i rozmiaru ekranu

    • Możesz najpierw wyświetlać SVG, a następnie PNG zależne od rozdzielczości dla przeglądarek, które nie obsługują SVG. Byłaby to najdokładniejsza, najbardziej zgodna z poprzednimi i przyszłymi, najbardziej spójna i najdroższa czasochłonna opcja.

    • Prawdopodobnie zajęłoby to tyle samo czasu, co kombinacja 1 i 2, plus trochę więcej za wypracowanie załamań.

    • Będzie wyglądać niesamowicie na prawie każdym urządzeniu.

Podsumowując, myślę, że to zależy od tego, czy szukasz bardziej kompatybilności wstecznej lub bardziej progresywne ulepszanie i ile pieniędzy czasu trzeba poświęcić.

Dom
źródło
1
Możesz wspomnieć coś o <picture>elemencie pomagającym przy różnych rozmiarach obrazu
Zach Saucier
15

SVG jest skalowalny, jeśli masz grafikę wektorową, która jest wyraźną zaletą. W przypadku grafiki pikselowej PNG jest lepszy. Minusem jest to, że Internet Explorer obsługuje SVG tylko z nadchodzącą wersją 9 (wcześniej z wtyczką). Przeglądarki mobilne mogą również mieć ograniczoną obsługę SVG.

EDYCJA : Jak zauważa ClemDesm, starsze wersje IE nie obsługują w pełni przezroczystego PNG, ponieważ obsługiwany jest IE8. Nieprzezroczyste pliki PNG działają dobrze. Odpowiedź Computerish ma na razie świetne rozwiązanie do obsługi obrazów wektorowych: zachowaj je jako SVG, ale eksportuj je do Internetu jako PNG. W pełni zgadzam się z tym rozwiązaniem.

Memento
źródło
-1 Svg nadal nie jest obsługiwany na całym świecie. Nie sugerowałbym użycia, jeśli nie wyjaśnisz jasno, gdzie działa i odwróconej alternatywy w przypadku, gdy nie działa (najprawdopodobniej). Musimy wziąć pod uwagę standardy sieciowe, które staramy się osiągnąć. Jeśli wybór dotyczy sieci i PNG lub SVG, zawsze powinien to być PNG, dopóki SVG nie będzie globalnie obsługiwany przez przeglądarki starszej generacji. Chciałbym używać doskonałości SVG, ale nie jest to jeszcze rzeczywistością.
Littlemad,
Jak napisałem, IE nie obsługuje SVG (tylko w dotychczasowej wersji 9), a przeglądarka mobilna może również nie obsługiwać.
Mnementh
@Littlemad: downvote jest trochę przesadzone, ponieważ 1- odpowiedź mówi nam, że nie jest w pełni obsługiwana (ok, nie ma tak wielu szczegółów, ale mimo to jest powiedziane i nie jest złe, nie zasługuje na kanał alfa -1) 2-PNG nie jest obsługiwany w IE6 i 7, ani słowa o tym? :)
Shikiryu,
@ClemDesm: Ach, dobra wskazówka, starsze IE nie obsługują w pełni przezroczystych plików PNG.
Mnementh
1
@ Littlemad ”nie jest obsługiwany w wielu najnowszych przeglądarkach” Wydaje się to być błędnym wnioskiem, ponieważ w odnośniku istnieje tylko jedna przeglądarka, która nie jest w stanie obsługiwać SVG (IE8). Nie musisz też instalować wtyczek, aby korzystać z SVG (nigdy tego nie widziałem, może w IE6). To, co widzisz na czerwono w odnośniku, to części SVG, których zwykle nie używasz (głównie jakiś rodzaj filtrów lub innych efektów). Podstawy działa.
feeela
5

Zdecydowanie użyj PNG dla strony internetowej. SVG po prostu nie jest wystarczająco szeroko wspierany i ma niewiele (jeśli w ogóle) znaczących korzyści w porównaniu z PNG w przypadku spłaszczonego eksportu. To powiedziawszy, zachowaj wszystkie swoje kopie robocze w SVG.

Komputerowy
źródło
1
Dobre rozwiązanie, aby zachować oryginał jako SVG i wyeksportować go do formatu PNG w Internecie. Jeśli SVG jest później lepiej obsługiwany, możesz go zmienić. Polecam to rozwiązanie dla obrazów wektorowych.
Mnementh
2
„ma niewiele (jeśli w ogóle) znaczących korzyści w porównaniu z PNG” Co? Jak manipulować PNG za pomocą CSS lub JavaScript? Jak je skalować, nie tracąc rozdzielczości? Jak łączysz części obrazu (np. Link do kraju na mapie)? Pliki SVG zwykle są również znacznie mniejsze niż PNG (z wyjątkiem małych ikon).
feeela
3
SVG ma wiele zalet w stosunku do PNG w przypadku ilustracji wektorowych.
DA01
0

Trzymałbym się PNG, aby być po bezpiecznej stronie. SVG nadal nie jest w pełni akceptowany przez wiele dużych firm internetowych i przeglądarek. Chociaż pliki SVG są skalowalne i są wektorami, często są niepotrzebne, zajmują więcej miejsca i nadmiernie komplikują witrynę.

Mam nadzieję, że odpowiedziałeś na twoje pytanie :)

nicolos
źródło
„zajmują więcej miejsca i komplikują się”? Jak to?
DA01,
1
Jestem pewien, że może to wpłynąć na Twoje SEO, ponieważ Twoje zdjęcia mogą nie pojawiać się w Google i nie jestem w 100% pewien, ale często zdarza się, że pliki SVG ładują się dłużej
nicolos
2
Czas ładowania zależy od rozmiaru pliku, którego pliki SVG często mogą być znacznie mniejsze. A jeśli wyszukiwanie grafiki Google jest ważne dla SEO witryn, tak, PNG może być lepszy, ale myślę, że to bardziej niszowa rzecz.
DA01,
1
Tak, mam na myśli, że pod koniec dnia nie ma dobrej lub złej odpowiedzi. Rozmiar pliku w dużej mierze zależy od złożoności obrazu i tak, twój wybór zależy od przypadku użycia.
Podałem
-1

Mimo że SVG nie jest akceptowane na całym świecie, a niektórzy ludzie mają frustrujące skalowanie czasu PNG, zawsze zauważyłem, że tworzenie ikony w programie Adobe Illustrator działa najlepiej w przypadku skalowania w górę lub w dół „rozsądnej” kwoty.

stancil21
źródło
Czy program Adobe Illustrator obsługuje pliki pngs, svg lub oba, albo jaki dokładnie jest powód, aby wymienić tutaj program Illustrator? I dlaczego uważasz, że SVG nie jest globalnie akceptowany?
Mensch