Paras kuvamuoto verkkosivuille: JPG, PNG, WebP vai AVIF?

JPG, PNG, WebP ja AVIF yhdellä silmäyksellä

Tekniset ominaisuudet ja yhteensopivuustiedot löytyvät MDN:n kuvamuoto-oppaasta. Selaintuki ei tarkoita, että jokainen latauspalvelu tai editori hyväksyy muodon.

Mitä häviöllinen ja häviötön pakkaus säilyttävät?

Häviöllinen tallennus muuttaa osaa pikselitiedoista pienentääkseen tiedostoa. Valokuvan tekstuuri voi kestää pienen muutoksen, mutta sama muutos kirjaimen ympärillä voi heikentää luettavuutta. Häviötön pakkaus säilyttää sille annetut pikselitiedot. Jo pakatun JPG:n muuttaminen PNG:ksi ei palauta JPG:stä menetettyjä yksityiskohtia, vaan tiedostosta voi vain tulla suurempi.

WebP tukee molempia tallennustapoja, kuten Googlen WebP-dokumentaatio selittää. Kuvamuodon nimi ei yksin kerro käytettyä tapaa, eikä laatuarvo 100 takaa häviötöntä tulosta. Säilytä paras lähdekuva ja tee jokainen julkaisuversio siitä, jotta häviölliset muunnokset eivät ketjuunnu. Eroa avaa tarkemmin häviöllisen ja häviöttömän pakkauksen opas.

Valokuvat: vertaa WebP:tä ja AVIF:iä nykyiseen JPG:hen

Alla verrataan vuoristokuvan todellisia Pixilo-tallennuksia. Lähtökuvan JPG on 413,1 kt. Pixilo tuotti 299,0 kt:n WebP:n laatuarvolla 80 ja 275,7 kt:n AVIF:n esiasetetulla laatuarvolla 65. Kaikkien mitat ovat 1920 × 1440 pikseliä. WebP pienenee tästä JPG:stä noin 28 % ja AVIF noin 33 %. AVIF on tässä esimerkissä noin 8 % WebP:tä pienempi.

Luvut ovat kokonaisten tiedostojen mittauksia yhdestä jo pakatusta JPG:stä. Laatuasteikot ovat kuvamuotokohtaisia, eikä tuloksia ole säädetty vastaamaan täsmälleen samaa näkyvää laatua. Käytä niitä tarkasteltavina esimerkkeinä yleisen paremmuusjärjestyksen sijaan. Etsi liukuvertailusta kallion tekstuurin pehmenemistä, vaaleita kehiä taivaanrajassa ja väriporrastumia tasaisessa taivaassa. Arvioi ensin koko kuva aiotussa näyttökoossa ja tarkista epäilyttävät kohdat yksityiskohtanäkymässä.

Toista koe sivustollesi tyypillisellä kuvalla: verkkokaupan kankaalla tai tiimisivun kasvoilla. Tee vaihtoehdot samasta lähteestä samoilla mitoilla: JPG-kuvalle sopivat JPG–WebP ja JPG–AVIF. Muille lähteille voit käyttää PNG–AVIF- tai WebP–AVIF-muunninta. Valitse pienin versio, jonka yksityiskohdat riittävät käyttötarkoitukseen. Myös alkuperäisen säilyttäminen on hyvä ratkaisu, jos se täyttää tarpeen. Suurella kuvamäärällä huomioi myös käsittelyaika.

Alkuperäinen JPGPixilon WebP

Grafiikka: suojaa reunat, teksti ja läpinäkyvyys

Teksti ja kaaviot paljastavat pakkausvirheet nopeasti: värillinen reunus kirjaimessa tai katkennut yhden pikselin viiva voi haitata enemmän kuin pieni muutos maisemassa. Alla verrataan 109,2 kt:n PNG:tä Pixilon JPG-, WebP- ja AVIF-tallennuksiin samoissa 960 × 640 pikselin mitoissa. AVIF on vain 6,4 kt, mutta säästöstä on hyötyä vain, jos pienimmät tekstit ja viivat säilyvät riittävän selkeinä.

Vaihda kuvamuotoa ja tarkastele samoja kirjaimia ja värillisiä reunoja yksityiskohtanäkymässä. Palaa sitten koko kuvaan arvioimaan tavallista lukukokoa. Esimerkit ovat häviöllisiä muunnoksia, eivät häviöttömän WebP:n tai AVIF:n testejä. Jos kuvakaappaus näyttää hinnan, virheilmoituksen tai ohjelman asetuksen, aseta tekstin luettavuus ja täsmällisyys tiedostokoon edelle. Säilytä PNG, jos muut versiot eivät täytä tätä vaatimusta.

Läpinäkyvyys on erillinen vaatimus terävyydestä: PNG, WebP ja AVIF tukevat sitä, JPG ei. Kokeile läpinäkyvälle tuotekuvalle PNG–WebP-muunnosta ja tarkista ääriviiva sekä varjo vaalealla ja tummalla taustalla. Valitse JPG-tallennukseen tarkoituksellinen tasainen taustaväri. Alla oleva peittävä grafiikka ei testaa läpinäkyviä reunoja.

Jos logo on jo SVG-muodossa, säilytä alkuperäinen vektorikuva: sitä voi suurentaa ilman pikselöitymistä. Sen muuttaminen pikselikuvaksi vain pakkaamista varten voi menettää tämän edun. Pixilon työkalujen tukemat kuvamuodot on kerrottu kunkin työkalun yhteydessä. Lue SVG- ja PNG-opas, kun haluat tietää, milloin vektorimuoto kannattaa säilyttää ja milloin PNG-kopio on tarpeen.

Alkuperäinen PNGPixilon JPG

Valitse mitat ennen pienimmän tiedoston tavoittelua

Suunnittele kuvan todellisen näyttötilan mukaan. Esimerkiksi 600 CSS-pikselin levyiselle kuvalle voi kokeilla 1200 pikselin versiota tiheäpikselistä näyttöä varten. Tämä on testattava esimerkki, ei yleispätevä sääntö. Pienen alkuperäisen suurentaminen ei palauta puuttuvia yksityiskohtia.

Leveyden ja korkeuden kaksinkertaistaminen nelinkertaistaa pikselimäärän. Tiedostokoko ei välttämättä nelinkertaistu, mutta tallennettavaa kuvatietoa on enemmän. Valitse ensin rajaus ja tarvitsemasi mitat. Vertaa sitten kuvamuotoja samoilla mitoilla, jotta erotat koon pienentämisen hyödyn kuvamuodon vaihdosta.

Sivusto voi tarjota eri kokoja eri asetteluille esimerkiksi srcset- ja sizes-asetuksilla. Valmistele versiot koonmuutostyökalulla ja lue latautumisesta responsiivisten kuvien oppaasta. Älä aseta samaa tiedostokokorajaa jokaiselle kuvalle: pieni korttikuva ja tarkasti suurennettava tuotekuva palvelevat eri tarpeita.

Tarkista tiedoston lisäksi latautuminen

Varaa kuvalle tila, jotta sisältö ei hypähdä latauksen aikana. Viivästetty lataus sopii alempana oleville kuville, mutta pääkuvan viivyttäminen hidastaa sen näkymistä. Googlen LCP-ohje suosittelee tärkeän kuvan lataamisen aloittamista ajoissa ja viivästetyn latauksen välttämistä LCP-kuvalla.

Määritä tarvittava varakuvamuoto sivun koodissa tai julkaisujärjestelmässä. picture-elementissä selain valitsee ensimmäisen lähteen, joka vastaa sen kuvamuototukea ja muita ehtoja. Se ei vertaile kaikkia tiedostoja valitakseen pienimmän. Aseta ensisijaiseksi haluamasi testattu muoto ja säilytä sopiva JPG- tai PNG-varaversio. Valintaa selittää web.devin picture-opas.

Tarkista kuva, jonka julkaistu sivu todella toimittaa. Julkaisujärjestelmä tai kuvien jakelupalvelu voi muuttaa ladatun kuvan mittoja tai pakata sen uudelleen, jolloin kävijä saa eri tiedoston kuin Pixilosta lataamasi. Pixilo valmistelee tiedostot; sivustosi päättää niiden lataamisesta. Pelkkä pienempi tiedosto ei korjaa myöhään alkavaa kuvan latausta tai hidasta palvelinvastausta.

Tarkistuslista ennen julkaisua

• Kohde hyväksyy kuvamuodon ja tiedostopääte on oikea.
• Mitat sopivat asetteluun.
• Teksti, kasvot ja läpinäkyvät reunat näyttävät hyviltä.
• Tiedosto pieneni tai muunnos ratkaisi oikean yhteensopivuustarpeen.
• Sivu toimii kapealla näytöllä ja tärkeä kuva latautuu ajoissa.
• Alkuperäinen on tallessa tulevaa muokkausta varten.