Slikovni formati: Primerjava WebP, PNG, JPG in SVG
Izbira napačnega slikovnega formata lahko upočasni nalaganje strani ali zamegli vaše grafike. Tukaj je primerjava sodobnih spletnih formatov glede stiskanja, prosojnosti in ostrine.
Vaše datoteke se obdelujejo izključno v vašem spletnem brskalniku z uporabo tehnologij HTML5 Canvas in WebAssembly. Noben podatek nikoli ne zapusti vaše naprave.
Preskočite čakalne vrste za nalaganje in prenašanje. Pretvorbe potekajo lokalno s polno strojno hitrostjo naprave brez strežniških omejitev.
Skladno z uradnimi specifikacijami ISO, W3C in IETF, kar zagotavlja združljivost izhodnih datotek v sodobnih operacijskih sistemih.
Primerjava formatov in tehnične specifikacije
| Izhodni format | Vrsta MIME | Specifikacija | Vrsta |
|---|---|---|---|
| PNG Slika | image/png | W3C-PNG | Prenosna omrežna grafika |
| JPG Slika JPEG | image/jpeg | ITU-T-T81-JPEG | Format skupine Joint Photographic Experts Group |
| WebP Slika | image/webp | RFC-6386-VP8 | Sodobni slikovni format Google WebP |
| SVG Vektor | image/svg+xml | W3C-SVG | Razširljiva vektorska grafika |
| HEIC Fotografija | image/heic | ISO-IEC-23008-12-HEIF | Visoko učinkovit vsebnik slik |
| AVIF Slika | image/avif | AOMEDIA-AV1-AVIF | Slikovni format AV1 |
| PSD Photoshop Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Document |
| PSB Photoshop Large Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Large Document |
| WMF Windows Metafile | image/x-wmf | MS-WMF-SPEC | Windows Metafile Vector Format |
| EMF Enhanced Metafile | image/x-emf | MS-EMF-SPEC | Enhanced Metafile Vector Format |
| JFIF Image | image/jpeg | ITU-T-T81-JPEG | JPEG File Interchange Format |
| TGA Truevision | image/x-tga | TGA-SPEC | Napredni rastrski zapis Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Tehnične specifikacije in pregled kodekov
Hitro pravilo za izbiro formata
Za sodobna spletna mesta uporabite WebP ali AVIF (30 % manjši od JPEG-a s podporo za prosojnost). JPG uporabite za fotografije, kjer majhni, neopazni artefakti stiskanja niso pomembni. PNG uporabite za posnetke zaslona, uporabniško grafiko in ilustracije, ki zahtevajo ostro besedilo na ravni pikslov. SVG uporabite za logotipe in ikone, ki potrebujejo neskončno prilagajanje velikosti.
Rastrske proti vektorskim slikam: Zakaj se SVG-ji nikoli ne zameglijo
Rastrske slike (JPG, PNG, WebP) so mreže pikslov s fiksno barvo - če preveč približate, postanejo zamegljene ali pikslaste. SVG je čista matematika: shranjuje matematične črte, krivulje in barve, kar omogoča, da so ikone in ilustracije izjemno ostre na vsem, od mobilnih zaslonov do zaslonov 8K, ob majhnih velikostih datotek.
Mit: 'Višji DPI pomeni boljšo kakovost spletnih slik'
DPI (točk na palec) je izključno navodilo za fizično tiskanje in ga spletni brskalniki popolnoma prezrejo. Na telefonih in računalniških monitorjih ostrino slike v celoti določajo dimenzije v pikslih (npr. 1920x1080) in gostota zaslona, ne pa vdelani metapodatki DPI.
Alfa prosojnost: PNG proti WebP
Klasični JPG sploh ne podpira prosojnosti - prosojna ozadja postanejo povsem bela ali črna. PNG je prinesel čisto 8-bitno alfa prosojnost, vendar WebP sedaj zagotavlja enako kakovost prosojnosti pri do 40 % manjših velikostih datotek.
0 bajtov naloženih na zunanje strežnike. Vsa obdelava je potekala lokalno v varnem območju vašega brskalnika.