Formáty obrázků: srovnání WebP, PNG, JPG a SVG
Špatně zvolený formát obrázku může zpomalit načítání stránky nebo zhoršit jeho vzhled. Takto si moderní webové formáty vedou z hlediska komprese, průhlednosti a ostrosti.
Soubory se zpracovávají lokálně ve vašem prohlížeči pomocí technologií WebAssembly a HTML5 API. Nikdy neopustí vaše zařízení, takže nedochází k nahrávání na server ani k ukládání souborů třetími stranami.
Začněte převádět okamžitě na svém vlastním zařízení - bez čekání na nahrání, fronty ke stažení a bez omezování rychlosti vzdáleným serverem.
Využívejte všechny dostupné nástroje bez nutnosti vytvářet účet, platit za předplatné nebo narážet na umělé limity velikosti souborů. Převádějte soubory tak často, jak to váš prohlížeč a zařízení zvládnou.
Porovnání formátů a technické specifikace
| Výstupní formát | MIME typ | Specifikace | Typ |
|---|---|---|---|
| PNG Obrázek | image/png | W3C-PNG | Přenositelná síťová grafika |
| JPG Obrázek JPEG | image/jpeg | ITU-T-T81-JPEG | Kompresní formát pro fotografickou grafiku Joint Photographic Experts Group |
| WebP Obrázek | image/webp | RFC-6386-VP8 | Moderní obrazový formát WebP od společnosti Google |
| SVG Vektorový formát | image/svg+xml | W3C-SVG | Škálovatelná vektorová grafika |
| HEIC Fotografie | image/heic | ISO-IEC-23008-12-HEIF | Vysoce efektivní kontejner pro obrázky |
| AVIF Obrázek | image/avif | AOMEDIA-AV1-AVIF | Obrazový formát AV1 |
| PSD Dokument Photoshopu | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Dokument Adobe Photoshopu |
| PSB Velký dokument Photoshopu | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Velký dokument Adobe Photoshop |
| WMF Metasoubor Windows | image/x-wmf | MS-WMF-SPEC | Vektorový formát metasouboru Windows |
| EMF Vylepšený metasoubor | image/x-emf | MS-EMF-SPEC | Vektorový formát vylepšeného metasouboru |
| JFIF Obrázek | image/jpeg | ITU-T-T81-JPEG | Formát pro výměnu souborů JPEG |
| TGA Truevision | image/x-tga | TGA-SPEC | Rastrový obrázek Truevision Targa |
| PCX ZSoft | image/x-pcx | PCX-SPEC | Bitmapový obrázek ZSoft Paintbrush PCX |
| PDF PDF | application/pdf | ISO-32000-2 | Formát přenositelného dokumentu (Portable Document Format) |
Technické specifikace a přehled kodeků
Rychlé rozhodovací pravidlo pro formáty
WebP a AVIF mohou u mnoha obrázků pro web zmenšit soubor a oba podporují průhlednost, výsledek však závisí na obrázku a nastavení kódování. JPG použijte u fotografií, kde jsou přijatelné drobné artefakty komprese, PNG pro ostré snímky obrazovky a grafiku a SVG pro škálovatelná loga a ikony.
Rastr vs. vektor: proč se SVG nikdy nerozmaže
Rastrové obrázky (JPG, PNG, WebP) tvoří mřížka pixelů s pevně danými barvami - při přílišném zvětšení se rozmažou nebo se rozpadnou na viditelné pixely. SVG je založené na matematickém popisu: ukládá čáry, křivky a barvy, takže se ikony a ilustrace vykreslí ostře na všem od mobilních obrazovek po displeje s rozlišením 8K a přitom zabírají jen málo místa.
Mýtus: „Vyšší DPI znamená lepší kvalitu webového obrázku“
DPI (tečky na palec) je čistě instrukce pro fyzický tisk a webové prohlížeče ji zcela ignorují. Na telefonech a počítačových monitorech je ostrost obrázku určena výhradně rozměry v pixelech (např. 1920x1080) a hustotou zobrazení, nikoli vloženými metadaty DPI.
Alfa průhlednost: PNG vs. WebP
JPEG nemá kanál průhlednosti, takže se průhledné pixely při uložení do JPEG změní na jednolitou barvu pozadí. PNG zachovává alfa průhlednost, ale podporuje ji i WebP a může vytvořit menší soubor; výsledek ověřte na konkrétním obrázku, protože velikost závisí na jeho obsahu a nastavení kódování.
0 bajtů odesláno na externí servery. Veškeré zpracování probíhalo lokálně v sandboxu vašeho prohlížeče.