Google-ov ažurirani interfejs za pretragu slika nije jedini alat koji stavlja akcenat na vizualni sadržaj i otkrivanje proizvoda.
O performansama interneta i slikama može se reći puno toga. Ovaj tekst ima za cilj da pruži pregled ključnih aspekata optimizacije slika, kako bi vam pomogao u vašim SEO naporima, od brzinskih pogodaka do nešto složenijih tehnika.
Sadržaj
Zašto je pretraga slika važna?
Iako ne postoje tačni zvanični brojevi, Google je izjavio da svakoga dana stotine miliona ljudi koriste Google Images, kako bi vizuelno otkrili i istraživali sadržaj na internetu. Sudeći po Moz-u, pretraga slika bi predstavljala 27% svih upita generisanih u prvih 10 svetskih pretraživanja interneta:
Pre otprilike 2 godine, Google je ažurirao „View image“ opciju iz pretrage slika, pretvorivši je u „Visit page“. Kao rezultat tog čina, analitičke platforme počele su da beleže porast sesija posebno pokrenutih pretragom slika i vidljivošću sadržaja na glavnim stranicama (umesto slučajnih datoteka sa slikama bez konteksta). Osim što podržavaju sadržaj i poboljšavaju korisničko iskustvo, slike su važan izvor saobraćaja na sajtu i ne treba ih zanemariti.
Kako pripremiti slike za web sajt?
Pre nego što se slike upload-uju na web sajt potrebno ih je pripremiti. Odabrati format, veličinu slike i kompresovati je.
Odabir formata slike
Veličina dimenzije slike može nesrazmerno uticati na vreme učitavanja stranice, tako da je važno da je ispravite. JPG formati su obično prilagođeniji za SEO nego PNG format, posebno ako vam nisu potrebne transparentne pozadine, jer nude bolji nivo kompresije. Logotipi i ostale kompjuterski generisane grafike sa visokom rezolucijom obično mogu da koriste SVG format, koji je baziran na vektorima (proverite da li vaš server kešira, minimizuje i kompresuje taj format). GIF format treba da bude rezervisan za jednostavne animacije koje ne zahtevaju široke skale boja (ograničene su na 256 boja). Za velike i duge animirane slike možda je najbolje koristiti mp4 video format.
Ono što je najvažnije jeste stvarna veličina (u kb) samih slika: uvek se trudite da ih sačuvate ispod 100kb ili manje, kad god je to moguće. Ako se mora koristiti veća veličina slike iznad preklopa (velike baner slike na primer), može pomoći da se slike sačuvaju kao progresivni JPG-ovi, gde se slike mogu početi progresivno prikazivati tokom učitavanja (prvo se pojavljuje zamagljena verzija slike i postepeno se izoštrava, kako se preuzima više bajtova). Zato počnite sa odabirom najboljeg formata za vaše potrebe, a zatim za njih odaberite najbolja podešavanja.
Kako da ubrzate vaš sajt i smanjite vreme potrebno za učitavanje web sajta?
Iako alati za reviziju Google Lighthouse i PageSpeed Insights preporučuju još specifičnije formate kompresije (formate kao što su JPEG 2000, JPEG XR i WebP), oni još uvek nisu kompatibilni sa svim pretraživačima. Neki dodaci za WordPress nude WebP konverziju kada posetioci koriste odgovarajuće pretraživače kao što je dodatak webp express koji radi preko GD ili iMagic skripte koja bi trebala biti instalirana na vašem hosting nalogu. Kontaktirajte podršku hostinga i zamolite ih da vam aktiviraju GD ili iMagic skriptu.
Koja je rezolucija slike najbolja za web sajt
Što se tiče dimenzija (visina i širina slike), pobrinite se da slike ne budu šire od najpopularnijih rezolucija ekrana na radnoj površini (koja je obično 1920 piksela u širini. Inače će ih pretraživači bespotrebno skalirati) i da vaš CSS čini slike prilagodljivim (slike se automatski prilagođavaju veličini ekrana ili prozora). U zavisnosti od vizualnih potreba vašeg sajta, to može značiti spremanje različitih verzija iste slike u različitim dimenzijama, kako bi se dinamički servirala najoptimizovanija slika, na osnovu korisnikovog ekrana (mobilni uređaj, tablet, raširena slika na desktopu itd.).
Nekoliko popularnih alata za kompresiju slika:
- GIMP – multiplatformski, prenosni uređivač slika.
- TinyPNG – koristi pametne tehnike kompresije kako bi smanjio veličinu datoteka JPG i PNG datoteka.
- Smush – dodatak za kompresiju i optimizaciju slika za WordPress.
- MinifyWeb – besplatni servis za kompresovanje web datoteka online.
Kako kompresovati slika za web sajt
Kompresovanjem slika smanjujemo „težinu“ slike. U najboljem slučaju sliku je potrebno smanjiti ako je to moguće ispod 100kb. Baner slike ne mogu biti ispod 100kb zbog većih dimenzija. Prosečna „težina“ je 150kb-180kb.
Kako kompresovati slike pomoću Photoshop-a
Preko opcije Save for web možete da sačuvate sliku, odnosno da je kompresujete.
Možete da odaberete i format koji želite i da vidite kolika je težina nakon kompresovanja. Takođe možete da povećavate i smanjujete kvalitet kompresije kao i da podešavate dodatno veličinu slike.
Kako da kompresujete slike ako nemate Photoshop
Postoje online alati kojima možete smanjiti i veličinu slika i kompresovati ih.
Online alati za smanjivanje veličine slika:
Online alati za kompresovanje slika:
Pravilno učitavanje slika na vašim stranicama može ubrzati učitavanja stranica
Slike ne samo da mogu da uspore stranicu zbog formata datoteke, veličine datoteke i količine, već mogu usporiti i ostatak sajta na osnovu načina učitavanja.
Iako je najnoviji HTTP/2 mrežni protokol poboljšao proces učitavanja više slika odjednom, „lenjo učitavanje“ („Lazy Load“) slika, naročito donjeg dela (posebno kod velikih slika), može u nekim slučajevima poboljšati performanse (posebno dugački medijski članci ili galerije slika). Tehnika Lazy Load omogućava da stranica završi sa učitavanjem tek kada posetilac skroluje stranicu. Iako ova tehnika može poboljšati brzinu stranice, može negativno uticati na indeksiranje slike, ukoliko se ne sprovede pravilno.
WordPress dodatak koji ima opciju Lazy Load je Smush koji ujedno služi i za dodatno kompresovanje slika. Ovaj dodatak smo spominjali na samom početku ovog teksta.
Smanjite svoje slike na njihovu stvarnu veličinu ekrana: potrudite se da ne prikazujete veće slike nego što je potrebno da se pravilno prikažu u prozoru pretraživača, jer je to još jedno područje optimizacije koje se često zanemaruje. Stranice često učitavaju slike koje zatim pretraživači smanjuju kako bi se prilagodili konfiguracijama ekrana korisnika: važno je da se ne prikazuju slike koje su šire od prozora koji korisnik može da prikaže, kako biste uštedeli na nepotrebnim bajtovima.
U web pretraživaču kliknite desnim tasterom miša na sliku, kliknite na opciju Inspect i pređite mišem preko elementa slike kako biste videli originalnu (ili „prirodnu“) dimenziju slike, zajedno sa smanjenom verzijom pretraživača. U idealnom slučaju te dve verzije bi trebale biti što je bliže moguće.
Pravilno imenovanje i opisivanje slika za SEO
Jedna od najlakših i često zanemarenih mogućnosti za optimizaciju su stvarna imena fajlova slika. Oni bi trebali da sadrže nekoliko pažljivo odabranih reči – u idealnom slučaju to su ključne reči za koje bi slika mogla da se rangira – uz istovremeno izostavljanje zaustavnih reči (veznici, prilozi, predlozi) i odvajanje ključnih reči crticama (na primer: IMG-50032 mogla bi se preimenovati u novi-sad-noću.jpg).
Atributi alt i naslova slike (od <img> HTML oznake) su sledeća najjednostavnija podešavanja, koja ne samo da pomažu da se slike bolje rangiraju u pretraživanju, već i grade relevantnost stranice i poboljšavaju korisničko iskustvo, što su sve faktori rangiranja. U slučaju linkova sa slikama, ti atributi takođe pružaju kontekst pretraživačima u vezi sa odredišnom stranicom, dodatno im pomažući da se rangiraju. Za razliku od imena datoteka, napišite te atribute na gramatički koherentan i koncizan način: alt atributi se glasno reprodukuju softverom za pristupačnost, a čitači ekrana i atributi naslova pojavljuju se kada posetioci pregledaju sliku, tako da njih nemojte pretrpavati ključnim rečima i koristite varijacije.
Za web shopove i slike proizvoda često je dobra ideja da dodate SKU, ISBN ili brojeve modela alt atributima, jer ponekad tražimo vrlo specifične proizvode. Imajte na umu da natpisi i ključne reči na stranici u okruženju teksta takođe pomažu pretraživačima da dobiju više konteksta za slike i poboljšavaju njihovu sposobnost za rangiranje.
Imajte na umu da su oznake HTML naslova stranice domaćina takođe sada prikazane u rezultatima pretrage slika, tako da biste trebali osigurati da one makar malo budu relevantne za sliku, ako je to moguće.
Zaključak
Kada su u pitanju slike, priča je šira nego što možemo da vidimo golim okom. Često potcenjene i zanemarene, slike na internetu dobijaju sve veću pažnju, a njihov značaj raste iz različitih razloga, u rasponu od čisto podržanog korisničkog iskustva i sadržaja, do omogućavanja korisnicima da vizualno pronađu više proizvoda, direktno iz same pretrage slika. Optimizacija i implementacija mogu se uveliko razlikovati zavisno od vaše vrste poslovanja i poslovnih ciljeva, stoga započnite sa krajnjim zadatkom i dogovorite najbolju strategiju sa svojim timom, kako biste pridobili što je više (transackijskog) saobraćaja moguće!
