Hvernig á að fínstilla myndir fyrir vefinn

 Hvernig á að fínstilla myndir fyrir vefinn

Patrick Harvey

Elskar þú ekki myndir?

Þær geta umbreytt texta í aðlaðandi upplifun á meðan þú lest. Myndir bæta bloggfærslu, gera henni kleift að deila henni og setja tóninn og vörumerki allrar síðunnar þinnar.

Og veistu hvað? Við erum harðsnúin til að bregðast við myndum. Þess vegna er það öflugt tæki til að nota við markaðssetningu á blogginu þínu að setja myndefni inn í efnið þitt.

En ef þú ert ekki varkár geta myndir verið meira en helmingur (eða meira) af heildarstærð vefsíðunnar þinnar. Fyrir örfáum árum síðan var meðalstærð vefsíðu 600–700K. Núna er meðaltalið 2MB og það eykst með hverju ári.

Það er gríðarlegt!

Helsta ástæðan fyrir því að þetta gerist er sú að margar myndir eru notaðar oftar á vefsíðum og þessar myndir eru ekki rétt stærð og fínstillt. Þetta þýðir að þær eru ekki vistaðar eða teknar saman á vefvænan hátt, heldur eru þær að blása upp síðurnar þínar.

Flestir okkar skilja þó eftir fínstillingu mynda sem eftiráhugsun og viljum frekar njóta þess að gera skemmtilega hluti. eins og að búa til epíska færslu eða tengjast öðrum bloggurum í sess þinni.

En að hafa blaðsíðuuppblástur þýðir að hleðsluhraði síðunnar þinnar hefur áhrif á það. Þú heldur kannski ekki að þetta sé mikið mál ef þú ert á háhraðatengingu, en margir af gestum þínum eru það ekki. Google líkar líka ekki við hægfara hleðslu síður og það getur haft neikvæð áhrif á SEO þinn.

Af hverju þú þarft að fínstilla myndir

Þú vinnur hörðum höndum aðbúa til frábært efni og þú eyðir óteljandi klukkustundum í að kynna bloggið þitt og tengjast öðrum bloggurum, svo það síðasta sem þú vilt er að hugsanlegir gestir yfirgefi vefsíðuna þína áður en hún hleðst inn!

Rannsóknir sýna að allt að 40% af gestir smella á til baka hnappinn ef síða tekur lengri tíma en þrjár sekúndur að hlaðast.

Ég veit, þrjár sekúndur eru í raun ekki svo langur tími, en þegar þú ert á farsímatengingu og þú ert að bíða eftir síðu til að hlaða, sekúnda getur virst eins og að eilífu.

Og þar sem margir gestir þínir kunna að vera á hægari farsímatengingum verður það ljóst - þú þarft að minnka síðustærð þína. Og við vitum nú þegar hver stærsti brotamaður síðustærðaruppblásturs er – það eru myndirnar þínar.

Óþarflega stórar myndir taka líka pláss á hýsingarreikningnum þínum. Þó að sum ykkar gætu verið með hýsingu með „ótakmörkuðu“ geymsluplássi, takmarka margir hágæða hýsingaraðilar þig við um það bil 10GB geymslupláss í lægri áætlunum. Þetta getur fyllst fljótt, sérstaklega ef þú ert að hýsa margar, myndþungar síður á sama reikningi.

Svo, hvernig geturðu sagt hvort myndirnar þínar hægi á síðunni þinni? Prófaðu hraða vefsvæðis þíns með Google PageSpeed ​​Insights.

Ef Google tilkynnir um óhagkvæmar myndir sem vandamál, þá er það sem þú þarft að vita til að laga það.

Grundvallaratriði myndfínstillingar

Þegar kemur að því að fínstilla myndir á blogginu þínu, þá eru nokkrir mismunandi hlutir sem þú þarft að verameðvitaðir um: skráargerð, myndastærð og stærðir, hvernig þú þjónar myndunum þínum og myndþjöppun.

Við skulum skoða hvert þessara svæða nánar.

Skráargerð

Myndir á vefnum eru venjulega vistaðar á PNG eða JPEG skráarsniði - eða GIF fyrir hreyfimyndir. Hver elskar ekki þessar bráðfyndnu GIF-myndir sem svífa um vefinn!

Nú er það tæknilega allt í lagi ef þú vistar myndirnar þínar á öðru hvoru sniði – vafri gesta þinnar mun ekki eiga í vandræðum með að birta vefsíðuna þína – en fyrir bestu gæði og hagræðingu skaltu halda þig við eftirfarandi reglur:

  • JPEG – notað fyrir ljósmyndir og hönnun þar sem fólk, staðir eða hlutir eru sýndir
  • PNG – best fyrir grafík , lógó, textaþunga hönnun, skjámyndir og þegar þig vantar myndir með gagnsæjum bakgrunni
  • GIF – ef þú þarft hreyfimynd, notaðu annars PNG

Svo, hvers vegna eru mismunandi snið ?

Jæja, PNG er venjulega notað til að vista lógó og grafík vegna þess að það varðveitir upprunalegu myndgæði - enginn vill óskýran texta og pixlaður form. En ef þú reynir að vista mynd sem PNG mun hún líta ótrúlega út, en skráarstærðin sem myndast verður minni en ótrúleg.

JPEG er venjulega notað til að vista myndir. Sumum myndgögnum er hent til að búa til verulega minni skráarstærð, en þar sem myndir innihalda mikið úrval af litum og náttúrulegum afbrigðum er gæðatapiðvenjulega ómerkjanlegt fyrir mannsauga.

Við munum fara nánar út í samþjöppun síðar, en í bili ef þú manst aðeins eftir tvennu, mundu: JPEG fyrir myndir og PNG fyrir texta/grafík.

Myndamál

Hefur þú einhvern tíma hlaðið upp vefsíðu og tekið eftir því að pínulítil mynd (kannski til dæmis höfuðmynd) tekur f-o-r-e-v-e-r að hlaða niður? Svo hægt að sjá hverja línu koma inn? Þú hugsar með sjálfum þér, hvernig getur svona lítill mynd tekið svona langan tíma að hlaða niður?

Og þegar það kemur fyrir stóra hausmynd er það enn verra vegna þess að það getur stöðvað alla síðuhleðsluna.

Ástæðan fyrir því að þetta gerist er sú að bloggarinn hefur ekki breytt stærð og fínstillt myndina sína á réttan hátt, og ef um höfuðmyndadæmið okkar er að ræða, gæti hann hafa hlaðið upp JPEG í fullri upplausn beint úr DSLR myndavélinni sinni.

Og það er risastór skrá!

Sjáðu til, vefvafri mun (venjulega) skala mynd frá upprunalegu stærðinni þannig að hún passi vel á sinn stað á vefsíðu. Það sem virðist vera lítil mynd á skjánum gæti í raun verið risastór 10 megapixla mynd, minnkað í rauntíma af vafranum.

Nú munu sumir vefútgáfukerfi sjálfkrafa búa til margar afbrigði af myndinni þinni í fullri upplausn á mismunandi stærðir, en ef ekki, þá ættirðu að breyta stærð myndanna þinna fyrirfram í myndvinnsluforriti eins og Photoshop, Lightroom, Pixlr – eða jafnvel MS Paint. Það getur þýtt muninná milli 50K skráar og 5MB skrár.

WordPress, til dæmis, mun sjálfkrafa búa til þrjú (eða fleiri, fer eftir þema) afrit af myndinni þinni – öll með mismunandi stærð – sem þú getur notað í bloggfærslum, frekar en að nota alltaf myndina í fullri stærð.

Ef þú ert vanur að hlaða inn risastórum myndum af myndum og vilt spara pláss á hýsingarreikningnum þínum, þá er WordPress viðbótin Geðveiki hefur bakið á þér.

Það breytir stærð og kemur í stað upprunalegu myndarinnar í eitthvað viðráðanlegra, þannig að jafnvel þó þú setjir myndina í fullri stærð inn í færsluna þína, þá verður það ekki svo slæmt.

Þegar það hefur verið virkjað getur Imsanity einnig leitað í núverandi myndum þínum og breytt stærð í samræmi við það.

Að bera fram myndirnar þínar

Hvernig þú framreiðir myndirnar þínar fyrir gesti þína snýst ekki eingöngu um að fínstilla þær í sjálfu sér , en það getur haft gríðarleg áhrif á hleðslutíma síðunnar þinnar.

Sjá einnig: Pinterest SEO: Hvernig á að sannreyna reiknirit Pinterest markaðsstefnu þína

Flestir bloggarar birta myndirnar sínar beint af hýsingarreikningnum sínum og það er yfirleitt í lagi, en ef þú ert virkilega að leita að því að kreista hvern einasta árangur út úr síðuna þína, þá getur hýsing myndanna þinna á Content Delivery Network (CDN) skipt miklu máli.

CDN samanstendur af beitt staðsettum vefþjónum sem staðsettir eru í gagnaverum um allan heim. Þessir netþjónar hýsa afrit af myndunum þínum og þegar vafri gesta biður um mynd af vefsíðunni þinni beinir CDN vafranum sjálfkrafa tilþjónn sem er landfræðilega næst þeim.

Þetta þýðir að gestir frá Evrópu munu til dæmis fá myndir sem eru birtar frá staðbundnum evrópskum netþjóni, frekar en frá ríkjum eða annars staðar. Þar sem viðbragðstími og netleynd er stytt niðurhalast myndirnar mun hraðar, sem dregur úr hleðslutíma síðu.

Blogging Wizard notar Sucuri (það inniheldur eldvegg fyrir öryggi auk CDN), en það eru aðrir gæðaveitendur eins og Cloudfront Amazon eða KeyCDN. Jafnvel hið vinsæla CloudFlare, sem er ekki eingöngu CDN, býður upp á CDN ókeypis og er auðvelt að setja upp í flestum sameiginlegum hýsingarpökkum.

Myndþjöppun

Þegar kemur að því að fínstilla myndir, ekkert minnkar skráarstærðina þína meira en háþróuð myndþjöppun með tapi.

Flest myndvinnsluverkfæri eins og Visme eða Photoshop munu vista skrár með því að nota tapaða JPEG-þjöppun þar sem það hefur bestu skráarstærðarminnkunina. Þannig að þó að myndgæðin séu örlítið skert, þá minnkar það að nota tapaða myndþjöppun risastórar myndir í vefvænar stærðir.

Ég er viss um að margir sem nota Photoshop gætu skoðað Vista fyrir vef eiginleikann. sem allt og allt í fínstillingu myndarinnar. Og jafnvel myndvinnsluverkfæri á netinu eins og PicMonkey eða Visme fínstilla myndirnar þínar líka.

En vissir þú að það eru til verkfæri sem geta tekið „bjartsýni“ myndina þína úr Photoshop eða öðrum klippiverkfærum, marrað og þjappað henni saman um önnur 40% (eða meira),og enn sýnist það næstum eins og mannsaugað?

Hér eru nokkur ókeypis og greidd tól til að hjálpa þér að gera myndirnar þínar netvænar.

Skjáborðsverkfæri

ImageAlpha / ImageOptim

Fyrir Mac notanda er ImageOptim ókeypis skjáborðsverkfæri sem ég nota á hverjum degi til að fínstilla PNG myndir – aðallega skjámyndir – áður en ég hleð þeim inn. Þessi verkfæri eru auðveld í notkun, þú bara dregur og sleppir skránum þínum, en þú verður að gera eina mynd í einu.

Ábending fyrir atvinnumenn : Fyrir þá sem eru tæknivæddir er ImageOptim– CLI, þar sem þú getur fínstillt heila möppu af myndum í einu.

ImageAlpha er tapað PNG þjöppu og getur gert kraftaverk við að minnka PNG skrár á meðan ImageOptim framkvæmir háþróaða taplausa (með möguleika á tapslausri) þjöppun – og það fjarlægir óþarfa lýsigögn úr PNG, JPEG og GIF skrám.

Fyrir PNG myndirnar mínar keyrir ég þær fyrst í gegnum ImageAlpha:

Hér minnkaði það skjámyndamyndina mína úr 103K í 28K.

Ég keyrði það síðan í gegnum ImageOptim og sparaði aukalega 10%.

JPEGmini

Fyrir JPEG-skrárnar mínar fínstilla ég þær með JPEGmini-skjáborðsforritinu, sem er fáanlegt fyrir bæði Mac og Windows.

Lite útgáfan gerir þér kleift að fínstilla allt að 20 myndir á dag ókeypis og kostar $19.99 til að fjarlægja takmörkin.

Pro ábending : Ítarlegir notendur sem vilja samþætta JPEGmini í Photoshop eða Lightroom með viðbót geta keypt Pro útgáfuna fyrir$99.99.

Á netinu / Cloud / SaaS verkfæri

TinyPNG

Ef þú ert að leita að hágæða myndþjöppunartæki á netinu, TinyPNG (það fínstillir JPEG skrár líka þrátt fyrir nafnið) er vefforrit sem gerir þér kleift að draga allt að 20 5MB eða minni myndir inn í vafrann þinn og láta fínstilla þær allar í einu.

Þeir eru líka með forritara API og búa til WordPress viðbót í boði sem getur sjálfkrafa fínstillt myndirnar þínar við upphleðslu.

TinyPNG gefur þér 500 ókeypis mynd fínstillingar á mánuði og kostar eftir það frá $0,002–0,009 fyrir hverja mynd, allt eftir magni.

Nú 500 myndir á mánuði kann að hljóma eins og mikið, en þegar þú hefur í huga þá staðreynd að WordPress býr oft til þrjú til fimm afbrigði af hverri mynd í mismunandi stærðum, virðast 500 myndir ekki vera það margar fyrir hinn afkastamikla bloggara. Sem betur fer er kostnaður á hverja mynd fjárhagsáætlunarvænn.

EWWW Image Optimizer

Ef þú ert ekki tilbúinn að eyða peningum og vilt ekki vera í vandræðum með fínstillingu myndirnar þínar handvirkt, ókeypis EWWW Image Optimizer viðbótin fyrir WordPress getur sjálfkrafa fínstillt myndirnar þínar sem hlaðið er upp.

Þú getur valið um úrvalsáskrift sem framkvæmir tapsþjöppun, en ókeypis útgáfan framkvæmir aðeins taplausa þjöppun svo sparnaðurinn er' t næstum jafn verulegt. Það mun spara þér tíma og er þó betra en ekkert.

Athugið: Til að fá heildaryfirlit skaltu skoðafærslan okkar um myndþjöppunarverkfæri.

Að taka það upp

Þar sem sumir spá því að meðalstærð vefsíðunnar nálgist 3MB fyrir árið 2017, þá er kominn tími til að byrja að fínstilla myndirnar þínar.

Mundu að ekki allir gestir þínir eru á háhraðatengingum og blaðsíðuuppþemba og hægur hleðslutími síðu getur hugsanlega haft áhrif á röðun þína hjá Google. Til að hjálpa þér að létta álagið, ef svo má segja skaltu venja þig á að fínstilla myndirnar þínar í dag.

Sjá einnig: 10 þrepa ferlið til að skrifa hina fullkomnu listafærslu

Gættu að myndstærðum þínum og breyttu stærð hvers kyns of stórum myndum eða myndum úr stafrænni myndavél niður í viðeigandi stærð.

Næst skaltu nýta þér nútíma myndþjöppun með skjáborðsforritum eins og JPEGmini eða skýjaverkfærum eins og TinyPNG eða Kraken – samþætta þau í WordPress með viðbót ef mögulegt er.

Að lokum, ef útgáfuvettvangur býr sjálfkrafa til breytt stærðarafbrigði af upprunalegu myndinni þinni, veldu eitt af þessum fyrir bloggfærsluna þína, frekar en upprunalega, í fullri stærð.

Tengdur lestur: 7 leiðir til að draga úr Stærð PDF skjala.

Patrick Harvey

Patrick Harvey er vanur rithöfundur og stafrænn markaðsmaður með yfir 10 ára reynslu í greininni. Hann hefur mikla þekkingu á ýmsum efnum eins og bloggi, samfélagsmiðlum, rafrænum viðskiptum og WordPress. Ástríða hans fyrir að skrifa og hjálpa fólki að ná árangri á netinu hefur knúið hann til að búa til innsýn og grípandi færslur sem veita áhorfendum sínum gildi. Sem vandvirkur WordPress notandi þekkir Patrick það sem þarf til að byggja upp árangursríkar vefsíður og hann notar þessa þekkingu til að hjálpa fyrirtækjum og einstaklingum að koma sér upp viðveru sinni á netinu. Með næmt auga fyrir smáatriðum og óbilandi skuldbindingu um ágæti, er Patrick hollur til að veita lesendum sínum nýjustu strauma og ráðgjöf í stafræna markaðsgeiranum. Þegar hann er ekki að blogga má finna Patrick skoða nýja staði, lesa bækur eða spila körfubolta.