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

Czy podczas eksportowania / zapisywania zdjęć z przezroczystym tłem przeznaczonych do witryn internetowych należy zapisać je jako PNG lub SVG? Czemu?

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

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ć.

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.

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.

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 :)

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.