Prvi korak pred pričetkom izdelave spletne strani. Ko imamo vse grafike lažje ocenimo kako bo stran izgledala na koncu.
- HERO grafike – fullwidth grafike ; desktop priprava 4k ali 2560, pogojno 1920 width. Mobile, npr. 750×1334. Če gre za celozaslonsko se višina sekcije v urejevalniku vsebin nastavi na 100vh, drugače ustrezno manj oz. se pusti, da sama grafika “naredi višino”.
- Ostale grafike se pripravijo v skladu z izrisom spletne strani oz. na podlagi uporabljene predloge spletne strani.
- Izdelki / woocommerce, tam do 1000x1000px (če ne gre toliko, ker so orginal grafike manjše se naredi max kar dopušča original grafika):
- Potrebno je paziti, da so slike izdelkov čim bolj podobne, izdelki slikani iz enake razdalje, enaka ozadja (predlagam, da niso prosojna, ni nujno), enake dimenzije.
Primer trgovine, ko grafike niso ok
- prva in tretja 600×600 grafika, sredinska 600×525:
- Da je ozadnje belo “ni najbolj pomembno”, če ni izgleda nekako tako, ko grafiko z transparentnim ozadjem odpreš na izdelku:
Orodij za urejanje fotografij je več, jaz uporabljam adobe illustrator, seopix in picflow (verjetno gre vse naridit v canvi 😀 )
- Illustrator:
- template npr. 650×650:
- vstavljena grafika 600×525:
(če bi moral grafiko samo obrezati bi bil prvi korak kar https://www.seopix.io/ )
- Grafiko pretvorim v webp ( https://picflow.com/convert/jpg-to-webp ) in ji malo zmanjšam kvaliteto. Zakaj? Grafike v webp so praviloma (ne vedno) manjše velikosti, tudi vsa orodja za testiranje hitrosti spletne strani predvidevajo “moderne” tipe grafik.
Rezultat: iz 12 KB na 3 KB: v praksi smo torej prihranili 3/4 velikosti. Če se prihrani 1/2 generalno na celotni spletni strani to pomeni hitrejše delovanje spletne strani, manj podatkov na disku strežnika, hitrejše in učinkovitejše arhiviranje, itd.
Dejstvo: Grafike bodo malo slabše kvalitete ampak za splet je “ok” tako. Če se vam zdi, da je 80% v konverziji v webp premalo, probajte z višjim %.
Kako opredmetiti naloženo grafiko s SEO podatki (za google)? Na strani Grafike-SEO (klik)