Pildivormingud: WebP, PNG, JPG ja SVG võrdlus
Vale pildivormingu valimine võib aeglustada lehe laadimisaega või muuta graafika uduseks. Siin on võrdlus selle kohta, kuidas tänapäevased veebivormingud erinevad tihenduse, läbipaistvuse ja teravuse poolest.
Teie faile töödeldakse täielikult teie veebibrauseris, kasutades HTML5 Canvas ja WebAssembly tehnoloogiat. Ükski andmetükk ei lahku kunagi teie seadmest.
Jätke üles- ja allalaadimisjärjekorrad vahele. Teisendused toimuvad kohapeal täielikul seadme riistvarakiirusel ilma serveri piiranguteta.
Vastab ametlikele ISO, W3C ja IETF spetsifikatsioonidele, et tagada väljundi ühilduvus erinevates kaasaegsetes operatsioonisüsteemides.
Formaatide võrdlus ja tehnilised spetsifikatsioonid
| Väljundformaat | MIME-tüüp | Spetsifikatsioon | Tüüp |
|---|---|---|---|
| PNG pilt | image/png | W3C-PNG | Portable Network Graphics pildivorming |
| JPG JPEG pilt | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group pildivorming |
| WebP pilt | image/webp | RFC-6386-VP8 | Google WebP kaasaegne pildivorming |
| SVG vektor | image/svg+xml | W3C-SVG | Skaleeritav vektorgraafika |
| HEIC foto | image/heic | ISO-IEC-23008-12-HEIF | Kõrge efektiivsusega pildikonteiner |
| AVIF pilt | image/avif | AOMEDIA-AV1-AVIF | AV1 pildifaili vorming |
| 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 | Truevisioni täiustatud raster |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Tehnilised spetsifikatsioonid ja koodekite ülevaade
Kiire vormingu valimise reegel
Kasutage kaasaegsetel veebisaitidel WebP-d või AVIF-i (30% väiksemad kui JPEG ja toetavad läbipaistvust). Kasutage JPG-d fotode jaoks, kus pisikesed, märkamatud tihendusartefaktid ei oma tähtsust. Kasutage PNG-d ekraanipiltide, kasutajaliidese graafika ja illustratsioonide jaoks, mis nõuavad piksliteravat teksti. Kasutage SVG-d logode ja ikoonide jaoks, mis vajavad lõpmatut skaleerimist.
Raster vs. vektor: miks SVG-d ei muutu kunagi uduseks
Rasterpildid (JPG, PNG, WebP) on fikseeritud värvipikslite ruudustikud - liiga kaugele sisse suumides muutuvad need uduseks või pikseldatuks. SVG on puhas matemaatika: see salvestab matemaatilised jooned, kõverad ja värvid, võimaldades ikoonidel ja illustratsioonidel kuvada habemenuga teravalt kõigel alates mobiiliekraanidest kuni 8K-ekraanideni, seda väga väikeste failisuurustega.
Müüt: "Kõrgem DPI tähendab paremat veebipildi kvaliteeti"
DPI (punkti tolli kohta ehk dots per inch) on puhtalt füüsiline trükijuhis ja veebibrauserid ignoreerivad seda täielikult. Telefonides ja arvutimonitorides määrab pildi teravuse täielikult pikslite mõõtmed (nt 1920x1080) ja ekraani tihedus, mitte manustatud DPI metaandmed.
Alfa-läbipaistvus: PNG vs. WebP
Traditsioonilisel JPG-l puudub igasugune läbipaistvuse tugi - läbipaistvad taustad muutuvad üleni valgeks või mustaks. PNG tõi esimesena turule puhta 8-bitise alfa-läbipaistvuse, kuid WebP pakub nüüd identset läbipaistvuskvaliteeti kuni 40% väiksemate failisuurustega.
0 baiti laaditakse üles välistesse serveritesse. Kogu töötlemine toimub lokaalselt sinu brauseri liivakastis.