Formati slika: Usporedba WebP, PNG, JPG i SVG
Odabir krivog formata slike može povećati vrijeme učitavanja stranice ili zamutiti vašu grafiku. Evo kako se moderni web formati uspoređuju u kompresiji, transparentnosti i oštrini.
Vaše se datoteke obrađuju u potpunosti u vašem web pregledniku pomoću HTML5 Canvasa i WebAssemblyja. Nijedan podatak nikada ne napušta vaš uređaj.
Preskočite redove čekanja za prijenos i preuzimanje. Pretvorbe se odvijaju lokalno pri punoj brzini sklopovlja stroja bez ograničenja poslužitelja.
U skladu sa službenim ISO, W3C i IETF specifikacijama kako bi se zajamčila kompatibilnost izlaza na modernim operativnim sustavima.
Usporedba formata i tehničke specifikacije
| Izlazni format | MIME vrsta | Specifikacija | Vrsta |
|---|---|---|---|
| PNG slika | image/png | W3C-PNG | Portable Network Graphics grafika |
| JPG JPEG slika | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group format |
| WebP slika | image/webp | RFC-6386-VP8 | Google WebP suvremeni format slike |
| SVG vektor | image/svg+xml | W3C-SVG | Skalabilna vektorska grafika |
| HEIC fotografija | image/heic | ISO-IEC-23008-12-HEIF | Spremnik slika visoke učinkovitosti |
| AVIF slika | image/avif | AOMEDIA-AV1-AVIF | AV1 format datoteke slike |
| 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 | Truevision napredni raster |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Tehničke specifikacije i pregled kodeka
Brzo pravilo za odluku o formatu
Koristite WebP ili AVIF za moderne web stranice (30% manje od JPEG-a s podrškom za transparentnost). Koristite JPG za fotografije gdje sitni neprimjetni artefakti kompresije nisu važni. Koristite PNG za snimke zaslona, sučelja i ilustracije koje zahtijevaju oštar tekst. Koristite SVG za logotipe i ikone koje trebaju beskonačno skaliranje.
Raster vs. Vektor: Zašto SVG slike nikada nisu mutne
Rasterske slike (JPG, PNG, WebP) mreže su fiksnih piksela u boji - zumirajte preblizu i postaju mutne ili pikselizirane. SVG je čista matematika: pohranjuje matematičke linije, krivulje i boje, omogućujući da se ikone i ilustracije prikažu kristalno oštro na svemu, od mobilnih zaslona do 8K zaslona uz male veličine datoteka.
Mit: 'Veći DPI znači bolju kvalitetu web slike'
DPI (točaka po inču) isključivo je fizička uputa za ispis i web preglednici ga u potpunosti ignoriraju. Na telefonima i računalnim monitorima oštrina slike u potpunosti je određena dimenzijama piksela (npr. 1920x1080) i gustoćom prikaza, a ne ugrađenim DPI metapodacima.
Alfa transparentnost: PNG vs. WebP
Tradicionalni JPG uopće ne podržava transparentnost - prozirne pozadine postaju potpuno bijele ili crne. PNG je uveo čistu 8-bitnu alfa transparentnost, ali WebP sada pruža identičnu kvalitetu transparentnosti uz do 40% manje veličine datoteka.
0 bajtova učitano na vanjske poslužitelje. Sva obrada odvijala se lokalno u sandčiću vašeg preglednika.