Kuvamuodot: WebP, PNG, JPG ja SVG vertailussa
Väärän kuvamuodon valitseminen voi hidastaa sivujen latausaikoja tai sumentaa grafiikkasi. Näin nykyaikaiset verkkomuodot vertautuvat pakkauksen, läpinäkyvyyden ja terävyyden osalta.
Tiedostosi käsitellään kokonaan verkkoselaimessasi HTML5 Canvasin ja WebAssemblyn avulla. Yhtään dataa ei koskaan poistu laitteeltasi.
Ohita lataus- ja siirtojonot. Muunnokset tapahtuvat paikallisesti laitteiston täydellä teholla ilman palvelinrajoituksia.
Yhteensopiva virallisten ISO-, W3C- ja IETF-määritysten kanssa tuloksen yhteensopivuuden takaamiseksi eri käyttöjärjestelmissä.
Muotojen vertailu ja tekniset tiedot
| Tulostusmuoto | MIME-tyyppi | Määritys | Tyyppi |
|---|---|---|---|
| PNG kuva | image/png | W3C-PNG | Portable Network Graphics -rasterikuva |
| JPG JPEG-kuva | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group -kuvatiedosto |
| WebP kuva | image/webp | RFC-6386-VP8 | Googlen moderni WebP-kuvamuoto |
| SVG vektori | image/svg+xml | W3C-SVG | Skaalautuva vektorigrafiikka |
| HEIC valokuva | image/heic | ISO-IEC-23008-12-HEIF | Korkean pakkaussuhteen HEIC-kuvasäiliö |
| AVIF kuva | image/avif | AOMEDIA-AV1-AVIF | AV1-kuvatiedostomuoto |
| 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 | Truevisionin edistynyt rasterikuva |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Tekniset tiedot ja koodekkien erittely
Pikaopas muodon valintaan
Käytä WebP- tai AVIF-muotoa nykyaikaisilla verkkosivustoilla (30 % pienempiä kuin JPEG läpinäkyvyystuella). Käytä JPG-muotoa valokuville, joissa pienet huomaamattomat pakkausartefaktit eivät haittaa. Käytä PNG-muotoa kuvakaappauksiin, käyttöliittymägrafiikkaan ja kuvituksiin, jotka vaativat terävän pikselintarkan tekstin. Käytä SVG-muotoa logoille ja kuvakkeille, jotka vaativat äärettömän skaalautuvuuden.
Rasteri vs. vektori: Miksi SVG-kuvat eivät koskaan sumene
Rasterikuvat (JPG, PNG, WebP) ovat kiinteiden väripikselien ruudukoita - liian pitkälle zoomattaessa ne muuttuvat sumeiksi tai pikselöityneiksi. SVG on puhdasta matematiikkaa: se tallentaa matemaattisia viivoja, käyriä ja värejä, minkä ansiosta kuvakkeet ja kuvitukset piirtyvät veitsenterävinä kaikkialla mobiilinäytöistä 8K-näyttöihin pienillä tiedostokokoilla.
Myytti: "Korkeempi DPI tarkoittaa parempaa verkkokuvan laatua"
DPI (pisteet tuumalla) on puhtaasti fyysinen tulostusohje, jonka verkkoselaimet jättävät täysin huomiotta. Puhelimissa ja tietokoneen näytöissä kuvan terävyys määräytyy kokonaan pikselimittojen (esim. 1920x1080) ja näytön tiheyden mukaan, ei upotetun DPI-metatiedon.
Alfa-läpinäkyvyys: PNG vs. WebP
Perinteisellä JPG:llä ei ole lainkaan läpinäkyvyystukea - läpinäkyvät taustat muuttuvat täysin valkoisiksi tai mustiksi. PNG toi markkinoille puhtaan 8-bittisen alfa-läpinäkyvyyden, mutta WebP tarjoaa nykyään samanlaisen läpinäkyvyyden laadun jopa 40 % pienemmillä tiedostokokoilla.
0 tavua ladattu ulkoisille palvelimille. Kaikki käsittely tapahtui paikallisesti selaimen hiekkalaatikossa.