Ertu að leita að því að hlaða upp myndum á WordPress síðuna þína en ertu ekki viss um hvaða stærðir eða skráargerðir myndirnar ættu að vera? Ertu ókunnur ferlið við að breyta stærð og þjappa myndum fyrir vefinn? Í þessari grein mun ég útskýra hvers vegna það er mikilvægt að nota rétta myndastærð fyrir vefsíðuna þína, auk þess að sýna þér hvernig á að breyta stærð og þjappa myndunum þínum með ókeypis ljósmyndaritlinum GIMP.

Hvers vegna er mikilvægt að breyta stærð mynda á vefsíðunni þinni

Við skulum byrja á því hvers vegna það er svo mikilvægt að breyta stærð mynda á vefsíðunni þinni.

Samkvæmt WordPress.org, heildar "líkamleg stærð" myndar gegnir miklu hlutverki í frammistöðu vefsíðunnar. „Skráastærð [myndar] ræður tímanum sem það tekur að hlaða síðunni þinni; því stærri sem skráarstærðin er... því lengri tíma tekur [síðu] að hlaða.“ Með öðrum orðum, að hlaða upp stórri skráarstærð á vefsíðuna þína mun hægja á frammistöðu hvaða síðu sem þú bætir myndinni við, venjulega í formi hægari síðuhleðsluhraða.

„Skráastærð [myndar] ræður tímanum sem það tekur að hlaða síðunni þinni; því stærri sem skráarstærðin er... því lengri tíma tekur [síðu] að hlaða.“

-WordPress.org

Hleðsluhraði síðu, einnig kallaður einfaldlega "síðu hraði," er „hversu hratt efnið á síðunni þinni hleðst,“ samkvæmt SEO síða Moz. Að hafa hægari síður getur leitt til hærri „hoppgengi,” sem er fínt hugtak fyrir einnar síðulotur þar sem gestur vefsvæðis yfirgefur síðuna þína eftir að hafa skoðað eina síðu. Hægari síður geta einnig dregið úr þeim tíma sem gestir eyða á síðum síðunnar þinnar, þar sem fólk getur orðið óþolinmætt þegar það bíður eftir að innihald síðu hleðst og yfirgefi síðuna þína.

Þessar mælingar eru mikilvægar vegna þess að þú vilt venjulega að notendur eyði meiri tíma á síðunni þinni og skoði fleiri síður á síðunni þinni.

Þeir eru líka mikilvægir vegna þess að þeir gegna hlutverki í því hvernig vefsvæðið þitt er raðað á leitarvélarniðurstöðusíðum (SERP). SERPs eru einfaldlega niðurstöðusíðurnar sem birtast þegar þú slærð inn orð eða setningu á Google og ýtir á Enter takkann. Vegna þess að stærri myndir eru til marks um lélega vefhönnunarvenjur og hafa neikvæð áhrif á upplifun notandans á síðunni þinni, leita leitarvélar eins og Google refsa síðuna þína og raða vefsíðunni þinni fyrir neðan aðrar vefsíður sem standa sig betur.

Því lægra sem vefsíðan þín er á Google, til dæmis, því minni umferð fær vefsíðan þín og því meiri umferð fer til keppinauta þinna sem raðast fyrir ofan þig í leitarniðurstöðum.

Með því að minnka skráarstærð myndanna þinna á vefsíðunni þinni geturðu bætt þitt síðu hraði og bæta þannig aðra mælikvarða eins og hopp og tími á blse til að bæta stöðu þína á leitarvélum að lokum.

Athugaðu að það eru margar aðrar mikilvægar breytur sem fara inn í leitarröðina, svo að laga myndirnar þínar er aðeins hluti af traustum SEO (Search Engine Optimization) stefnu. Hins vegar er vissulega mjög mikilvægt að hjálpa síðunni þinni að vera hærra á stöðum eins og Google til að auka umferð vefsins þíns.

Hvernig á að breyta stærð mynda fyrir WordPress í GIMP

Svo hvernig breytirðu myndum rétt fyrir WordPress?

Þú getur minnkað skráarstærð myndar einfaldlega með því að minnka heildarstærð myndarinnar með því að nota stigstærð og cropping áður en þú hleður því upp á vefsíðuna þína. Auk þess geturðu notað það sem kallað er „þjöppun” við myndina þína til að minnka stærð hennar enn frekar.

GIMP, ókeypis og opinn uppspretta ljósmyndaritillinn, getur framkvæmt öll þessi verkefni á sama tíma og hann flytur út í ráðlögð „næstu kynslóðar“ skráarsnið til að minnka enn frekar skráarstærð mynda þinna og bæta afköst vefsvæðisins.

Skalaðu myndina þína

Til að byrja á þessu ferli skaltu opna myndina sem þú vilt hlaða upp á síðuna þína í GIMP. Þú getur gert þetta með því að draga og sleppa myndinni þinni af tölvunni þinni inn í myndaglugga GIMP, eða þú getur einfaldlega farið í File>Open þegar þú ert inni í GIMP.

Ef þú notar File>Opna aðferðina skaltu fletta að staðsetningu myndarinnar á tölvunni þinni innan úr „Open Image“ glugganum sem birtist og tvísmella á myndskrána þegar þú hefur fundið hana til að opna hana í GIMP (eða smelltu á „Opna“ hnappinn neðst í hægra horninu í glugganum).

Mjög efst í GIMP glugganum er eiginleiki sem kallast „Titilstika“ (rauð ör á myndinni hér að ofan). Hér muntu sjá núverandi stærð myndarinnar þinnar (stækkaður grænn kassi á myndinni). Myndin mín er 1920×1280 – þar sem fyrsta talan, 1920, táknar breidd myndarinnar (í punktum), og önnur talan, 1280, táknar hæð myndarinnar minnar. Endanleg myndstærð sem þú vilt nota fyrir myndina þína fer eftir því hvar í WordPress þú ætlar að nota myndina, sem og hvaða þema þú ert að nota.

Fyrir þessa kennslu mun ég breyta stærð myndarinnar í staðlaða 1200 × 630 pixla stærð sem mælt er með fyrir myndir á bloggfærslum.

Með þetta í huga er það fyrsta sem ég vil gera er að klippa myndina mína þannig að stærðarhlutfall upprunalegu myndarinnar minnar passi við stærðarhlutfallið sem mælt er með. Til að gera þetta mun ég grípa skurðarverkfærið mitt með því að ýta á shift+c á lyklaborðinu mínu eða smella á skurðarverkfæristáknið í GIMP verkfærakistunni (rauð ör á myndinni hér að ofan).

Næst, í Verkfæravalkostum fyrir þetta tól, mun ég haka við reitinn við hliðina á „Fast“ (græn ör) og smella á fellivalmyndina til að velja „Hlutfall“ (blá ör).

Ég skrifa „1200:630“ til að stilla stærðarhlutfallið mitt í textareitnum fyrir neðan fellilistann (gul ör). Þetta passar við stærðarhlutfall ráðlagðrar myndstærðar sem ég vil að endanleg mynd mín sé.

Með því að nota skurðarverkfærið mun ég nú smella og draga músina yfir myndina til að teikna skurðarsvæðið. Þegar ég sleppa músinni, mun allt fyrir utan skurðarsvæðið verða dimmt (rauð ör á myndinni hér að ofan - að því gefnu að "Highlight" sé hakað í verkfæravalkostunum, sem það er venjulega sjálfgefið).

Sjálfgefið er að skurðarsvæðið mitt hefur leiðbeiningarnar stilltar sem „Miðlínur“ (gul ör á myndinni hér að ofan). Ég get breytt þessari stillingu með því að nota leiðbeiningar fellilistann neðst á Verkfæravalkostum. Til dæmis mun ég breyta leiðbeiningunum mínum í "Rule of Thirds" (græn ör). Hinir ýmsu leiðarvalkostir hér eru byggðir á ljósmyndareglum, sem gerir það auðvelt að ramma inn samsetningu þína með þessum reglum.

Þú getur sveiflað músinni yfir hvaða hliðar eða horn sem er á skurðarsvæðinu (þ.e. auðkennda svæðið sem táknað er með rauðu örinni á myndinni hér að ofan), smelltu síðan og dragðu til að breyta stærð skurðarsvæðisins. Athugaðu að þú getur alltaf séð stærð skurðarsvæðisins þíns í „Stærð“ reitunum sem staðsettir eru í Verkfæravalkostum (grænt útlistað á myndinni hér að ofan). Þú vilt halda heildarstærð skurðarsvæðisins stærri en 1200×630 lokastærð myndarinnar.

Þú getur líka smellt og dregið músina í miðju skurðarsvæðisins (rauð ör) til að færa skurðinn á myndina.

Þegar þú ert tilbúinn til að klippa myndina skaltu smella einu sinni á skurðarsvæðið og myndin þín verður klippt.

Athugaðu að ef valmöguleikinn „Eyða skornum pixlum“ í Verkfæravalkostum er ekki hakaður (græn ör á myndinni hér að ofan), munu upprunalegu myndarmörkin þín enn birtast í kringum myndina þína með gulri punktalínu (rauða ör). Þú getur endurheimt upprunalegu myndina, þannig að afturkalla skurðinn, með því að fara í Image>Fit Canvas to Layers. Aðeins svæðið á myndinni þinni innan strigamarkanna verður flutt út.

Myndin okkar er nú klippt í það stærðarhlutfall sem við viljum, en ef þú horfir aftur á myndstærð okkar í „Titilstika“ muntu sjá að myndin er 1532×804 (grænt útlistað og stækkað á myndinni hér að ofan – stærðirnar þínar munu líklega vera aðeins mismunandi eftir því hversu stórt þú teiknaðir uppskerusvæðið þitt á myndina þína). Við þurfum núna að skala myndina okkar til að passa við viðkomandi stærðir.

Til að gera þetta, farðu í Image>Scale Image (rauð ör).

Í „Mærðarmynd“ reitnum sem birtist, undir „Myndastærð“, vertu viss um að keðjutáknið við hliðina á „breidd“ og „hæð“ kassanum sé tengt (rauð ör á myndinni hér að ofan). Síðan skaltu breyta „breidd“ myndarinnar þinnar í 1200 (græn ör). Smelltu á tab takkann. Hæð myndarinnar uppfærist sjálfkrafa í „630“. Undir „Gæði“ skaltu ganga úr skugga um að fellivalmyndin „Interpolation“ (blá ör) sé stillt á annað hvort „NoHalo“ eða „LoHalo“ fyrir bestu myndgæði eftir mælingu. (Fyrir frekari upplýsingar um innskot, skoðaðu námskeiðið mitt um efnið).

Smelltu á „Skala“ hnappinn til að skala myndina þína (gula örin).

Þegar stærðarstærðinni er lokið skaltu skoða myndstærðirnar á titlastikunni. Þú ættir nú að sjá myndstærð 1200×630 – nákvæmlega stærðin sem við viljum! Svo, hvað gerum við núna?

Þjappaðu myndinni þinni með því að flytja út í WebP

Með því að skera og skala myndina minnkaði skráarstærðin með því að minnka hæð myndarinnar úr 1920 í 1200 pixla og breiddina úr 1280 í 630 pixla, en við getum minnkað myndina enn frekar með því að beita þjöppun þegar við flytjum myndina út.  

Þannig að við þurfum núna að flytja myndina út á skráarsnið sem mun beita þjöppun á myndina án þess að draga verulega úr gæðum myndarinnar. Þó að JPEG séu alltaf góður kostur, þá er enn betri kostur í boði núna: WebP.

WebP sniðið notar meiri þjöppun en JPEG en hefur minni áhrif á gæði myndarinnar en JPEG gerir. Með öðrum orðum, þú munt fá betri mynd með minni skráarstærð. Auk þess eru WebP snið studd af öllum efstu 5 vöfrunum.

Til að flytja út í WebP, farðu í File>Export As (rauð ör).

Smelltu á einhverja af möppunum í hlutanum „Staðir“ (grænt útlistað) til að velja myndina á tölvunni þinni þar sem þú vilt vista myndina þína. Þú getur einfaldlega tvísmellt á möppu til að slá hana inn og sjá í hvaða möppu þú ert við hliðina á „Vista í möppu“ titlinum (rauð ör). Síðan skaltu endurnefna myndina þína í það sem þú vilt - bara vertu viss um að þú endar myndnafnið þitt með endingunni ".webp" (blá ör) til að flytja myndina út á WebP sniði. Þegar þú ert tilbúinn skaltu smella á „Flytja út“ neðst í hægra horninu í glugganum (gul ör).

Næst mun „Flytja út mynd sem WebP“ valmyndin birtast. Gakktu úr skugga um að „Lossless“ sé ekki hakað (rauð ör). Ég stilli venjulega „Myndgæði“ á 80 (blá ör - þetta er prósent, þannig að því lægra sem prósentan er því lægri verða gæði myndarinnar, en því minni sem myndskráarstærðin verður). Ef myndin þín inniheldur ekki gagnsæi (þ.e. lógó án bakgrunns) þarftu ekki að hafa áhyggjur af "Alpha quality" sleðann (reyndar, í tilraun sem ég gerði, lækkaði alfa gæðin úr 100 í 90 í raun lítillega. aukið skráarstærð myndar með gagnsæjum bakgrunni úr 8.50 kb í 8.52 kb). „Upprunategund“ fellilistann sem þú getur haldið stilltum á „Sjálfgefið“.

Hvort þú vilt haka við eða afmerkja einhvern af lýsigagnavalkostunum, þar á meðal Exif gögn, ITPC gögn og XMP gögn, er undir þér komið. Exif og XMP gögn eru lýsigögn sem myndavélin þín úthlutar venjulega og lýsa upplýsingum um myndina þína eins og hvaða gerð myndavélar var notuð eða hvers konar linsa var notuð. ITPC er aftur á móti notað af blaðamönnum og úthlutar upplýsingum til myndarinnar þinnar eins og eignarhald, réttindi og leyfi. Ef þú ert ekki viss um hvað þú átt að gera skaltu bara hafa þessa valkosti merkta.

Sömuleiðis gengur þér vel að skilja „Vista litasnið“ valkostinn ómerktan þar sem flestir vafrar munu sjálfkrafa nota sRGB litarýmið til að sýna myndina þína, sem er það sem GIMP notar. Ef þú ert að nota annan litasnið, viltu hafa þetta merkt. Einnig, ef þú hefur áhyggjur af því að myndin sé ekki birt rétt fyrir ákveðna vafra, bætir það aðeins nokkrum kb við heildarmyndarstærðina ef þú skilur hana eftir.

Að lokum getur „Vista smámynd“ valmöguleikinn verið ómerktur, sem mun spara okkur enn frekar kílóbæt.

Smelltu á „Flytja út“ (gul ör á myndinni hér að ofan) til að flytja myndina út á WebP sniðið. Þegar útfluttu WebP-skráin er borin saman við JPEG-skrá sem er í sömu stærð og gæði hennar er einnig stillt á „80“, þá er WebP-myndin um það bil 30 kb, eða um það bil 25%, minni að stærð en JPEG.

Þú getur nú skráð þig inn á WordPress síðuna þína og farið á síðuna eða færsluna þar sem þú vilt hlaða upp myndinni þinni, eða einfaldlega farið í „Media“ hlutann með því að nota aðalleiðsögnina og draga og sleppa myndinni þinni í Media Library. Í mínu tilviki mun ég fara í „Post“ með því að nota aðalleiðsögnina (rauða örin á myndinni hér að ofan) og mun smella á „Blogg Post 1“ (blá ör) til að breyta þeirri bloggfærslu.

Ég mun þá opna hliðarstikuna fyrir færslustillingar (rauð ör) og skruna niður að hlutanum „Valin mynd“ og stækka þennan hluta (blá ör). Síðan smelli ég á myndina til að skipta henni út fyrir nýju myndina mína.

Ég fer á flipann „Hlaða inn skrám“ (rauð ör) og get dregið og sleppt myndinni minni úr tölvunni minni yfir í WordPress (bláar örvar).

Að lokum mun ég smella á „Setja valin mynd“ til að beita þessari breytingu (rauð ör).

Smelltu á „Uppfæra“ (rauð ör) til að uppfæra síðuna þína með nýju myndinni.

Ef ég smelli á „Skoða færslu“ (blá ör)…

…þú munt nú sjá nýju myndinni sem birtist efst á blogginu mínu.

Það er allt fyrir þessa kennslu! Ef þú vilt fræðast meira um að hanna WordPress vefsíðu, mæli ég með að kíkja á minn WordPress 6.0 fyrir námskeið án kóðara! Eða, ef þú vilt læra meira um GIMP, skoðaðu mína GIMP 2.10 Masterclass á Udemy!   

Gerast áskrifandi að DMD fréttabréfinu

Gerast áskrifandi að DMD fréttabréfinu

Skráðu þig til að fá ný námskeið, námskeiðsuppfærslur og nýjustu fréttir af uppáhalds hugbúnaðinum þínum!

Þú hefur gerst áskrifandi!

Pinna það á Pinterest

Deildu þessu