Kujutise optimeerimine veebisaidi kiiruse ja veebisaidi edendamise parandamiseks - Semalt Expert

Pildid on veebi üks olulisemaid komponente, järgides muidugi teksti. Piltideta veebisait on surfajatele tavaliselt igav ja vähem motiveeriv kui piltidega sait.
Samuti on üsna palju valdkondi, kus piltide kasutamine on saidi põhjendamiseks kohustuslik ja isegi vajalik.
Näiteks:
- Veebikaubanduse saidid
- Portfellisaidid ja teoste väljapanek
- Pildisaidid, kus fotod on "toode" - näiteks pulmakleidid, ürituste pildistamine jne.
- Sotsiaalsed võrgustikud - üha rohkem uuringuid viitavad asjaolule, et fotodega postitused saavad palju rohkem kommentaare ja jagamisi, märkimisväärse protsendi võrra võrreldes fotodeta postituste ja olekutega
Google'i pildiedendus: piltide õige kasutamine
Kas olete investeerinud ja ostnud fotosid fotolehtedelt/pildihoidlatest või olete isegi ise suurendanud ja pildistanud? Samuti peaksite need maksimeerima SEO eesmärkidel!
Google Image Promotion on üks parimad viisid veebisaidi liikluse suurendamiseks teatud piirkondades - eriti nendes, mis keskenduvad visuaalsele poolele.
Vaatamata ülaltoodule võib piltide ebaõige kasutamine saidile rohkem kahju teha kui kasu ja isegi oluliselt kahjustada reklaamiedendusi. Kui räägitakse piltide kasutamisest orgaanilise reklaamimise kontekstis, on oluline meeles pidada ka mõningaid reegleid, kuna piltide ebaõige kasutamine võib oluliselt kahjustada saidi kiirust ja võib seetõttu reklaamimisele olulist mõju avaldada.
Pildi optimeerimise põhireeglid:
1. Kujutise kaal ja mõõtmed
Üks oluline parameeter piltide võrgus reklaamimiseks on pildi kaal.
Ühelt poolt tahaksime kasutada kvaliteetseid pilte, kuid teisalt ei tule see saidi kiiruse, kasutajakogemuse ja reklaamimise arvelt. Soovitatav on alati "optimeerida" (alates sõnast optimeerimine) pilte maksimaalselt, ilma et see kvaliteeti oluliselt kahjustaks. Selleks järgige kõiki järgmisi reegleid:
- Erinevatesse olukordadesse sobiva vormingu kasutamine (JPG, Png, GIF ja muu) - täielik teave erinevat tüüpi vormingute kohta allpool.
- Tähtis - iga pildi mõõtmete määramine saidil - vältige võimalikult palju pildi tegelikust (füüsilisest) suurusest väiksema pildi kuvamist, et mitte raisata tarbetuid ressursse. Mida suurem ja liikuvam on sait, seda suurem on selle tähtsus.
- Reageeriva sobitamise tagamine - kui töötate WordPressi ja kaasaegse malliga, on tõenäoline, et olete selle nurga sulgenud. Aga kui ei, siis on oluline alati veenduda, et saidil olevad pildid, eriti postituste sees olevad pildid, oleksid reageerivad ja oleksid hästi kuvatud mobiilseadmetes, tahvelarvutites jne.
- Maksimaalne pildi kokkusurumine ilma kvaliteeti oluliselt halvendamata (laiendamine tööriistade ja meetodite jaoks - allpool).
Fotode soovitatav kaal
Peaaegu kõiki pilte saab ühel või teisel määral tihendada, seega on alati soovitatav kasutada ainult neid mõõtmeid, mida tegelikult vaja on ja mis saidil füüsiliselt kuvatakse, ning vähendada piltide kaalu nii palju kui võimalik. See kehtib kõigi saitide kohta. Kuid eriti paljude piltidega saitide jaoks. Kõigil juhtudel pole ühte reeglit, mis on tõsi, kuid on soovitatav veenduda, et pildi kaal ei ületaks 70–80 K, välja arvatud juhul, kui tegemist on erilise tähtsusega galerii-/liugurpildiga.
2. Valige pildile sobiv nimi
Google'i piltide otsimisel võetakse päringu jaoks asjakohase pildi kuvamiseks arvesse mitmeid parameetreid. Üks neist on faili nimi. Soovitatav on veeta veel sekund ja anda pildile nimi, mis kirjeldaks pildil nähtut. Oluline on hoida faili nimi inglise keeles ja kasutada keskmisi ridu, mitte tühikuid. Põhjus on see, et Google tuleb keskjoonte abil paremini toime.
Pildi halva nime näited:
DSC2387.jpg
Saidi promoter.png
Kujutise hea nime näide:
Otsingumootori optimeerija.jpg
Neile, kes imestavad - jah, Google teab, kuidas tulla toime ka teiste keelte ingliskeelsete pildinimedega. Kuna ta teab, kuidas otsingu stringe tõlkida ja tõlgitud sõnu otsingutulemites esile tõsta.
3. ALT pildile
Alt-silt, mis on alternatiivi lühend, on parameeter, mille eesmärk on pilti kirjeldada. Alt-silt on juhtimissüsteemis/HTML-koodis määratletud iga pildi jaoks eraldi ja selle algne funktsioon on pimedate ja puuetega inimeste teenindamine, kes kasutavad spetsiaalset tarkvara, mis neid silte skannib ja kirjutatut loeb.
Tehniliselt näeb kood välja nii:
<imgsrc="puu.jpg" alt="puu">
Lisaks märgendi olulisusele veebisaidi juurdepääsetavuse seisukohalt on see oluline ka otsingumootorite jaoks. Alt-silt aitab otsingumootoritel mõista, mis on pildi teema (koos muude asjadega, nagu failinimi, sellel oleva lehe kontekst jne) ning see mõjutab loomulikult ka pildiotsingut Google'is.
Samuti on alt-silt osa lehe optimeerimiseks kõigeks. Samuti, kui pildist väljub väline link, toimib alt-silt pildi jaoks teatud tüüpi tekstiankruna ("ankurtekst").
Kuidas kontrollida, kas pildil on ALT-silt?
Neid on mitmel viisil:
- Kogu tee - klõpsake hiirega pilti -> paremklõpsake -> kontrollige elementi (sõnastus on erinevates brauserites erinev).
- Tahaksime silti otsida käsust <img>, nagu varem illustreeritud.
- Kasutage pistikprogrammi nimega Veebiarendaja (suurepärane paljude muude ülesannete jaoks). Laiendus võimaldab meil ühe nupuvajutusega kuvada kõiki alt-silte, mis piltidel konkreetsel lehel on.
Karjudes konn - Kasutage sobivat konna, kui soovime saidil pilte põhjalikult skannida.
Protsess on sisestada skannimiseks URL ja seejärel klõpsata vahekaardil Pildid.
Seal näeme saidi piltide loendit, mida saab sortida mitme parameetri järgi:
- Kujutised kaaluga üle 100 kb
- ALT-siltideta pildid
- ALT-siltidega pildid, mis sisaldavad rohkem kui 100 tähemärki (ja neid peaksite tõenäoliselt veidi lühendama)
Muidugi on rohkem erinevaid viise ja erinevaid pistikprogramme, kuid mulle tundub, et olen seda teemat siin käsitlenud punktivajaduse, lehe kohta ja saidi põhjaliku ülevaatega seoses.
Google'i reklaamiedendus - näpunäited ALT-siltide optimeerimiseks
Te ei tohiks sundida märksõnu, vaid proovige kirjeldada pildil nähtut.
- Kui on võimalik ühendada pildikirjeldus + asjakohased märksõnad, et loomulikult silma paista - mis kasu.
- Kirjeldusega pole vaja liialdada, 2–5-sõnaline alt-silt on enam kui piisav.
- Soovitatav on, et pildi alt- ja pealkirja silt ei oleks identsed.
- Kaubanduslike saitide puhul - kui tootel on mudeli number, on soovitatav seda kasutada alt-märgendis (kuvamiseks Google'i pildiotsingutes).
Taustapiltide/dekoratiivsete piltide jaoks ei ole vaja kasutada alte - isegi seda on soovitatav mitte teha, et Google ei kahtlustaks, et proovite üle optimeerida.
4. Pildi pealkirja silt
Pildiallkirjad ehk pealdised on omamoodi näpunäited, mida saab näha hiire liigutamisel pildi kohal. Paljud inimesed ajavad need ALT-siltidega segi.
Piltide pealkirjad on veel üks viide pildi asjakohasusele ja teemale, mis aitab Google'il mõista, millest pilt räägib, ja parandada pildiotsingu paremusjärjestust. Erinevalt ALT-märgendist on pealkirja silt tavaliselt kirjeldavam ja veidi pikem ning selle eesmärk on kirjeldada surfarile seda, mida pildil nähakse ja/või mis tuleb pärast pildil klõpsamist. Uudistesaidid kasutavad seda silti sageli.
Koodis näeb see välja selline:
<img class="alignnone wp-image-1323 size-full" title="Pealkirja pildi näide">
5. Pilditüübid ja faililaiendid
Piltide võrgus kasutamiseks on mitu levinud vormingut. Laiendan lühidalt kõiki neist:
- JPEG/JPG - Veebis olev piltide vanim ja tõenäoliselt kõige levinum vorming. JPG-vormingu eeliseks on võime kuvada suhteliselt kõrge kvaliteediga ja väikese kaaluga pilte. JPG-pildid ei toeta läbipaistmatust.
- GIF - GIF-vorming on meiega olnud ka juba mõnda aega, alates päevadest, kui veel olid disketid. GIF-id toetavad ainult 256 värvi, seega on need halvema kvaliteediga pildivorming ja mõeldud peamiselt mitmesuguste ikoonide või kaunistustena kasutamiseks. Samuti toetab GIP-vorming animatsiooni ja isegi Facebook on hiljuti hakanud seda vormingut voos toetama.
Alumine rida - gifid pole mõeldud piltide kuvamiseks, eriti pildikvaliteedi osas, vaid lihtsamatele ikoonidele, animatsioonidele ja elementidele.
- PNG - See on (suhteliselt) uus formaat kamp. PNG-failide peamised eelised - kõrgem kvaliteet võrreldes JPG ja GIF-iga ning läbipaistvuse tugi. PNG-failid on jagatud kaheks vorminguks - PNG24, mis on parema kvaliteediga (ja vastavalt ka pildi kaal), ja PNG8, mis on neist kõigist kõige ökonoomsem.
Saadaval on palju muid pildivorminguid, kuid need on veebisaitidel kasutamiseks vähem asjakohased.
Näpunäide - Neil, kes kasutavad Photoshopi, soovitan piltide kaalu võrrelda funktsiooni Salvesta veebi ja seadmete jaoks erinevate vormingute vahel (enne faili salvestamist on pildi kaalu eelvaade).
Rusikareeglid pildivormingute valimiseks
- Enamasti täidab seda tööd JPG-vorming. JPG-pildid võimaldavad kvaliteetset ja väikest kaalu.
- Ärge kasutage GIF-faile suurtes failides, mis sisaldavad palju üksikasju - faili kaal on suur. Vorming pole selleks loodud ja sobib pigem väikeste ja lihtsate elementidega kasutamiseks.
- Kui läbipaistvusel on oluline roll - kasutage PNG-vormingut. Alati on soovitatav võrrelda PNG24 ja PNG8, et vähendada piltide kaalu võimalikult madalale.
6. Pisipiltide õige kasutamine

Pisipildid (eelvaated) on mõne saidi - eriti galeriipõhiste ja kaubanduslike saitide - oluline ja isegi kriitiline komponent. Pisipildid (Google'i tõlke "pisipildid") võivad olla ühelt poolt suurepärased, kuid teiselt poolt oluliselt saiti ja kasutajakogemusi saboteerida.
Nende piltide kasutamisel on kõige olulisem säilitada mõistlik kvaliteet ja kaal võimalikult madalal. Suurtes kaubandussaitides, mis loovad kategoorialehtede ja toodete eelvaadete kuvamiseks pisipildid, on see fakt eriti oluline. Kas teadsite, et iga sekund viivitust saidi laadimisel maksab Amazonile 1,6 miljardit dollarit aastas? Suur osa selliste saitide laadimisajast on pildid.
Tõsi, enamik meist võib sellise ulatusega saidi olemasolust ainult unistada. Aga teate - suured muutused algavad alt üles ja väikesed. Mida varem me pöördume, seda parem.
Nõuandeid pisipiltide õigeks kasutamiseks
On väga soovitatav luua pisipilt pisipildile ja suurem pilt tootelehele endale. Ärge kasutage pisipildina suurt pilti! See laadib mitu korda saidi koormuse, eriti kui ühel lehel on palju pisipilte. Erinevates CMS-süsteemides olete sellest probleemist automaatselt vabastatud.
Pildi optimeerimise reeglite osas on soovitatav investeerida pigem pisipiltide asemel suurtesse piltidesse. Näiteks - ärge lisage pisipilte pildi saidikaardile (laiendus allpool), mõnel juhul ärge määrake neile isegi ALT-silte. Eesmärk on, et Google indekseerib suured pildid pisipiltide arvelt ja mitte vastupidi.
Pildi pealkirjaks on soovitatav määrata Pisipildid, mis kirjeldavad toodet mõne sõnaga ja üldiselt, mida surfar pärast pildil klõpsamist näeb.
Kui igal tootekategooria lehel on palju tooteid (näiteks üle 30), on soovitatav kasutada Lazy Load skripti, mis laadib pildid alles siis, kui surfar kerib alale, kus nad asuvad.
7. Tekstiteksti kasutamine
Tavaliselt tulevad pildid teksti esitama, mitte vastupidi. Mis puutub aga pildi optimeerimisse ja Google'i pildi reklaamimisse ning kui sait on piltidel põhinev võrk, siis tasub tekstide küsimust tähelepanuta jätta, isegi kui see on põhiline värk.
Neile, kes soovivad säilitada võimalikult puhta ja minimalistliku ilme (näiteks fotograafi portfelli veebisaidil), on soovitatav, et ta määraks igal lehel, millel on pilt, vähemalt järgmised andmed:
- H1 Vastavalt pildi subjektile
- Lühike kirjeldus (isegi 10–20 sõna on parem kui mitte midagi) pildil, soovitavalt vastava märksõnaga või kahega
- Pealkiri ja kirjeldus on muidugi asjakohased (juhul kui tegemist on füüsilise lehega ja mitte pildiga, mis galeriist hüppab).
- Alt ja fotode pealkirjad - sellisel juhul väga soovitatav.
8. Fotode saidikaart
Pildi saidikaart (image-sitemap.xml) aitab Google'il meie saidil olevaid pilte paremini lugeda ja indekseerida. Sarnaselt tavapärasele XML-i saidikaardile saab piltide saidikaardi esitada ka otsingukonsooli abil saidikaartide piirkonnas.
Lisage otsingukonsoolile saidiplaan
Piltide saidikaart on eriti kasulik, kui kasutatakse igasuguseid skriptide ja mitmesuguste efektidega galeriisid - mida Google'il on tavapäraselt raske skannida.
Piltide saidikaartide kasutamiseks on mõned parameetrid.
Kuidas saidikaarti luua?
WordPress - nagu tavaliselt, kui töötate WordPressiga, on teie elu lihtne. Udinra All Image Sitemap plugin sulgeb teie jaoks nurga. Kõik, mida peate tegema, on installida pistikprogramm, märkida seadetes mõni tähis V, luua saidikaart ja käivitada see Google'is Search Console'i kaudu.
Mis tahes muul platvormil - see sõltub. Kui pakendivälist lahendust nagu pistikprogramm vms pole, saab seda teha Screaming Frogi abil.
Konn aitab teil hõlpsalt piltide saidikaarti koostada. Ainus probleem - seda ei värskendata automaatselt (erinevalt pistikprogrammist) ja seda tuleb aeg-ajalt värskendada.
Kuidas seda teha?
Taotletud sait tuleb täielikult kontrollida ja seejärel minna tarkvara ülemises menüüs saidikaartidele -> Loo piltide saidikaart. See, mida saate, on koššer-XML-fail, mida saab kasutada ja käivitada otsingukonsooli kaudu.
9. Julgustage fotode jagamist
Kui kiidate palju originaalpiltide kasutamist (olgu siis tegemist füüsilise pildi või graafilise elemendiga) ja pildid on saidi peamine või vähemalt oluline osa, siis on väga väärt julgustada kasutajaid jagama pilte sotsiaalmeedias võrgudesse ja hõlbustavad seda teha.
Nagu tavaliselt, on mul WordPressi platvormi jaoks praktilisi näpunäiteid, muudes süsteemides soovitan kasutada programmeerijat või kontrollida, kas selle jaoks on spetsiaalne pistikprogramm.
WordPressil on selleks 2 toredat pistikprogrammi:
- Social Image Hover WordPressi jaoks - tasuline pistikprogramm (em; küünelakk - 17 dollarit).
- Pinteri nööpnõel - pistikprogramm, mis lisab saidi fotodele väikese Pinteresti ikooni.
10. Pildi vähendamise ja optimeerimise tööriistad
TinyPNG - suurepärane teenus, mis võimaldab teil pilte eriti mugava lohistamisliidese abil veebis tihendada. Neil on ka API, mis võimaldab teil töötada suuremates kogustes ja automaatselt, samuti WordPressi suurepärane pistikprogramm, mis võimaldab teil saidil kõik pildid kokku suruda - nõuab nende API kasutamist (tasuta 500 pilti kuus).
Fotosizer - kena töölaua tarkvara, mis võimaldab teil pilte suures koguses redigeerida - lisaks pakkimisele ka mõõtmete vähendamisele, lisades piltidele vesimärke ja erinevaid efekte ning palju muid toredaid funktsioone.
Järeldus
Olete just aru saanud veebisaidi piltide optimeerimise olulisusest. Kuid kui soovite teada oma saidi praegust olekut, saate seda teha tänu Semaltile tasuta SEO konsultatsioonid.
Semalt aitab teil tuvastada teie saidiga seotud SEO-probleeme. Lisaks saate Semalt Expertsi abil hõlpsalt parandada oma veebiettevõtte toimivust madalamate kuludega.