Ali želite naložiti slike na svoje spletno mesto WordPress, vendar niste prepričani, kakšne velikosti ali vrste datotek naj bodo slike? Ali niste seznanjeni s postopkom spreminjanja velikosti in stiskanja slik za splet? V tem članku bom razložil, zakaj je uporaba pravilne velikosti slik pomembna za vaše spletno mesto, in vam pokazal, kako spremeniti velikost in stisniti slike z brezplačnim urejevalnikom fotografij GIMP.

Zakaj je spreminjanje velikosti slik vašega spletnega mesta pomembno

Začnimo s tem, zakaj je spreminjanje velikosti slik vašega spletnega mesta tako pomembno.

Glede na WordPress.org, splošna "fizična velikost" slike igra veliko vlogo pri delovanju spletne strani. »Velikost datoteke [slike] narekuje čas, potreben za nalaganje vaše strani; večja kot je datoteka … dlje se [stran] nalaga.« Z drugimi besedami, nalaganje velike datoteke na vaše spletno mesto bo upočasnilo delovanje katere koli strani, na katero dodate vsebino, kar se običajno prikaže kot počasnejša hitrost nalaganja strani v analitičnih podatkih vašega spletnega mesta.

»Velikost datoteke [slike] narekuje čas, potreben za nalaganje vaše strani; večja kot je datoteka … dlje se [stran] nalaga.«

-WordPress.org

Hitrost nalaganja strani, imenovana tudi preprosto "hitrost strani,« je »kako hitro se naloži vsebina na vaši strani« glede na SEO spletno mesto Moz. Počasnejše strani lahko povzročijo višjestopnje obiskov ene strani,« ki je modna metrika, ki predstavlja seje, pri katerih obiskovalec spletnega mesta zapusti vaše spletno mesto po ogledu ene strani. Počasnejše strani lahko tudi skrajšajo čas, ki ga obiskovalci preživijo na straneh vašega spletnega mesta, saj lahko ljudje postanejo nestrpni, ko čakajo, da se vsebina strani naloži, in hitreje zapustijo vaše spletno mesto.

Te meritve so pomembne, ker običajno želite, da uporabniki preživijo več časa na vašem spletnem mestu in si ogledajo več strani na vašem spletnem mestu.

Pomembni so tudi zato, ker igrajo vlogo pri uvrščanju vašega spletnega mesta na straneh z rezultati iskalnika ali »SERP-jih«. SERPs so preprosto strani z rezultati, ki se prikažejo, ko vnesete besedo ali frazo v Google in pritisnete tipko enter. Ker večje slike kažejo na slabe prakse spletnega oblikovanja in negativno vplivajo na uporabniško izkušnjo na vašem spletnem mestu, lahko iskalniki, kot je Google kaznovati vaše spletno mesto za te večje slike in uvrstite svoje spletno mesto pod druge spletne strani, ki so uspešnejše.

Nižje ko je na primer vaše spletno mesto uvrščeno v Googlu, manj prometa ima vaše spletno mesto in več prometa bo namenjeno vašim konkurentom, ki so v rezultatih iskanja uvrščeni nad vas.

Z zmanjšanjem velikosti datoteke vaših slik na vašem spletnem mestu lahko izboljšate svojo hitrost strani in tako izboljšati druge meritve, kot je Odklonijo stopnja in čas na page, da na koncu izboljšate svoje uvrstitve v iskalnikih.

Upoštevajte, da obstaja veliko drugih pomembnih spremenljivk, ki se nanašajo na uvrstitev v iskanju, zato je popravljanje vaših slik le del trdnega SEO (Search Engine Optimization) strategija. Vsekakor pa je zelo pomembno, da se vaše spletno mesto uvrsti višje na mestih, kot je Google, in pomaga povečati promet vašega spletnega mesta.

Kako spremeniti velikost slik za WordPress v GIMP

Kako torej pravilno spremeniti velikost slik za WordPress?

Velikost slikovne datoteke lahko preprosto zmanjšate tako, da zmanjšate celotno velikost slike z uporabo skaliranje in obrezovanje preden ga naložite na svoje spletno mesto. Poleg tega lahko uporabite tako imenovano »stiskanje” na svojo sliko, da dodatno zmanjšate njeno velikost.

GIMP, brezplačni in odprtokodni urejevalnik fotografij, lahko opravi vse te naloge, obenem pa izvozi v priporočene formate datotek »naslednje generacije«, da dodatno zmanjša velikost datotek vaših slik in izboljša delovanje vašega spletnega mesta.

Povečajte svojo sliko

Če želite začeti s tem postopkom, odprite sliko, ki jo želite naložiti na svoje spletno mesto, v GIMP. To lahko storite tako, da povlečete in spustite svojo sliko iz računalnika v slikovno okno GIMP ali pa preprosto pojdite na Datoteka>Odpri, ko ste znotraj GIMP.

Če uporabljate metodo Datoteka>Odpri, se v pogovornem oknu »Odpri sliko«, ki se prikaže, pomaknite do lokacije slike v računalniku in dvokliknite slikovno datoteko, ko jo najdete, da jo odprete v GIMP (ali kliknite ikono Gumb »Odpri« v spodnjem desnem kotu pogovornega okna).

Na samem vrhu okna GIMP je funkcija, imenovana »Naslovna vrstica« (rdeča puščica na zgornji sliki). Tukaj boste videli trenutne dimenzije vaše slike (povečano zeleno polje na fotografiji). Moja slika je 1920×1280 – pri čemer prva številka, 1920, predstavlja širino moje slike (v slikovnih pikah), druga številka, 1280, pa predstavlja višino moje slike. Končne dimenzije slike, ki jih boste želeli uporabiti za svojo sliko, bodo odvisne od tega, kje v WordPressu nameravate uporabiti sliko, kot tudi od temo, ki jo uporabljate.

Za to vadnico bom svojo sliko spremenil na standardno velikost 1200 × 630 slikovnih pik, ki je priporočena za slike objav v spletnem dnevniku.

S tem v mislih bom najprej želel obrezati svojo sliko, tako da bo razmerje stranic moje izvirne slike ustrezalo razmerju stranic priporočene velikosti. To naredim tako, da zgrabim svoje orodje za obrezovanje tako, da pritisnem shift+c na tipkovnici ali kliknem ikono orodja za obrezovanje v orodjarni GIMP (rdeča puščica na zgornji sliki).

Nato bom v možnostih orodja za to orodje označil polje zraven »Fiksno« (zelena puščica) in kliknil spustni meni, da izberem »Razmerje stranic« (modra puščica).

V besedilno polje pod spustnim menijem (rumena puščica) bom vnesel »1200:630«, da nastavim svoje razmerje stranic. To se ujema z razmerjem stranic priporočene velikosti slike, za katero želim, da je moja končna slika.

Z orodjem za obrezovanje bom zdaj kliknil in povlekel miško čez sliko, da narišem območje obrezovanja. Ko spustim miško, bo vse zunaj območja obrezovanja zatemnjeno (rdeča puščica na zgornji sliki – ob predpostavki, da je možnost »Označi« označena v možnostih orodja, kar je običajno privzeto).

Moje območje obrezovanja ima vodila nastavljena kot »sredinske črte« (rumena puščica na zgornji sliki). To nastavitev lahko spremenim s spustnim seznamom vodnikov proti dnu možnosti orodja. Svoja vodila bom na primer spremenil v »Pravilo tretjin« (zelena puščica). Različne možnosti vodnika tukaj temeljijo na načelih fotografije, kar olajša kadriranje vaše kompozicije z uporabo teh načel.

Z miško se lahko pomaknete nad katero koli stran ali kot območja obrezovanja (tj. označeno območje, označeno z rdečo puščico na zgornji sliki), nato kliknete in povlecite, da spremenite velikost meje območja obrezovanja. Upoštevajte, da lahko vedno vidite velikost območja obrezovanja v poljih »Velikost«, ki se nahajajo v možnostih orodja (na zgornji sliki so označena z zeleno). Obdržati boste želeli, da bo skupna velikost območja obrezovanja večja od končne velikosti slike 1200×630.

Lahko tudi kliknete in povlečete miško na sredino območja obrezovanja (rdeča puščica), da spremenite položaj obreza na sliki.

Ko ste pripravljeni na obrezovanje slike, enkrat kliknite znotraj območja obrezovanja in slika bo obrezana.

Upoštevajte, da če možnost »Izbriši obrezane slikovne pike« v možnostih orodja ni potrjena (zelena puščica na zgornji sliki), bo meja izvirne slike še vedno prikazana okoli vaše slike prek rumene pikčaste črte (rdeča puščica). Prvotno sliko lahko obnovite in s tem razveljavite obrezovanje tako, da izberete Slika>Prilagodi platno slojem. Izvoženo bo samo območje vaše slike znotraj meje platna.

Naša slika je zdaj obrezana na želeno razmerje stranic, a če še enkrat pogledate naše dimenzije slike v »naslovni vrstici«, boste videli, da je slika 1532×804 (obrobljena z zeleno in povečana na zgornji fotografiji – vaše mere bodo verjetno nekoliko drugačne glede na to, kako veliko ste območje obreza narisali na svoji sliki). Zdaj bomo morali povečati našo sliko, da bo ustrezala želenim dimenzijam.

Če želite to narediti, pojdite na Image>Scale Image (rdeča puščica).

V polju »Slika slike«, ki se prikaže, pod »Velikost slike« se prepričajte, da je ikona verižne povezave poleg polj »širina« in »višina« povezana (rdeča puščica na zgornji fotografiji). Nato spremenite »Širino« svoje slike na 1200 (zelena puščica). Pritisnite tabulatorsko tipko. Višina slike se samodejno posodobi na »630«. Pod »Kakovost« se prepričajte, da je spustni meni »Interpolacija« (modra puščica) nastavljen na »NoHalo« ali »LoHalo« za najboljšo kakovost slike po skaliranju. (Za več informacij o interpolaciji preverite mojo vadnico na to temo).

Pritisnite gumb »Scale«, da povečate sliko (rumena puščica).

Ko je skaliranje končano, preverite dimenzije slike v naslovni vrstici. Zdaj bi morali videti velikost slike 1200 × 630 – natančna velikost, ki jo želimo! Torej, kaj bomo zdaj?

Stisnite svojo sliko z izvozom v WebP

Obrezovanje in spreminjanje velikosti slike je zmanjšalo velikost datoteke z zmanjšanjem višine slike s 1920 na 1200 slikovnih pik in širine s 1280 na 630 slikovnih pik, vendar lahko velikost slike še dodatno zmanjšamo z uporabo stiskanja, ko sliko izvozimo.  

Torej, zdaj moramo izvoziti sliko v obliko datoteke, ki bo uporabila stiskanje slike, ne da bi opazno zmanjšala kakovost slike. Čeprav so JPEG vedno dobra možnost, je zdaj na voljo še boljša možnost: WebP.

Format WebP uporablja večjo stiskanje kot JPEG, hkrati pa manj vpliva na kakovost slike kot JPEG. Z drugimi besedami, z manjšo velikostjo datoteke boste dobili lepšo sliko. Poleg tega formate WebP podpira vseh 5 najboljših spletnih brskalnikov.

Za izvoz v WebP pojdite na Datoteka> Izvozi kot (rdeča puščica).

Kliknite katero koli mapo v razdelku »Mesta« (obrobljeno z zeleno), da izberete sliko v računalniku, kamor želite shraniti sliko. Preprosto dvokliknite mapo, da jo odprete, in si oglejte, v kateri mapi ste poleg naslova »Shrani v mapo« (rdeča puščica). Nato sliko preimenujte v poljubno ime – poskrbite, da ime slike končate s pripono ».webp« (modra puščica), da izvozite sliko v format WebP. Ko ste pripravljeni, kliknite »Izvozi« v spodnjem desnem kotu okna (rumena puščica).

Nato se prikaže pogovorno okno »Izvozi sliko kot WebP«. Prepričajte se, da možnost »Brez izgube« ni potrjena (rdeča puščica). Običajno nastavim »Kakovost slike« na 80 (modra puščica – to je odstotek, torej nižji kot je odstotek, nižja bo kakovost slike, vendar manjša bo slikovna datoteka). Če vaša slika ne vsebuje prosojnosti (tj. logotipa brez ozadja), vam ni treba skrbeti za drsnik »Kakovost alfa« (pravzaprav sem v poskusu, ki sem ga izvedel, nekoliko znižal kakovost alfa s 100 na 90 povečala velikost datoteke slike s prozornim ozadjem z 8.50 kb na 8.52 kb). Spustni meni »Vrsta vira« lahko obdržite na »Privzeto«.

Ali želite označiti ali počistiti katero koli od možnosti metapodatkov, vključno s podatki Exif, podatki ITPC in podatki XMP, je odvisno od vas. Podatki Exif in XMP so metapodatki, ki jih običajno dodeli vaš fotoaparat in opisujejo informacije o vaši fotografiji, na primer, kateri model fotoaparata je bil uporabljen ali kakšna vrsta objektiva je bila uporabljena. ITPC po drugi strani uporabljajo člani tiska in vaši podobi dodeljuje informacije, kot so lastništvo, pravice in licence. Če niste prepričani, kaj storiti, pustite te možnosti označene.

Podobno je v redu, če pustite možnost »Shrani barvni profil« neoznačeno, saj bo večina brskalnikov samodejno uporabila barvni prostor sRGB za prikaz vaše slike, kar uporablja GIMP. Če uporabljate drug barvni profil, to možnost pustite označeno. Poleg tega, če vas skrbi, da slika v določenih brskalnikih ni pravilno prikazana, se skupni velikosti slike doda le nekaj kb, če jo pustite označeno.

Nazadnje lahko možnost »Shrani sličico« ostane neoznačena, kar nam bo dodatno prihranilo kakšen kilobajt.

Kliknite »Izvozi« (rumena puščica na zgornji sliki), da izvozite sliko v format WebP. Če primerjate izvoženo datoteko WebP z datoteko JPEG, ki je enake velikosti in ima prav tako nastavljeno kakovost na »80«, je slika WebP približno 30 kb ali približno 25 % manjša od velikosti JPEG.

Zdaj se lahko prijavite na svoje spletno mesto WordPress in se pomaknete do strani ali objave, kamor želite naložiti svojo sliko, ali pa se preprosto pomaknete do razdelka »Mediji« z uporabo glavne navigacije in povlecite in spustite svojo sliko v medijsko knjižnico. V mojem primeru se bom pomaknil do »Objava« z uporabo glavne navigacije (rdeča puščica na zgornji sliki) in kliknil »Objava v spletnem dnevniku 1« (modra puščica), da uredim to objavo v spletnem dnevniku.

Nato bom odprl stransko vrstico z nastavitvami objave (rdeča puščica) in se pomaknil navzdol do razdelka »Predstavljena slika« ter razširil ta razdelek (modra puščica). Nato bom kliknil sliko, da jo zamenjam s svojo novo sliko.

Pomaknil se bom na zavihek »Naloži datoteke« (rdeča puščica) in lahko povlekel in spustil svojo sliko iz računalnika v WordPress (modre puščice).

Na koncu bom kliknil »Nastavi predstavljeno sliko«, da uporabim to spremembo (rdeča puščica).

Kliknite »Posodobi« (rdeča puščica), da posodobite svojo stran z novo predstavljeno sliko.

Če kliknem »Ogled objave« (modra puščica) ...

... zdaj boste videli novo prikazano sliko na vrhu mojega bloga.

To je to za to vadnico! Če želite izvedeti več o oblikovanju spletnega mesta WordPress, priporočam, da si ogledate mojo Tečaj WordPress 6.0 za nekoderje! Ali pa, če želite izvedeti več o GIMP, si oglejte moj Mojstrski tečaj GIMP 2.10 na Udemy!   

It pin na Pinterest