Optimizacija slike za poboljšanje brzine web stranice i promocija web stranice - Semalt Expert

Slike su jedna od najvažnijih komponenti weba, naravno nakon teksta. Web stranica bez slika obično će biti dosadna i manje motivirajuća za surfere od web stranice koja ima slike.

Također, postoji dosta područja na kojima je upotreba slika obavezna, pa čak i potrebna kako bi se opravdalo mjesto.

Na primjer:

Web mjesta za internetsku trgovinu
Web stranice s portfeljem i prikaz djela
Web lokacije sa slikama na kojima su fotografije "proizvod" - na primjer, vjenčanice, fotografije događaja itd.
Društvene mreže - Sve više studija ukazuje na činjenicu da postovi s fotografijama dobivaju puno više komentara i dijeljenja, za značajan postotak u usporedbi s postovima i statusima bez fotografija

Googleova promocija slika: pravilno korištenje slika

Jeste li investirali i kupili fotografije s web lokacija s fotografijama/spremištima slika ili ste čak sami povećali i fotografirali? Također biste ih trebali maksimizirati u svrhe SEO-a!

Google Image Promotion jedan je od najbolji načini za povećanje prometa na web mjestu u određenim područjima - posebno onim koja se usredotočuju na vizualnu stranu.

Unatoč gore navedenom, nepravilna upotreba slika može više štetiti nego koristiti web lokaciji, pa čak i značajno narušiti napore na promociji. Kada govorimo o upotrebi slika u kontekst organske promocije, važno je imati na umu i nekoliko pravila, nepravilna upotreba slika može značajno pogoršati brzinu web stranice, pa prema tome može imati značajan utjecaj na promociju.

Osnovna pravila za optimizaciju slike:

1. Težina i dimenzije slike

Jedan od važnih parametara za promociju slika na mreži - je težina slike.

S jedne strane, željeli bismo koristiti visokokvalitetne slike, ali s druge strane, to neće ići na štetu brzine web stranice, korisničkog iskustva i promocije. Preporuka je uvijek "optimizirati" (od riječi optimizacija) slike do maksimuma, bez značajnog umanjivanja kvalitete. Da biste to učinili, slijedite sva sljedeća pravila:

Korištenje formata prikladnog za različite situacije (jpg, png, gif i još mnogo toga) - dolje pojedinosti o različitim vrstama formata.
Važno - Postavljanje dimenzija svake slike na web mjestu - Izbjegavajte prikazivanje slike manje od stvarne (fizičke) veličine slike što je više moguće, kako ne biste rasipali nepotrebne resurse. Što je stranica veća i pokretnija, to je veći značaj.
Osiguravanje prilagodljivog podudaranja - ako radite s WordPressom i modernim predloškom, velika je vjerojatnost da ste zatvorili ovaj kutak. Ali ako ne, važno je uvijek osigurati da slike na web mjestu, posebno slike unutar postova, reagiraju i dobro se prikazuju na mobilnim uređajima, tabletima itd.
Maksimalna kompresija težine slike bez značajnog pogoršanja kvalitete (proširenje alata i metoda za to - u nastavku).

Preporučena težina za fotografije

Gotovo svaka slika može se komprimirati u jednom ili drugom stupnju, pa je uvijek korisno koristiti samo dimenzije koje su stvarno potrebne i koje su fizički prikazane na web mjestu, te smanjiti težinu slika što je više moguće. To vrijedi za bilo koju stranicu. Ali posebno za web lokacije s puno slika. Ne postoji jedno pravilo koje je istinito u svim slučajevima, ali preporučljivo je osigurati da težina slike ne prelazi 70-80K, osim ako se radi o galeriji/klizaču od posebne važnosti.

2. Odaberite odgovarajuće ime za sliku

U Google pretraživanju slika uzima se u obzir nekoliko parametara za prikaz slike relevantne za upit. Jedan od njih je naziv datoteke. Preporučuje se potrošiti još jednu sekundu i dati slici ime koje opisuje ono što vidite na slici. Važno je zadržati naziv datoteke na engleskom jeziku i koristiti srednje redove, a ne razmake. Razlog je taj što se Google bolje nosi sa srednjim crticama.

Primjeri lošeg imena za sliku:

DSC2387.jpg

Promoter web stranice.png

Primjer dobrog imena za sliku:

Search-engine-optimizer.jpg

Za one koji se pitate - da, Google zna kako se nositi s engleskim imenima slika i za druge jezike. Kao što zna prevesti nizove pretraživanja i istaknuti prevedene riječi u rezultatima pretraživanja.

3. ALT na sliku

Oznaka alt, što je skraćenica od alternative, parametar je kojem je cilj opisati sliku. Oznaka alt definirana je u sustavu upravljanja/HTML kodu za svaku sliku pojedinačno, a njezina je izvorna funkcija služiti slijepima i osobama s invaliditetom koji koriste poseban softver koji skenira te oznake i čita napisano.

Tehnički u kodu to izgleda ovako:

<imgsrc="tree.jpg" alt="tree">

Osim važnosti oznake u smislu pristupačnosti web mjesta, ona ima važnost i za tražilice. Oznaka alt pomaže tražilicama da razumiju što je predmet slike (zajedno s drugim stvarima poput naziva datoteke, konteksta stranice na kojoj se nalazi, itd.), A također prirodno utječe na pretraživanje slika na Googleu.

Također, alt oznaka dio je optimizacije na stranici za sve. Također, kada iz slike izlazi vanjska veza, alt oznaka služi kao vrsta sidra teksta ("sidreni tekst") za sliku.

Kako mogu provjeriti ima li slika oznaku ALT?

Postoji nekoliko načina:

Cijeli put - kliknite mišem na sliku -> desni klik -> provjerite element (formulacija se razlikuje u različitim preglednicima).
Željeli bismo potražiti oznaku unutar naredbe <img> kako je prethodno prikazano.
Upotrijebite dodatak pod nazivom Web Developer (izvrstan za mnoge druge zadatke). Proširenje nam omogućuje pritiskom gumba da prikažemo sve alt oznake koje slike imaju na određenoj stranici.

Vrištava žaba - Koristite žabu prikladnu kada želimo temeljito skenirati slike na web mjestu.

Postupak je unos URL-a za skeniranje, a zatim kliknite karticu Slike.

Tamo ćemo vidjeti popis slika na web mjestu, koje se mogu sortirati po nekoliko parametara:

Slike težine veće od 100 kb
Slike bez ALT oznaka
Slike s ALT oznakama koje sadrže više od 100 znakova (i vjerojatno biste ih trebali malo skratiti)

Postoji naravno više načina i više dodataka raznih vrsta, ali čini mi se da sam tu temu obrađivao u smislu točke, po stranici i opsežnog pregleda stranice.

Googleova promocija slike - savjeti za optimizaciju ALT oznaka

Ne biste trebali forsirati ključne riječi, već pokušajte opisati ono što vidite na slici.

Ako je moguće kombinirati opis slike + relevantne ključne riječi da se prirodno ističu - kakva korist.
Ne treba pretjerivati s opisom, alt oznaka od 2-5 riječi više je nego dovoljna.
Preporučuje se da alt oznaka i naslovna oznaka slike nisu identične.
Za trgovačka mjesta - ako proizvod ima broj modela, preporučuje se da ga koristite u alt oznaci (da bi se pojavio u Googleovim pretraživanjima slika).

Nema potrebe za korištenjem altova za pozadine/ukrasne slike - čak se preporučuje da to ne učinite, tako da Google neće sumnjati u to da pokušavate pretjerano optimizirati.

4. Oznaka naslova slike

Natpisi na slici svojevrsni su opisi koji se mogu vidjeti pomicanjem miša preko slike. Mnogi ih ljudi brkaju s ALT oznakama.

Naslovi slika još su jedan pokazatelj relevantnosti i predmeta slike koji mogu pomoći Googleu da shvati o čemu slika govori i poboljšati ljestvicu pretraživanja slika. Za razliku od oznake ALT, naslovna oznaka obično će biti opisnija i malo duža, a svrha joj je opisati surferu ono što se vidi na slici i/ili ono što će doći nakon klika na sliku. Web stranice s vijestima često koriste ovu oznaku.

Evo kako to izgleda u kodu:

5. Vrste slika i ekstenzije datoteka

Postoji nekoliko uobičajenih formata za korištenje slika na mreži. Ukratko ću proširiti svaku od njih:

JPEG/JPG - Najstariji i vjerojatno najčešći format slika na webu. Prednost JPG formata je mogućnost prikaza slika relativno visoke kvalitete i male težine. JPG slike ne podržavaju neprozirnost.
GIF - GIF format također je s nama već duže vrijeme, počevši od dana kada su još postojale diskete. GIF-ovi podržavaju samo 256 boja, tako da su formata slike slabije kvalitete i prvenstveno su namijenjeni upotrebi kao ikone ili ukrasi raznih vrsta. Također, GIP format podržava animaciju, pa čak je i Facebook nedavno počeo podržavati ovaj format u feedu.

U krajnjoj liniji - GIF-ovi nisu namijenjeni prikazivanju slika, posebno kada je riječ o kvaliteti slike, već jednostavnijim ikonama, animacijama i elementima.

PNG - Ovo je (relativno) novi format u grupi. Glavne prednosti PNG datoteka - veća kvaliteta u odnosu na JPG i GIF te podrška za transparentnost. PNG datoteke podijeljene su u 2 formata - PNG24 koji je kvalitetniji (i težina slike u skladu s tim) i PNG8 koji je najekonomičniji od svih.

Dostupno je puno drugih formata slika, ali oni su manje relevantni za upotrebu na web mjestima.

Savjet - Za one koji koriste Photoshop, uvijek preporučujem usporedbu težina slika pomoću Save for web i uređaja između različitih formata (prije spremanja datoteke postoji pregled težine slike).

Pravila za odabir formata slika

U većini slučajeva posao će obaviti JPG format. JPG slike omogućuju visoku kvalitetu i malu težinu datoteke.
Nemojte koristiti GIF-ove u velikim datotekama koje sadrže mnogo detalja - težina datoteke bit će velika. Format nije dizajniran za to i prikladniji je za upotrebu s malim i jednostavnim elementima.
Ako transparentnost igra važnu ulogu - upotrijebite PNG format. Uvijek je poželjno usporediti PNG24 i PNG8 kako bi se težina slika smanjila na najmanju moguću mjeru.

6. Pravilna upotreba minijatura

Sličice (pregledi) važna su, pa čak i kritična komponenta nekih web mjesta - posebno web mjesta s galerijom i web mjesta za trgovinu. Minijature ("Minijature" Google Prevoditelja) mogu s jedne strane biti sjajne, ali s druge strane značajno sabotiraju web mjesto i korisničko iskustvo.

Najkritičnija stvar u korištenju ovih slika je održavanje razumne kvalitete i što manje težine. Na velikim trgovinskim web-mjestima koja se za prikaz stranica kategorija i pregleda proizvoda oslanjaju na sličice, ova je činjenica posebno važna. Jeste li znali da svaka sekunda odgode učitavanja web stranice košta Amazon Amazon 1,6 milijardi dolara godišnje? Većina vremena učitavanja na takvim web mjestima su slike.

Istina, većina nas može samo sanjati o postojanju mjesta takve veličine. Ali znate - velike promjene počinju odozdo prema gore, a male. Što se prije obratimo, to bolje.

Savjeti za pravilno korištenje minijatura

Preporučuje se stvaranje sličice za sličicu i veće slike za samu stranicu proizvoda. Ne koristite veliku sliku kao minijaturu! Ovo će učitati nekoliko puta više od opterećenja web mjesta, posebno kada na jednoj stranici ima mnogo sličica. U raznim CMS sustavima automatski ste izuzeti od ovog problema.

Što se tiče pravila za optimizaciju slike, preporučljivo je više ulagati u velike slike, a ne u minijature. Na primjer - ne uključuju minijature u Sitemap slike (proširenje dolje), u nekim slučajevima za njih nemojte ni postavljati ALT oznake. Ambicija je da Google indeksira velike slike na štetu minijatura, a ne obrnuto.

Preporučuje se postaviti Naslov slike na Sličice, koji opisuju proizvod u nekoliko riječi i općenito što će surfer vidjeti nakon klika na sliku.

Ako svaka stranica kategorije proizvoda ima mnogo proizvoda (recimo preko 30), preporučuje se uporaba skripte Lazy Load koja učitava slike samo kad se surfer pomakne do područja na kojem se nalaze.

7. Upotreba omatanja teksta

Slike obično služe tekstu, a ne obrnuto. Ali što se tiče optimizacije slike i Googleove promocije slika, a ako je web mreža koja se temelji na slikama, vrlo je vrijedno ne zanemariti pitanje tekstova, čak iako su to osnovne stvari.

Za one koji žele zadržati što čišći i minimalistički izgled (na primjer na web mjestu portfelja fotografa), preporučuje se da na svakoj stranici koja ima sliku barem definira sljedeće:

H1 Prema predmetu slike
Kratki opis (čak 10-20 riječi je bolje nego ništa) na slici, po mogućnosti s relevantnom ključnom riječi ili dvije
Naslov i opis relevantni su naravno (u slučaju da se radi o fizičkoj stranici, a ne o slici koja se pojavi iz galerije).
Naslovi alt i fotografija - toplo preporučljivo u ovom slučaju.

8. Sitemap za fotografije

Sitemap slike (image-sitemap.xml) pomaže Googleu da bolje čita i indeksira naše slike na web mjestu. Slično kao i standardna XML karta web-mjesta, karta web-mjesta slika može se poslati pomoću Search Console-a u području mapa web-mjesta.

Dodajte Sitemap u Search Console

Sitemap slika posebno je koristan pri korištenju svih vrsta galerija sa skriptama i raznim efektima - koje Google uobičajeno teško skenira.

Postoje neki parametri za upotrebu sitemapa slika.

Kako stvoriti kartu web stranice?

WordPress - Kao i obično ako radite na WordPressu, život vam je lak. Dodatak Udinra All Image Sitemap zatvara kut za vas. Sve što morate učiniti je instalirati dodatak, označiti neki V u postavkama, stvoriti kartu web stranice i pokrenuti je na Google putem Search Consolea.

Na bilo kojoj drugoj platformi - ovisi. Ako ne postoji rješenje izvan okvira poput dodatka itd., To se može učiniti pomoću Screaming Frog.

Žaba vam može pomoći da lako napravite kartu web mjesta sa slikama. Jedini problem - neće se automatski ažurirati (za razliku od dodatka) i mora se povremeno osvježavati.

Kako to činiš?

Mora se izvršiti potpuno skeniranje tražene stranice, a zatim u gornjem izborniku softvera idite na Sitemaps -> Create Images Sitemap. Dobit ćete košer XML datoteku za upotrebu i pokretanje putem Search Consolea.

9. Potaknite dijeljenje fotografija

Ako se možete pohvaliti velikom primjenom izvornih slika (bilo da se radi o fizičkoj ili grafičkom elementu), a slike su glavna stvar ili barem važan dio web stranice, vrlo je korisno potaknuti korisnike da slike dijele na društvenim mrežama mreže i olakšati im to.

Kao i obično, imam praktične savjete za WordPress platformu, u ostalim sustavima preporučujem upotrebu programera ili provjerite postoji li za to namjenski dodatak.

WordPress u tu svrhu ima 2 lijepa dodatka:

Social Image Hover za WordPress - plaćeni dodatak (em; lak za nokte - 17 USD).
Pinterest Prikvači gumb - dodatak koji dodaje malu Pinterest ikonu fotografijama na web mjestu.

10. Alati za smanjenje i optimizaciju slike

TinyPNG - izvrsna usluga koja omogućuje komprimiranje slika na mreži s posebno prikladnim sučeljem za povlačenje. Oni također imaju API koji vam omogućuje rad u većim količinama i automatski, a također izvrstan dodatak za WordPress koji vam omogućuje komprimiranje svih slika na web mjestu - zahtijeva upotrebu njihovog API-ja (besplatno za 500 slika mjesečno).

Fotosizer - lijep softver za radnu površinu koji vam omogućuje uređivanje slika u velikim količinama - ne samo kompresiju već i smanjenje dimenzija, dodavanje vodenih žigova i raznih efekata na slike i mnoge druge lijepe značajke.

Zaključak

Upravo ste shvatili važnost optimizacije slika web stranice. Međutim, ako želite znati trenutno stanje na svojoj web lokaciji, to možete učiniti besplatno, zahvaljujući Semaltovoj SEO konzultacije.

Semalt će vam pomoći da prepoznate SEO probleme povezane s vašom web stranicom. Uz to, sa stručnjacima Semalt možete to lako poboljšati izvedbu vašeg internetskog poslovanja po nižoj cijeni.

mass gmail