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.
Tiedostot käsitellään paikallisesti selaimessasi WebAssembly- ja HTML5-rajapintojen avulla. Ne eivät poistu laitteeltasi, joten niitä ei ladata palvelimille eikä tallenneta kolmansien osapuolten palveluihin.
Aloita muuntaminen välittömästi omalla laitteellasi - ei latausodotusta, ei latausjonoja eikä etäpalvelimen asettamia hidastuksia.
Käytä kaikkia työkaluja ilman tilin luomista, maksullista tilausta tai keinotekoisia tiedostokokorajoituksia. Muunna tiedostoja niin usein kuin selaimesi ja laitteesi sallivat.
Muotojen vertailu ja tekniset tiedot
| Tulostusmuoto | MIME-tyyppi | Määritys | Tyyppi |
|---|---|---|---|
| PNG Asiakirjan PNG-kuva | image/png | W3C-PNG | Korkearesoluutioinen skannattu PNG-kuva |
| JPG Asiakirjan JPG-kuva | image/jpeg | ITU-T-T81-JPEG | Skannattu asiakirjan JPEG-kuva |
| WebP Animoitu | image/webp | RFC-6386-VP8 | Tehokas animaatio |
| SVG vektori | image/svg+xml | W3C-SVG | Skaalautuva vektorigrafiikka |
| HEIC valokuva | image/heic | ISO-IEC-23008-12-HEIF | HEIC-kuvasäiliö, joka on tehokas tallennustilan käytössä |
| 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 |
| PDF tiedosto | application/pdf | ISO-32000-2 | Siirrettävä asiakirjamuoto |
Tekniset tiedot ja koodekkien erittely
Pikaopas muodon valintaan
WebP ja AVIF voivat pienentää monien verkkokuvien tiedostokokoa, ja molemmat tukevat läpinäkyvyyttä. Tulos riippuu kuitenkin kuvasta ja koodausasetuksista. Käytä JPG:tä valokuville, joissa pienet pakkausvirheet ovat hyväksyttäviä, PNG:tä teräville kuvakaappauksille ja grafiikalle sekä SVG:tä skaalautuville logoille ja kuvakkeille.
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: "Korkeampi 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
JPEG ei tue läpinäkyvyyttä, joten läpinäkyvät pikselit tallentuvat JPEG-kuvaan yksivärisen taustan kanssa. PNG säilyttää alfakanavan läpinäkyvyyden, ja myös WebP voi tallentaa läpinäkyvyyttä sekä tuottaa pienemmän tiedoston. Vertaa kuvia, sillä tiedostokoko riippuu sisällöstä ja koodausasetuksista.
Ulkoisille palvelimille ei ole ladattu yhtään tavua. Kaikki käsittely tapahtui paikallisesti selaimen hiekkalaatikossa.