Želite li učitati slike na svoje WordPress mjesto, ali niste sigurni koje bi veličine ili vrste datoteka trebale biti? Niste upoznati s postupkom promjene veličine i sažimanja slika za web? U ovom ću članku objasniti zašto je korištenje pravilne veličine slike važno za vašu web stranicu, te ću vam pokazati kako promijeniti veličinu i komprimirati svoje slike pomoću besplatnog uređivača fotografija GIMP.
Pregled sadržaja
- Zašto je važna promjena veličine slika vaše web stranice
- Kako promijeniti veličinu slika za WordPress u GIMP-u
- Korak 1: Otvorite svoju sliku
- Korak 2: Pronađite dimenzije svoje slike
- Korak 3: Promijenite omjer slike pomoću alata za izrezivanje
- Korak 4: Prilagodite sliku
- Korak 5: Komprimirajte svoju sliku izvozom
- Korak 6: Prenesite svoju sliku na WordPress
Zašto je važna promjena veličine slika vaše web stranice
Počnimo s time zašto je promjena veličine slika vaše web stranice toliko važna.
Prema WordPress.org, ukupna "fizička veličina" slike igra veliku ulogu u izvedbi web stranice. “Veličina datoteke [slike] diktira vrijeme potrebno za učitavanje vaše stranice; što je veća veličina datoteke... [stranici] će trebati više vremena da se učita.” Drugim riječima, učitavanje velike datoteke na vašu web stranicu usporit će izvedbu bilo koje stranice na koju dodate sadržaj, što se obično prikazuje kao sporija brzina učitavanja stranice u analitičkim podacima vaše web stranice.
“Veličina datoteke [slike] diktira vrijeme potrebno za učitavanje vaše stranice; što je veća veličina datoteke... [stranici] će trebati više vremena da se učita.”
-WordPress.org
Brzina učitavanja stranice, također se jednostavno naziva "Stranica Brzina," je "brzina učitavanja sadržaja na vašoj stranici", prema SEO stranica Moz. Imati sporije stranice može rezultirati višim "stope odskoka”, što je otmjena metrika koja predstavlja sesije u kojima posjetitelj stranice napušta vašu stranicu nakon što je pogledao jednu stranicu.
Sporije stranice također mogu smanjiti vrijeme koje posjetitelji provode na stranicama vašeg web-mjesta jer ljudi mogu postati nestrpljivi čekajući da se sadržaj stranice učita i brže napustiti vaše web-mjesto.
Ovi su pokazatelji važni jer obično želite da korisnici provode više vremena na vašoj web-lokaciji i pregledavaju više stranica na vašoj web-lokaciji.
Oni su također važni jer igraju ulogu u rangiranju vaše web stranice na stranicama s rezultatima tražilice ili "SERP-ovima". SERP-ovi su jednostavno stranice s rezultatima koje se prikazuju kada upišete riječ ili izraz u Google i pritisnete tipku enter. Budući da veće slike ukazuju na lošu praksu web dizajna i negativno utječu na korisničko iskustvo dok je na vašoj web stranici, tražilice poput Googlea mogu sankcionirati svoju web-lokaciju jer ima ove veće slike i rangirajte svoju web stranicu ispod drugih web stranica koje imaju bolju izvedbu.
Na primjer, što je vaša web stranica niže rangirana na Googleu, to manje prometa vaša stranica dobiva, a više će prometa ići vašim konkurentima koji su rangirani iznad vas u rezultatima pretraživanja.
Smanjenjem veličine datoteke slika na svojoj web stranici možete poboljšati svoje Stranica Brzina i tako poboljšati druge metrike kao što su odskočiti stopa i vrijeme na page kako biste u konačnici poboljšali svoje rangiranje na tražilicama.
Imajte na umu da postoje mnoge druge važne varijable koje ulaze u rang pretraživanja, tako da je popravljanje vaših slika samo dio čvrstog SEO (Search Engine Optimization) strategija. Međutim, to je svakako vrlo važno za pomaganje vašem web-mjestu da se bolje rangira na mjestima kao što je Google kako bi se povećao promet vašeg web-mjesta.
Kako promijeniti veličinu slika za WordPress u GIMP-u
Dakle, kako pravilno promijeniti veličinu slika za WordPress?
Možete smanjiti veličinu slikovne datoteke jednostavnim smanjivanjem ukupne veličine slike pomoću skaliranja i nicanje prije nego što ga postavite na svoju web stranicu. Osim toga, možete primijeniti ono što se zove "kompresija” na svoju sliku kako biste dodatno smanjili njezinu veličinu.
GIMP, besplatni uređivač fotografija otvorenog koda, može izvršiti sve ove zadatke dok također izvozi u preporučene formate datoteka "sljedeće generacije" kako bi se dodatno smanjila veličina datoteke vaših slika i poboljšala izvedba vaše stranice.
Korak 1: Otvorite svoju sliku
Da biste započeli s ovim postupkom, otvorite sliku koju želite prenijeti na svoje web mjesto u GIMP. To možete učiniti povlačenjem i ispuštanjem svoje slike sa svog računala u GIMP-ov prozor slike ili možete jednostavno otići na File>Open kada ste unutar GIMP-a.
Ako koristite metodu Datoteka>Otvori, dođite do lokacije slike na vašem računalu iz dijaloškog okvira "Otvori sliku" koji se pojavi i dvaput kliknite slikovnu datoteku kada je pronađete kako biste je otvorili u GIMP-u (ili kliknite gumb "Otvori" u donjem desnom kutu dijaloškog prozora).
Korak 2: Pronađite dimenzije svoje slike
Na samom vrhu GIMP prozora nalazi se značajka koja se zove "Naslovna traka" (crvena strelica na gornjoj slici). Ovdje ćete vidjeti trenutne dimenzije vaše slike (uvećani zeleni okvir na fotografiji). Moja slika je 1920 × 1280 – pri čemu prvi broj, 1920, predstavlja širinu moje slike (u pikselima), a drugi broj, 1280, predstavlja visinu moje slike. Konačne dimenzije slike koje ćete htjeti koristiti za svoju sliku ovisit će o tome gdje u WordPressu namjeravate koristiti sliku, kao i o temi koju koristite.
Za ovaj vodič, promijenit ću veličinu svoje slike na standardnu veličinu od 1200 × 630 piksela koja se preporučuje za slike postova na blogu.
Korak 3: Promijenite omjer slike pomoću alata za izrezivanje
Imajući to na umu, prva stvar koju ću htjeti učiniti je izrezati svoju sliku tako da omjer moje izvorne slike odgovara omjeru širine i visine preporučene veličine. Da bih to učinio, zgrabit ću svoj alat za obrezivanje pritiskom na shift+c na tipkovnici ili klikom na ikonu alata za obrezivanje u GIMP Toolboxu (crvena strelica na gornjoj slici).
Zatim ću u opcijama alata za ovaj alat označiti okvir pokraj "Fiksno" (zelena strelica) i kliknuti padajući izbornik za odabir "Omjer širine i visine" (plava strelica).
Upisat ću “1200:630” da postavim svoj omjer slike u tekstualno polje ispod padajućeg izbornika (žuta strelica). Ovo odgovara omjeru širine i visine slike koju želim da bude moja konačna slika.
Koristeći alat za obrezivanje, sada ću kliknuti i povući mišem preko slike kako bih nacrtao područje izrezivanja. Kad otpustim miš, sve izvan područja izrezivanja bit će zatamnjeno (crvena strelica na gornjoj slici - pod pretpostavkom da je "Označi" označeno u opcijama alata, što obično jest prema zadanim postavkama).
Prema zadanim postavkama moje područje obrezivanja ima vodilice postavljene kao "Središnje linije" (žuta strelica na gornjoj slici). Ovu postavku mogu promijeniti pomoću padajućeg izbornika vodiča pri dnu opcija alata. Na primjer, promijenit ću svoje vodiče u "Pravilo trećina" (zelena strelica). Različite opcije vodiča ovdje temelje se na načelima fotografije, što olakšava kadriranje vaše kompozicije pomoću ovih načela.
Možete lebdjeti mišem iznad bilo koje strane ili kuta područja izrezivanja (tj. označenog područja označenog crvenom strelicom na gornjoj slici), a zatim kliknite i povucite kako biste promijenili veličinu granice područja izrezivanja. Imajte na umu da uvijek možete vidjeti veličinu područja obrezivanja u poljima "Veličina" koja se nalaze u opcijama alata (na gornjoj slici označeno zelenom bojom). Htjet ćete zadržati ukupnu veličinu područja izrezivanja većom od 1200×630 konačne veličine slike.
Također možete kliknuti i povući mišem po sredini područja izrezivanja (crvena strelica) da promijenite položaj izrezivanja na slici.
Kada ste spremni za obrezivanje slike, kliknite jednom unutar područja za obrezivanje i vaša će slika biti izrezana.
Imajte na umu da ako opcija "Izbriši obrezane piksele" u opcijama alata nije označena (zelena strelica na gornjoj slici), granica vaše izvorne slike i dalje će se prikazivati oko vaše slike putem žute točkaste linije (crvena strelica). Možete vratiti izvornu sliku i time poništiti obrezivanje tako da odete na Slika>Prilagodi platno slojevima. Izvest će se samo područje vaše slike unutar granice platna.
Korak 4: Prilagodite sliku
Naša je slika sada obrezana na omjer širine i visine koji želimo, ali ako još jednom pogledate dimenzije naše slike u "Naslovnoj traci", vidjet ćete da je slika 1532 × 804 (označena zelenom bojom i uvećana na gornjoj fotografiji – vaše će dimenzije vjerojatno biti malo drugačije ovisno o tome koliko ste veliko područje obrezivanja nacrtali na svojoj slici). Sada ćemo morati skalirati našu sliku kako bi odgovarala željenim dimenzijama.
Da biste to učinili, idite na Slika>Skaliraj sliku (crvena strelica).
U okviru "Skala slike" koji se pojavi, pod "Veličina slike", provjerite je li ikona karike lanca pored okvira "širina" i "visina" povezana (crvena strelica na gornjoj fotografiji). Zatim promijenite "Širinu" svoje slike na 1200 (zelena strelica). Pritisnite tipku tab. Visina slike automatski će se ažurirati na "630". U odjeljku "Kvaliteta" provjerite je li padajući izbornik "Interpolacija" (plava strelica) postavljen na "NoHalo" ili "LoHalo" za najbolju kvalitetu slike nakon skaliranja. (Za više informacija o interpolaciji, pogledajte moj vodič na tu temu).
Pritisnite gumb "Razmjer" za skaliranje slike (žuta strelica).
Kada je skaliranje dovršeno, provjerite dimenzije slike u naslovnoj traci. Sada biste trebali vidjeti veličinu slike od 1200×630 – točnu veličinu koju želimo! Dakle, što ćemo sada?
Korak 5: Komprimirajte svoju sliku izvozom
Obrezivanje i skaliranje slike smanjilo je veličinu datoteke smanjenjem visine slike s 1920 na 1200 piksela i širine s 1280 na 630 piksela, ali možemo još više smanjiti veličinu slike primjenom kompresije prilikom izvoza slike.
Dakle, sada trebamo izvesti sliku u format datoteke koji će primijeniti kompresiju na sliku bez vidljivog smanjenja kvalitete slike. Iako su JPEG-ovi uvijek dobra opcija, sada je dostupna još bolja opcija: WebP.
Format WebP primjenjuje veću kompresiju od JPEG-a, dok manje utječe na kvalitetu slike nego JPEG. Drugim riječima, dobit ćete sliku boljeg izgleda s manjom veličinom datoteke. Osim toga, WebP formate podržava svih 5 najboljih web preglednika.
Za izvoz u WebP idite na File>Export As (crvena strelica).
Kliknite bilo koju od mapa u odjeljku "Mjesta" (označeno zelenom bojom) da biste odabrali sliku na računalu na koju želite spremiti sliku. Možete jednostavno dvaput kliknuti mapu da biste ušli u nju i vidjeti u kojoj se mapi nalazite pored naslova "Spremi u mapu" (crvena strelica). Zatim preimenujte svoju sliku u ono što želite – samo provjerite jeste li naziv slike završili ekstenzijom ".webp" (plava strelica) kako biste sliku izvezli u WebP format. Kada ste spremni, kliknite “Izvezi” u donjem desnom kutu prozora (žuta strelica).
Zatim će se pojaviti dijaloški okvir "Izvezi sliku kao WebP". Provjerite je li "Lossless" isključen (crvena strelica). Obično postavljam "Image Quality" na 80 (plava strelica - ovo je postotak, pa što je niži postotak, niža će biti kvaliteta slike, ali će biti manja veličina slikovne datoteke). Ako vaša slika ne sadrži prozirnost (tj. logotip bez pozadine), ne morate brinuti o klizaču "Alpha kvaliteta" (zapravo, u eksperimentu koji sam izveo, snizivši alfa kvalitetu sa 100 na 90 zapravo malo povećao veličinu datoteke slike s prozirnom pozadinom s 8.50 kb na 8.52 kb). Padajući izbornik "Vrsta izvora" možete postaviti na "Zadano".
Na vama je hoćete li označiti ili poništiti odabir bilo koje opcije metapodataka, uključujući Exif podatke, ITPC podatke i XMP podatke. Exif i XMP podaci su metapodaci koje obično dodjeljuje vaš fotoaparat i koji opisuju informacije o vašoj fotografiji, poput modela fotoaparata ili vrste objektiva. ITPC, s druge strane, koriste članovi tiska i dodjeljuje informacije vašoj slici kao što su vlasništvo, prava i licenciranje. Ako niste sigurni što učiniti, samo ostavite označene ove opcije.
Isto tako, možete ostaviti neoznačenu opciju "Spremi profil boje" jer će većina preglednika automatski koristiti sRGB prostor boja za prikaz vaše slike, a to je ono što koristi GIMP. Ako koristite drugi profil boja, ovo ostavite označenim. Također, ako ste zabrinuti da se slika neće ispravno prikazati za određene preglednike, ostavljanje označene dodaje samo nekoliko kb ukupnoj veličini slike.
Na kraju, opcija “Save thumbnail” može ostati neoznačena, što će nam dodatno uštedjeti koji kilobajt.
Kliknite "Izvezi" (žuta strelica na gornjoj slici) za izvoz slike u WebP format. Kada se izvezena WebP datoteka uspoređuje s JPEG datotekom iste veličine i također čija je kvaliteta postavljena na "80", WebP slika ima oko 30 kb, ili približno 25%, manju veličinu od JPEG-a.
Korak 6: Prenesite svoju sliku na WordPress
Sada se možete prijaviti na svoje WordPress mjesto i otići do stranice ili objave na koju želite prenijeti svoju sliku ili jednostavno otići do odjeljka "Mediji" koristeći glavnu navigaciju i povući i ispustiti svoju sliku u Media Library. U mom slučaju, otići ću na “Post” koristeći glavnu navigaciju (crvena strelica na gornjoj slici) i kliknuti na “Post na blogu 1” (plava strelica) da uredim tu objavu na blogu.
Zatim ću otvoriti bočnu traku s postavkama objave (crvena strelica) i pomaknuti se prema dolje do odjeljka "Istaknuta slika" i proširiti ovaj odjeljak (plava strelica). Zatim ću kliknuti sliku da je zamijenim svojom novom slikom.
Ići ću na karticu "Učitaj datoteke" (crvena strelica) i moći ću povući i ispustiti svoju sliku sa svog računala u WordPress (plave strelice).
Na kraju ću kliknuti “Postavi istaknutu sliku” da primijenim ovu promjenu (crvena strelica).
Kliknite "Ažuriraj" (crvena strelica) da ažurirate svoju stranicu novom istaknutom slikom.
Ako kliknem "Prikaži objavu", (plava strelica)...
...sada ćete vidjeti novu istaknutu sliku prikazanu na vrhu mog bloga.
To je to za ovaj tutorial! Ako želite saznati više o dizajniranju WordPress web stranice, preporučujem da pogledate moju Tečaj WordPress 6.0 za osobe koje ne kodiraju! Ili, ako želite saznati više o GIMP-u, pogledajte moj GIMP 2.10 Masterclass na Udemyju!
