Hvað er besta myndsniðið fyrir vefsíður.
Við berum saman PNG, JPG, GIF og WebP
Að fínstilla myndir hefst á því að velja hvaða myndsnið hentar best þínum þörfum. Það er mikið meira heldur en bara PNG á móti JPG. Það er ekkert eitt format sem stjórnar öllu.
Þarfir hvers og eins varðandi myndefni er mjög mismunandi. Það getur jafnvel verið fleiri en eitt myndsnið sem hentar fyrir hverja vefsíðu fyrir sig.
Í þessum pósti ætla ég aðeins að fara yfir það hvernig er best að velja það myndsnið sem hentar best hverju sinni. Við rennum aðeins yfir þessi gömlu uppáhalds myndsnið, JPEG, PNG og Gif og svo eitthvað af næstu kynslóðar myndsniðum eins og WebP og SVG. Við förum yfir styrkleika, veikleika og hvernig er best að nota þau og stilla á sem bestan hátt.
Stærð hefur áhrif á hraða og hraði skiptir máli.
Afhverju skiptir máli að velja rétt snið mynda? Vegna þess að fleiri og fleiri gesta heimsækja vefsíður í gegnum farsíma. Það er ekki nóg með það að oft er net í símum hægvirkara, heldur er það líka þannig að það eru ekki allir með ótakmarkað niðurhal.
Google er líka farið að refsa þeim vefsíðum sem hlaðast of hægt, með því að setja þær neðar í leitarniðurstöður. Þá er betri hraði vefsíðu líka auðveld leið til að auka umferð, ásamt því að auka sölu og viðskipti.
Þegar þú velur rangt myndsnið, gætir þú óvart verið að birta stærri mynd en nauðsynlegt er. Viðbótarmöguleikar myndskráa (svo sem gagnsæi), óþarfa smáatriði og of margir litir auka stærð myndanna. Stundum er þetta nauðsynlegt en stundum ekki. Ef myndin þín inniheldur ekki gegnsæi, þá ertu ekki að tapa neinu með því að nota myndsnið sem styður ekki gegnsæi.
Lykillinn er að nota bara það sem þú þarft.
Að velja ákjósanlega skráarstærð.
Þú þarft líka að huga að myndinni í tengslum við annað efni á vefsíðunni, til að velja ákjósanlega skráarstærð. Meðal stærð vefsíðu er um 2mb svo þú vilt halda þig undir þeim mörkum til að hafa tiltölulega hraðvirka síðu. Þetta þýðir að þú þarft að skoða heildarstærð allra byggingareininga á síðunni, en ekki bara myndanna.
Stór og ítarleg toppmynd sem er um 1mb, er ekki stórmál ef hún er eina myndin á síðunni og annað efni er að mestu leyti texti. Hins vegar ef þú ætlar að birta 10 stórar myndir á síðu og hver um sig er 1mb, þá verður þungt að hlaða þá síðu. Þú getur farið málamiðlunarleið með því að sýna færri myndir eða sýna þær allar í minni stærð.
Hvernig á að þjappa myndir: Lossy á móti Lossless
Til þess að velja ákjósanlegt myndsnið, þarftu að skilja muninn á Lossy og Lossless þjöppun. Best væri ef myndin þín notaði bæði þessi þjöppunaralgrím til þess að framleiða sem minnstu skráarstærð. En það eru ekki öll snið sem styðja bæði.
Með Lossy þjöppun eru sum gögn sem tapast að eilífu. Lossy þjöppun fjarlægir myndgögn varanlega og rýrir myndina í því ferli.
Þetta er ekki eins slæmt og það hljómar, því sumar þessara viðbótarupplýsinga eru ekki einu sinni sjáanlegar með beru auga.
Lossless myndþjöppun hins vegar, varðveitir gögn svo ekkert glatist. Lossless þjöppunaralgrím geymir öll nauðsynleg gögn til að endurskapa myndina nákvæmlega.
Best væri ef myndir færu fyrst í gegnum Lossy þjöppunarfasa og síðan í Lossless þjöppunarfasa þar sem það sem eftir er verður fínstillt.
JPEG
JPEG stendur fyrir Joint Photographic Experts Group og var hannað til að nota fyrir myndir. Sem staðlað myndsnið fyrir flestar stafrænar myndavélar og farsíma, finnurðu það nánast alls staðar.
JPEG myndir hafa nokkra kosti:
- JPEG-myndir geta innihaldið milljónir lita, þannig að þær sýna litríkar og líflegar myndir
- Þær geta verið tiltölulega smáar í skráarstærð
- Þær eru studdar af öllum nútíma vöfrum
Það er engin furða að JPEG skuli vera svona vinsælt myndsnið fyrir vefinn.
Þar sem JPEG var hannað fyrir kyrrmyndir, styður það myndsnið ekki gegnsæi eða hreyfimyndir.
JPEG þjöppun
JPEG- myndir nota Lossy þjöppun til að halda smærri skráarstærð.
JPEG þjöppun er ekki «allt eða ekkert» stilling. Þú getur stillt þjöppunarhlutfallið frá 0% (hámarks þjöppun) niður í 100% (engin þjöppun) til að skapa hið fullkomna jafnvægi fyrir þínar aðstæður.
Almennt mun 75-100% þjöppun viðhalda góðum gæðum myndarinnar en samt er 75% þjöppun aðeins helmingurinn af fullri stærð. Þetta er ástæðan fyrir því að flestir samfélagsmiðlar þjappa myndum sínum á bilinu 70-85%. Sem dæmi þjappar Facebook myndunum 85%.
Svo þegar þú ert að vinna myndirnar þínar í Adobe Photoshop eða Lightroom, ekki hræðast það að færa sleðann til.
Sem dæmi getum við tekið þessar tvær myndir. Önnur hefur ekki verið þjöppuð og er 229k á meðan hin hefur verið þjöppuð í 75% og er 95k
Getur þú séð hvor er hvað?
Það er til Lossless JPEG snið sem kallst JPEG-2000, en það er ekki almennt notað.
Þú ættir líka alltaf að forðast að þjappa aftur þjappaðri mynd. Hefur þú einhvern tíma búið til afrit af ljósriti eða hlaðið niður og hlaðið upp mynd á samfélagsmilunum? Gæðin brenglast vegna þess að þú ert að fara í gegnum aðra umferð af þjöppun.
(ATH mynd nr 1 var sú þjappaða)
JPG á móti PNG
JPEG myndir eru ekki góður kostur fyrir myndir með mikilli skerpu. Þetta er ástæðan fyrir því að JPEG skjáskot með svörtum texta á hvítum bakgrunni eiga það til að vera óskýr.
JPEG er tilvalið myndsnið fyrir ljósmyndir, sérstaklega þær sem eru án texta, þegar smærri myndskrá gengur fyrir myndgæðum.
T.d. stórar toppmyndir, undirstrika faglega ljósmyndun.
JPEG myndir eru töluvert minni en PNG. Myndin okkar hér af landslaginu sem PNG er 329k, sem er næstum 3.5x stærra en þjappaða útgáfan.
PNG
Við skulum kíkja aðeins á annað uppáhalds myndsnið vefsins, PNG. PNG var hannað til að koma í stað GIF mynda vegna leyfisvandamála, svo þess vegna er virknin svipuð.
Styrkur PNG er Lossless þjöppunaralgrím. Þú tapar ekki neinum gögnum meðan á þjöppunarferlinu stendur, svo hægt er að endurskapa myndina án þess að tapa gæðum. Fyrir vikið varðveitast PNG smáatriðin í myndum, jafnvel þegar kemur að texta. Gallinn er að PNG skráarstærðir hafa tilhneigingu til að vera stærri miðað við önnur myndsnið, vegna allra þessara gagna.
Annar kostur er stuðningur við gagnsæi. Ekki aðeins er hægt að búa til fyrirtækjamerki með gegnsæjum bakgrunni, heldur getur þú líka búið til flókin gegnsæissnið (gradient) og fleira með PNG.
Þrjár tegundir PNG
Það eru þrjár tegundir af PNG. PNG-8, PNG-24 og hið dularfulla PNG-32.
Tæknilega séð eru líka PNG-hreyfimyndir, en við munum ekki fara inn á það, þar sem það er ekki almennt stutt ennþá.
PNG-8 er eins og GIF útgáfa af PNG. PNG-8 styður 256 indexed liti en í mun minni skráarstærð, jafnvel minni skráarstærð heldur en sambærileg JPEG mynd. Ólíkt GIF-myndum hefur PNG-8 lélegan hreyfimyndastuðning. PNG-8 er tilvalið fyrir einfalda vefgrafík, með gagnsæjum bakgrunni, eins og fyrirtækjamerki (logo) og veftákn.
Á meðan PNG-8 styður 8 bita liti styður PNG-24 24 bita liti, sem þýðir stuðning fyrir 16 milljón liti. Já PNG-24 er meira eins og JPEG en í verulega stærri skráarstærð. En myndgæði PNG-24 eru frábær, jafnvel þegar aðdráttur er mikill, sem gerir það tilvalið fyrir myndir í netverslun, sem og skjámyndir eða myndir með texta.
Ef þú býrð til PNG í Photoshop Save for Web valmyndinni, muntu ekki sjá PNG-32 sem valkost, en verður samt bætt við ef þú velur stuðning við gagnsæi. Afhverju ætli það sé?
PNG-32 styðja 24 biti liti með auka 8 bita alfa rás fyrir flókin gegnsæissnið. PNG-32 var hannað til að hafa getu til að búa til flóknar myndir með gegnsæissniði.
Þessi þróaði hæfileiki þýðir að PNG-32 býr til mikið stærri skráarstærðir. Ef þú ert ekki að búa til mynd sem þarf flókið gagnsæi, skaltu halda þig við PNG-24. Ef þú ert að búa til myndayfirlag sem dofnar og verður að engu, þá er það verkefni fyrir PNG-32.
WebP
Væri það ekki frábært ef þú gætir sameinað það besta frá PNG annars vegar og JPEG hinsvegar? Google hugsaði það sama og bjó til open source WebP myndsniðið.
WebP gæti verið eitt best geymda leyndarmálið þegar kemur að því að fínstilla myndir. Risastórar síður eins og YouTube og eBay hafa þegar byrjað að nota það að hluta til, til að bæta frammistöðu vefsíðnanna.
Það eru tvær tegundir af WebP myndum. Önnur tegundin er einfaldlega þekkt sem WebP og notar Lossy þjöppun. Þú getur hugsað þetta sem JPEG útgáfuna af WebP sniðinu. Þegar þú býrð til Lossy WebP í forriti eins og Photoshop, færðu að velja þjöppunarhlutfallið.
Hin útgáfan er þekkt sem WebP Lossless og er meira eins og PNG. Þú færð stærri skráarstærð, en þú tapar ekki smáatriðum.
Báðar tegundir WebP myndsniðanna, búa til myndir sem eru mun minni en JPEG og PNG hliðstæður þeirra. En hversu mikið nákvæmlega?
Samkvæmt gögum frá Google, eru WebP myndir að meðaltali 25-34% minni en sambærilega JPEG og 26% minni en sambærileg PNG.
Það er gríðarlegt! Svo afhverju höfum við ekki öll nú þegar skipt yfir í WebP myndir?
Jæja, hér koma þá slæmu fréttirnar. Jafnvel þó að WebP hafi stigið inn á sjónarsviðið árið 2010, var það ekki stutt af Firefox og Safari. Safari gerir það ekki enn, þó að þar sem Firefox hefur nú klifið um borð, sé það bara tímaspursmál. Svo í augnablikinu er WebP ekki að fullu studd vafralausn.
Þú getur komist í kringum þessa takmörkun með því að sýna PNG eða JPEG gildi fyrir þá gesti sem nota vafra án stuðnings við WebP.
Hvað varðar að búa til þessar flottu WebP skrár fyrir WordPress, er hægt að nota viðbót til að gera það fyrir þig. Við notum viðbót sem heitir Smush Pro og með CDN stuðningi breytir sú viðbót myndunum yfir í WebP. Ef einhver heimsækir síðuna þína í vafra sem styður WebP, umbreytir Smush myndunum þínum og birtir WebP myndir. Ef þeir eru í vafra sem styður ekki WebP fá þeir venjulega JPEG eða PNG.
Saga af tveimur tegundum grafíkmynda
Það eru tvær tegundir af grafíkmyndum. Annars vegar vektor og hins vegar raster.
Vektormyndir eru stærðfræðilega búnar til úr röð punkta sem eru tengdir með línum til að mynda rúmfræðileg form. Með vektorgrafík er hægt að breyta stærð myndar í hvaða lögun sem er, stóra eða smáa, án þess að skaða gæði myndarinnar.
Raster grafík aftur á móti, samanstendur af pixlum sem raðað er á rist, þar sem hver pixel táknar lit. Raster grafík virðist aðeins hágæða, í þeirri upplausn sem henni er ætlað að sýna. Ef myndin er stækkuð, mun hún verða það sem við köllum «pixluð»
SVG
Við skulum koma einu alveg á hreint. SVG er ekki raunverulegt myndasnið. SVG er merkismál (markup) sem gerir þér kleift að búa til tvívíddar grafík. SVG er líkara HTML en PNG eða JPEG.
SVG er tæknilega byggt á XML og er hægt að vinna með það og búa til hreyfimyndir með Javascript og CSS. Sjáðu bara þessa frábæru toppmynd
https://bumpsetcreative.com/10-reasons-the-image-format-svg-is-rocking-the-internet/
SVG er líka einstakt vegna þess að ólíkt myndsniðunum sem við höfum fjallað um hingað til, býr það til vektormyndir. Þetta þýðir að myndirnar eru óendanlega skalanlegar og líta vel út í öllum upplausnum. Sem gerir það frábært til að laga sig að mismunandi tækjum.
Þú kemur ekki til með að upplifa þessa «pixlun» sem á sér stað í öðrum myndsniðum. Hins vegar, þar sem SVG var hannað til að sýna einfaldar myndir, byggðar á rúmfræðilegum formum, svo sem fyrirtækjamerki, fána, töflur og tákn, virkar það ekki vel fyrir ljósmyndir.
Þú getur búið til SVG í vektorforriti eins og Adobe Illustrator, Inkscape, Vectr, SVG-edit eða Sketch. Ef þú býrð til einfaldar myndir verður skráarstærðin mun minni en PNG, JPEG eða WebP mynd, jafnvel stórar myndir í hárri upplausn. Flóknar SVG skrár munu þó ekki fylgja þessum kosti.
Jafnvel þó það sé merkismál (markup language), skráir Google SVG svo það birtist í myndaleit. Og það er samhæft öllum vöfrum.
Að nota SVG eða ekki nota SVG?
Ef ég hef náð að selja þér þá hugmynd að nota SVG og þú hefur reynt að hlaða SVG mynd upp á WordPress gagnasvæðið þitt, þá gætirðu hafa tekið eftir því að WordPress leyfir ekki SVG af öryggisástæðum.
WordPress er ekki einstakt varðandi það. Samfélagsmiðlar eins og Medium, Tumblr og Facebook leyfa ekki heldur SVG.
Þú getur reynt að komast í kringum þetta og breytt function skránni til að leyfa SVG, en við mælum ekki með því. Þar sem SVG er merkismál (markup language), er það opið fyrir innsetningu spilliforrita (malware). Ef þú ert síðustjórnandi og þú virkjar SVG án þess að aðrir umsjónarmenn síðunnar viti af því, gætu þeir hlaðið upp sýktum SVG skrám án þess að gera sér grein fyrir því.
Ef þú ákveður að setja upp viðbót til að leyfa SVG, ættir þú aðeins að hlaða upp SVG frá aðilum sem þú treystir og leyfa aðeins aðilum sem skilja hvernig á að hlaða upp SVG á öruggan hátt.
GIF
Ég geymdi alræmdustu skráartegundina þar til síðast. Þó þetta myndsnið sé frábært fyrir fyndnar hreyfimyndir og kaldhæðnislega brandara, þá eru GIF-myndir ekki góðar í neitt annað þessa dagana.
Og svona til að koma þér aðeins á óvart, þá eru þessar GIF hreyfimyndir sem þú sérð til dæmis á Twitter, ekki einu sinni lengur GIF-myndir. Þetta eru WebM skrár.
Sannleikurinn er nefnilega sá að GIF var aldrei hannað með það fyrir augum að vera hreyfimyndir. GIF býr til einstaklega stórar skráarstærðir. Því fleiri rammar, því verra verður það. Ef þú skiptir yfir í WebM skrá, ertu kominn með skrá sem er 9 sinnum minni og í mun meiri gæðum. MP4 er svo annar raunhæfur valkostur sem er samhæfður öllum vöfrum.
GIF-myndir hafa takmarkað litaval sem er bundið við 256 liti, auk þess að nota Lossless þjöppun. Það gera PNG-8 myndsnið líka, í mun minni skráarstærð auk þess að hafa gagnsæi.
Svo kannski er eina vitið að nota GIF, þegar þú ert að reyna að birta eitthvað sem er samhæft eldri vöfrum sem styðja ekki HTML5. Einnig er hægt að nota GIF ef ætlunin er að láta grafík líta illa út af ásetningi eða fyrir nostalgíuáhrif.
Besta skráarstærðin er sú minnsta mögulega
Það er sagt að mynd geti sagt meira en 1000 orð. Þó það sé frábært að nota myndir á síðuna þína til að koma sjónarmiðum þínum á framfæri, þá eru þessi 1000 orð ekki ódýr. Þær þurfa sína stærðarúthlutun til að sjást og líta vel út. Besta aðferðin er að velja myndsnið sem gefur þér það sem þú þarft og ekkert meira en það.
WordPress reynir að hjálpa til við aðlögun mynda, með því að þjappa þær sjálfkrafa, en það hjálpar ekki mikið. Aftur á móti eru til mjög góðar lausnir sem geta hjálpað til við þjöppunina og má þar á meðal nefna SMUSH sem er frí viðbót og SMUSH Pro sem vinnur hlutina enn betur, en kostar.
Það sem SMUSH Pro hefur til dæmis fram yfir fríu útgáfu SMUSH, er að það býr til WebP myndir út frá myndasafninu þínu, með því að smella á einn hnapp.
Það er líka hægt að virkja SMUSH CDN (Content Delivery Network) sem hjálpar til við að stytta þann tíma sem tekur að hlaða vefsíðuna.
Hefur sálfstraustið þitt varðandi myndaval aukist?
Hefur þú prófað eitthvað af ráðunum í þessum pósti?
Hvað jókst hleðsluhraði vefsins hjá þér?
Heimild: wpmudev
