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.
Twoje pliki są przetwarzane w całości w Twojej przeglądarce internetowej przy użyciu HTML5 Canvas oraz WebAssembly. Żadne dane nigdy nie opuszczają Twojego urządzenia.
Pomiń kolejki przesyłania i pobierania. Konwersje odbywają się lokalnie z pełną prędkością sprzętową komputera bez limitów serwera.
Zgodność z oficjalnymi specyfikacjami ISO, W3C i IETF gwarantuje kompatybilność wyników w nowoczesnych systemach operacyjnych.
Porównanie formatów i specyfikacja techniczna
| Format wyjściowy | Typ MIME | Specyfikacja | Typ |
|---|---|---|---|
| PNG Obraz | image/png | W3C-PNG | Grafika rastrowa o wysokiej jakości z obsługą przezroczystości |
| 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 | Ulepszony 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 |
Specyfikacja techniczna i analiza kodeków
Szybka zasada wyboru formatu
Używaj WebP lub AVIF dla nowoczesnych stron internetowych (są o 30% mniejsze od JPEG i obsługują przezroczystość). Używaj JPG do zdjęć, gdzie niewielkie, niezauważalne artefakty kompresji nie mają znaczenia. Używaj PNG do zrzutów ekranu, grafiki interfejsu użytkownika oraz ilustracji wymagających idealnie ostrego tekstu. Używaj SVG do logo i ikon, które potrzebują nieskończonej skalowalności.
Raster kontra wektor: Dlaczego pliki SVG nigdy się nie rozmywają
Obrazy rastrowe (JPG, PNG, WebP) to siatki o stałych pikselach kolorów - po zbyt dużym przybliżeniu stają się rozmyte lub spikselowane. SVG to czysta matematyka: przechowuje matematyczne linie, krzywe i kolory, pozwalając ikonom oraz ilustracjom renderować się z brzytwową ostrością na wszystkim, od ekranów telefonów po wyświetlacze 8K, przy zachowaniu miniaturowych rozmiarów plików.
Mit: „Wyższe DPI oznacza lepszą jakość obrazu w sieci"
DPI (kropki na cal) to wyłącznie fizyczna instrukcja drukowania, która jest całkowicie ignorowana przez przeglądarki internetowe. Na telefonach i monitorach komputerowych ostrość obrazu jest określana w całości przez wymiary w pikselach (np. 1920x1080) oraz gęstość wyświetlania, a nie przez osadzone metadane DPI.
Przezroczystość alfa: PNG kontra WebP
Tradycyjny format JPG w ogóle nie obsługuje przezroczystości - przezroczysto 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.