Formaty obrazów: Porównanie WebP, PNG, JPG i SVG
Wybór niewłaściwego formatu obrazu może wydłużyć czas ładowania strony lub rozmyć grafikę. Oto jak nowoczesne formaty internetowe wypadają w porównaniu pod względem kompresji, przezroczystości i ostrości.
Pliki są przetwarzane lokalnie w twojej przeglądarce za pomocą WebAssembly i interfejsów HTML5 API. Nigdy nie opuszczają twojego urządzenia, dzięki czemu nie ma przesyłania na serwery ani przechowywania plików przez osoby trzecie.
Rozpocznij konwersję natychmiast na własnym urządzeniu - bez oczekiwania na przesyłanie, bez kolejek pobierania i bez spowalniania przez zdalny serwer.
Korzystaj ze wszystkich dostępnych narzędzi bez zakładania konta, płacenia za plan ani napotykania sztucznych limitów rozmiaru pliku. Konwertuj tak często, na ile pozwalają twoja przeglądarka i urządzenie.
Porównanie formatów i specyfikacja techniczna
| Format wyjściowy | Typ MIME | Specyfikacja | Typ |
|---|---|---|---|
| PNG Obraz | image/png | W3C-PNG | Bezstratny format obrazu rastrowego obsługujący przezroczystość. |
| JPG Obraz JPEG | image/jpeg | ITU-T-T81-JPEG | Skompresowany format obrazu fotograficznego |
| WebP Obraz | image/webp | RFC-6386-VP8 | Nowoczesny format obrazu sieciowego stworzony przez Google |
| SVG Wektor | image/svg+xml | W3C-SVG | Skalowalna grafika wektorowa oparta na formacie XML |
| HEIC Zdjęcie | image/heic | ISO-IEC-23008-12-HEIF | Wysoko wydajny kontener obrazu |
| AVIF Obraz | image/avif | AOMEDIA-AV1-AVIF | Format pliku obrazu oparty na kodeku AV1 |
| PSD Dokument programu Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Dokument Adobe Photoshop |
| PSB Duży dokument programu Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Dokument Adobe Photoshop o dużym formacie |
| WMF Metaplik systemu Windows | image/x-wmf | MS-WMF-SPEC | Format wektorowy metapliku Windows |
| EMF Rozszerzony metaplik | image/x-emf | MS-EMF-SPEC | Rozszerzony format wektorowy metapliku |
| JFIF Obraz | image/jpeg | ITU-T-T81-JPEG | Format wymiany plików JPEG |
| TGA Truevision | image/x-tga | TGA-SPEC | Zaawansowany format rastrowy Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | Mapa bitowa ZSoft Paintbrush PCX |
| PDF Dokument | application/pdf | ISO-32000-2 | Przenośny format dokumentu (Portable Document Format) |
Specyfikacja techniczna i analiza kodeków
Szybka zasada wyboru formatu
Używaj WebP lub AVIF w nowoczesnych witrynach (są o 30% mniejsze niż JPEG i obsługują przezroczystość). Wybieraj JPG do zdjęć, w których drobne, niezauważalne artefakty kompresji nie mają znaczenia. Używaj PNG do zrzutów ekranu, grafiki interfejsu i ilustracji wymagających idealnie ostrego tekstu. SVG sprawdzi się w logo i ikonach, które muszą skalować się bez utraty jakości.
Raster kontra wektor: Dlaczego pliki SVG nigdy się nie rozmywają
Obrazy rastrowe (JPG, PNG, WebP) składają się z siatki pikseli o określonych kolorach. Przy zbyt dużym powiększeniu obraz staje się rozmyty lub widać pojedyncze piksele. SVG to zapis matematyczny: przechowuje linie, krzywe i kolory, dzięki czemu ikony i ilustracje pozostają idealnie ostre na każdym ekranie - od telefonu po wyświetlacz 8K - mimo niewielkiego rozmiaru pliku.
Mit: „Wyższe DPI oznacza lepszą jakość obrazu w sieci"
DPI (liczba punktów na cal) to parametr przeznaczony wyłącznie do określania fizycznej wielkości wydruku, ignorowany przez przeglądarki internetowe. Na telefonach i monitorach ostrość obrazu zależy wyłącznie od jego wymiarów w pikselach (np. 1920x1080) i gęstości pikseli ekranu, a nie od osadzonych metadanych DPI.
Przezroczystość alfa: PNG kontra WebP
Tradycyjny format JPG w ogóle nie obsługuje przezroczystości - przezroczyste tła zamieniają się w jednolitą biel lub czerń. PNG zapoczątkowało czystą 8-bitową przezroczystość alfa, ale WebP zapewnia obecnie identyczną jakość przezroczystości przy rozmiarach plików mniejszych nawet o 40%.
0 bajtów przesłanych na zewnętrzne serwery. Całe przetwarzanie odbyło się lokalnie w piaskownicy przeglądarki.