JPG, PNG eða WebP: Hvaða myndsnið ættir þú að nota?

Í hvert sinn sem þú flytur út ljósmynd, skjámynd eða grafík tekur þú í raun þrjár ákvarðanir í einu: hve miklum smáatriðum á að halda, hve stór skráin verður og hvort hún virkar alls staðar þar sem hún þarf að birtast. JPG, PNG og WebP svara þessu á ólíkan hátt. Rangt val er ein algengasta og auðveldasta skýringin á hægri vefsíðu, tölvupósti sem kemst ekki í gegn eða lógói sem missir skarpar brúnir. Hér sérðu hvað hvert snið gerir, hvenær það hentar og hvernig þú umbreytir án upphleðslu.

Inngangur

Flestir hugsa ekki um myndsnið fyrr en eitthvað fer úrskeiðis: síða hleðst of hægt, hvítt svæði birtist skyndilega í kringum lógó eða viðhengi sendist ekki. Í nær öllum tilvikum er orsökin misræmi milli innihalds myndarinnar og sniðsins sem hún var vistuð í. Ljósmynd sem er vistuð sem PNG er oft margfalt stærri en hún þarf að vera. Lógó sem er vistað sem JPG getur fengið heilan bakgrunn þar sem áður var gegnsæi. Vandinn er ekki slæmur hugbúnaður heldur rangt verkfæri fyrir efnið.

Greinin fer yfir JPG, PNG og WebP hvert fyrir sig, ber þau saman hlið við hlið og gefur stillingar sem þú getur notað strax í stað óhlutbundinna tæknilegra atriða. Hún nær einnig yfir mistök sem blása upp skráarstærð eða skaða gæði og einfaldar venjur sem koma í veg fyrir hvort tveggja.

Allt hér virkar með umbreytum Resizo sem keyra í vafranum. JPG í WebP umbreytir Resizo og PNG-þjappan keyra alfarið í tækinu þínu með Canvas API, svo þú þarft aldrei að hlaða frumritinu upp til að skipta um snið eða minnka skrá.

Hvað eru JPG, PNG og WebP og hvaða snið hentar?

JPG, einnig kallað JPEG, notar tapaða þjöppun. Það sleppir sértækt lit- og smáatriðaupplýsingum sem mannsaugað tekur síður eftir. Þess vegna getur JPG með 80-95% gæði litið næstum eins út og frumritið en tekið aðeins brot af plássinu. Þetta gerir JPG frábært fyrir ljósmyndir, þar sem mjúkir litabreytingar og náttúrulegur myndsuð fela þjöppunarmerki vel. Sniðið hentar síður efni með hörðum brúnum: texti, línuteikningar og flatir litir fá sýnilega kubba og óskýrar brúnir þegar þjöppunin verður mikil.

PNG fer öfuga leið með taplausri þjöppun sem varðveitir hvern myndpunkt nákvæmlega. Engum upplýsingum er hent, sem gerir PNG að staðalsniði fyrir lógó, skjámyndir, viðmótsgrafík og allt sem þarf gegnsæjan bakgrunn með alfa-rás. Gallinn er stærri skrár: PNG af flókinni ljósmynd er yfirleitt mun stærra en sama mynd í JPG eða WebP, því taplaus þjöppun getur ekki notað sömu styttingar og töpuð þjöppun.

WebP, sem Google þróaði, styður bæði aðferðirnar í einu sniði: tapaða þjöppun sem yfirleitt slær JPG við sambærileg gæði og taplausa þjöppun sem keppir við PNG en gefur oft minni skrá. Það styður líka gegnsæi og hreyfingu, sem áður kallaði á skipti milli PNG og GIF. Stuðningur í Chrome, Firefox, Safari og Edge er nú nánast alls staðar til staðar og því er WebP sjálfgefið val fyrir vefmyndir fremur en sérhæfður valkostur.

Af hverju skiptir þetta máli?

Ákvarðanir um skráarsnið safnast upp. Ein of stór mynd á fjölsóttri vefsíðu hægir á fyrstu birtingu hjá öllum gestum, og síða full af PNG-myndum þar sem WebP hefði dugað getur bætt við raunverulegri og mælanlegri töf. Á hinn bóginn getur bunki af óþjöppuðum myndviðhengjum farið hljóðlega yfir stærðarmörk póstþjónustu, svo sendingin skilar sér ekki eða viðhengin eru fjarlægð án viðvörunar.

Rangt val í hina áttina kostar líka. Að breyta textaríkri skjámynd eða lógói í flötum lit í JPG veldur næstum alltaf sjáanlegum merkjum við brúnirnar, svo sem loðnum geislum í kringum stafi og röndum í samfelldum bakgrunni, því þjöppunarlíkan JPG var ekki hannað fyrir slíkt efni. Að velja PNG fyrir hverja ljósmynd „til öryggis“ forðar því en býr til óþarflega stórar skrár án sjónræns ávinnings.

Leitarvélar og vafrar umbuna sífellt frekar réttu vali. Leiðbeiningar Google um myndbirtingu tengja hraðhleðandi, vel fínstilltar myndir bæði við notendaupplifun og sýnileika. Core Web Vitals verða beint fyrir áhrifum af því hve mikið myndgögn síða þarf að flytja áður en hún verður nothæf. Rétt snið er því einn ódýrasti ávinningurinn fyrir afköst og SEO.

Helstu kostir

• Minni skrár án sýnilegs gæðataps þegar sniðið passar við efnið.
• Hraðari síðuhleðsla og betri Core Web Vitals, þar sem myndir eru oft þyngsti hluti síðunnar.
• Rétt gegnsæi þar sem þess þarf, í stað þess að hvítur eða svartur bakgrunnur birtist óvart fyrir aftan lógó.
• Færri óvænt atriði tengd sniði, eins og óskýrar PNG-táknmyndir eða tenntar JPG-skjámyndir eftir útflutning.
• Einn umbreytir sem virkar í báðar áttir, svo þú festist ekki í því sniði sem myndavél eða skjámyndatól valdi.

Grunnávinningurinn er stjórn. Þegar þú veist hvað hvert snið gerir vel verður valið ekki lengur ágiskun heldur tveggja sekúndna ákvörðun sem þú getur tekið rétt í hvert sinn, áður en skráin fer á vefsíðu, í pósthólf eða til viðskiptavinar.

Leiðbeiningar skref fyrir skref

1. Greindu hvað myndin er. Er hún ljósmynd, grafík með texta eða lógói, eða þarf hún gegnsæjan bakgrunn?
2. Athugaðu hvert myndin fer. Er það vefsíða, tölvupóstur, samfélagsmiðill eða prentun? Skráðu öll mörk um skráarstærð og málsetningu.
3. Opnaðu JPG í WebP umbreyti Resizo og bættu skránni við. Hann keyrir eingöngu í vafranum, svo frumskráin fer aldrei af tækinu.
4. Veldu markmiðssnið. Veldu WebP fyrir flestar vefmyndir, PNG þegar gegnsæi eða skarpur texti og línur skipta máli, eða JPG fyrir víðtækasta samhæfni.
5. Stilltu gæðin og berðu saman forskoðun. Athugaðu lifandi forskoðun við hlið frumritsins áður en þú flytur út, einkum í andlitum, texta og fínlegum brúnum.
6. Sæktu umbreyttu skrána og athugaðu hana. Skoðaðu bæði nýju skráarstærðina og sjónræn gæði við 100 prósent aðdrátt.
7. Geymdu frumritið þar til umbreytta skráin er staðfest. Staðfestu að hún virki alls staðar sem þarf áður en þú eyðir nokkru.

Ráðlagðar stillingar

Þetta eru upphafspunktar, ekki fastar reglur. Andlitsmynd, gegnsætt vöruúrklipp og textaþung skjámynd haga sér ólíkt við þjöppun, svo prófaðu nokkrar dæmigerðar skrár áður en þú beitir sömu stillingu á heila möppu.

Góð vinnubrögð

• Byrjaðu á besta frumriti sem þú átt; að stækka eða umbreyta lélegu afriti gerir aðeins fyrirliggjandi galla sýnilegri.
• Veldu snið eftir innihaldi, ekki vana. Ljósmynd á ekki sjálfkrafa heima í PNG bara vegna þess að taplaust hljómar betur.
• Flyttu út einu sinni. Endurtekin opnun og vistun sama JPG eða tapaða WebP eykur þjöppunarskemmdir í hverri umferð.
• Hafðu lítið prófunarsafn, til dæmis andlitsmynd, vörumynd, skjámynd og gegnsæja grafík, svo þú getir sannreynt stillingar áður en þú vinnur stóran bunka.

Ein venja skilar meira en nokkur stilling: umbreyttu beint frá besta frumriti sem þú átt, í einni umferð, yfir í sniðið sem áfangastaðurinn þarf í raun.

Algeng mistök

• Að nota PNG fyrir hverja ljósmynd af vana, sem býr til óþarflega stórar skrár án sýnilegs gæðavinnings fram yfir JPG eða WebP.
• Að vista JPG aftur og aftur í gegnum mörg klippiferli, sem safnar þjöppunargöllum í hvert sinn sem skráin er endurkóðuð.
• Að ætla að WebP sé ekki mikið stutt; það hefur verið stutt í öllum helstu núverandi vöfrum í mörg ár.
• Að fletja gegnsætt PNG út í JPG og fá óvænt hvítan eða svartan bakgrunn þar sem gegnsæi var áður.
• Að hunsa EXIF-stefnugögn við umbreytingu, sem getur skilið umbreytta ljósmynd eftir snúna á rangan hátt.

Flest þessara mistaka eiga sér sömu rót: snið er meðhöndlað sem aukaatriði í stað fyrstu ákvörðunar. Þegar sniðið er valið af ásetningi hættir flest á listanum að gerast.

Frekari ráð

• Settu WebP fram með JPG- eða PNG-varasniði í HTML-<picture> einingunni fyrir fáa eldri notendur sem þurfa það.
• Fyrir hreint vigurefni, svo sem einföld tákn, orðmerki og línulógó, skaltu íhuga SVG í stað raster-sniðs; það skalar fullkomlega og er oft minna en sambærilegt PNG.
• Þegar þú umbreytir heilli möppu af eldri ljósmyndum skaltu umbreyta þeim í bunka yfir í WebP í einni umferð í stað þess að opna og vista hverja skrá aftur.

Þessi ráð skipta mestu þegar magnið er mikið. Eitt rangt sniðval sést varla, en sömu mistök endurtekin í hundruðum vörumynda eða bloggsmynda safnast upp í raunverulegan hleðslutíma og geymslukostnað.

Dæmi og notkunartilvik

Hagnýtt ferli með JPG í WebP umbreytinum

Opnaðu JPG í WebP umbreytinn, bættu við einni dæmigerðri mynd og umbreyttu henni með skynsamlegri gæðastillingu áður en þú snertir restina af bunkanum. Ef niðurstaðan heldur sér bæði í venjulegri birtingarstærð og við 100 prósent aðdrátt geturðu beitt sömu stillingu á hinar skrárnar. Fyrir efni sem þarf gegnsæjan bakgrunn, til dæmis lógó, tákn eða viðmótsgrafík, skaltu nota PNG-þjöppuna, sem minnkar PNG-skrár taplaust án þess að snerta alfa-rásina.

Þar sem bæði verkfærin keyra staðbundið í vafranum er engin upphleðsla, enginn reikningur og engin biðröð. Þú umbreytir skránni um leið og þú dregur hana inn og frumritið helst þar sem það var.

Áreiðanlegar ytri heimildir

Algengar spurningar

Niðurstaða

JPG, PNG og WebP eru ekki keppinautar þar sem eitt snið vinnur alltaf. Þetta eru þrjú verkfæri fyrir ólík verkefni. JPG meðhöndlar ljósmyndir vel, PNG verndar skarpar brúnir og gegnsæi, og WebP leysir nú flest verkefni beggja eldri sniðanna betur á eigin spýtur. Þess vegna er það orðið skynsamlegt sjálfgefið val á vefnum. Rétt val snýst síður um að leggja tæknilýsingar á minnið en að spyrja fyrir hvern útflutning: hverju þarf þessi mynd að halda?

Þegar sú venja er komin á er umbreyting milli sniða einföld. Umbreytar Resizo sjá um tæknilega hlutann í vafranum, ókeypis og án upphleðslu, svo eina ákvörðunin sem eftir stendur er sú sem skiptir raunverulega máli.