Kako optimizirati svoje slike kako bi bile SEO prijateljske (Kompletan vodič)

Učinkovitost vaše web stranice ovisi o nekoliko čimbenika u rasponu od određenog web domaćina koji odaberete, slijedeći smjernice o pristupačnosti web mjesta, do veličine slikovnih datoteka koje koristite.


Njihovo oblikovanje odgovarajuće veličine može, međutim, smanjiti kvalitetu zbog izmjena koje unesete. Dobra vijest je da uz nekoliko tehnika i trikova možete održati optimalnu kvalitetu slike i dobiti pravu veličinu.

Što je optimizacija slike?

dimenzije za optimizaciju slikeWeb stranice mogu doživjeti značajno usporavanje kada su prisutne velike slike. Ovo može smanjiti vrijeme učitavanja i učiniti posjetitelje vaše web stranice ukupnim iskustvom.

Smanjivanje veličine datoteke je optimizacija slike. Za to možete koristiti skriptu ili dodatak.

To rezultira bržim vremenom učitavanja stranica. Kompresija i gubitak dvije su najčešće metode optimizacije.

Prednosti oblikovanja slike

prosječne veličine slike na webuProcjenjuje se da oko 54 posto ukupne težine web stranice nastaje zbog slika.

Kada radite na optimizaciji web stranica, zbog toga bi vam slike trebale biti prvi zadatak. Prednosti oblikovanja slika uključuju:

  • Poboljšana brzina učitavanja stranice
  • Brže je stvoriti sigurnosne kopije
  • Potrebno je manje prostora za pohranu na poslužitelju
  • Poboljšani SEO s pravim SEO dodatkom
  • Koristi se manja širina pojasa

Kako poboljšati performanse pomoću optimizacije slike

Cilj je ravnomjerno uravnotežiti prihvatljivu kvalitetu i najmanju moguću veličinu datoteke. Postoji više načina za to. Prije prijenosa, komprimiranje slika je uobičajena opcija. U tu svrhu možete koristiti alat ili dodatak (ovdje je nekoliko).

Važno je uzeti u obzir vrstu kompresije i format datoteke koji koristite. Prava kombinacija omogućuje smanjivanje veličine vaše slike do pet puta.

Eksperimentirajte s različitim formatima datoteka i kompresijama kako biste odredili najbolju kombinaciju za vaše potrebe.

Odaberite najbolji format datoteke

Da biste odabrali najbolju vrstu datoteke, važno je znati koje su dostupne. To su najčešći:

  • JPEG: Ova vrsta koristi optimizaciju bez gubitaka i gubitke. Možete uspostaviti čvrstu ravnotežu veličine i kvalitete datoteke podešavanjem razine kvalitete.
  • PNG: Ova vrsta ima veću veličinu datoteke, ali slike su veće kvalitete. Možete koristiti kompresiju gubitaka ili bez gubitaka.
  • GIF: Ovo je idealno za animirane slike. Možete koristiti samo kompresiju bez gubitaka. Koristi samo 256 boja.

formati slika

Postoje i druge mogućnosti, ali one su među najčešćim i s kojima je lako raditi. Ostale opcije uključuju JPEG XR i WebP. Nisu svi preglednici podržani ovo dvoje, zato to budite svjesni.

Međutim, oni mogu biti održiv izbor. Na primjer, u usporedbi sa sličnom JPEG slikom, prosječno se smanjuje veličina datoteke za 30 posto s WebP-om.

Zbog nedostatka univerzalne podrške za ove dvije mogućnosti, vašoj aplikaciji bit će potrebna dodatna logika na vašim poslužiteljima ili aplikaciji da bi pružila odgovarajući resurs:

  • Optimizacija slike usluga je koju pružaju neki CDN-ovi, uključujući isporuku WebP i JPEG XR.
  • Da biste otkrili klijenta, pružite najbolji dostupni format slike i provjerite podržane formate, moguće je dodati dodatnu logiku aplikacije.
  • Određeni alati otvorenog koda automatiziraju razgovor, optimizaciju i posluživanje odgovarajuće imovine.

Veličina prema kvaliteti kompresije

Slaba kompresija obično daje veću kvalitetu, ali veličine datoteka obično su veće. Suprotno je s visokom kompresijom. Datoteke su manje, ali kvaliteta se smanjuje.

kvaliteta slike u odnosu na kompresiju

U idealnom slučaju želite ukupno jedan do dva MB za ukupnu težinu web stranice. Dakle, razmislite koliko slika trebate koristiti i podijelite ovaj broj oko 1,5. To vam daje veličinu po slici koja omogućava najbolju brzinu učitavanja.

Lossless vs. Lossy Optimizacija

To su dvije vrste kompresije koje ćete koristiti. Važno je razumjeti što rade:

  • lossless vs gubitak kompresijebez gubitaka: Ovo komprimira podatke i to je filter. Prije prikazivanja slike mora biti nekomprimirana. Međutim, kvaliteta se ne smanjuje. Postoji nekoliko alata koji izvode kompresiju bez gubitaka.
  • gubljenje: Ovim se eliminiraju neki podaci i to je filter. Imajte na umu koliko smanjenja radite jer će to pogoršati sliku. Možete koristiti različite uređivače slika i alate za podešavanje postavki kvalitete slike.

Optimalna konfiguracija konfiguracije bez gubitaka ili gubitka ovisi o vašim vlastitim kriterijima, poput razmjene umetnutih artefakata i veličine datoteke i sadržaja slike.

Ne postoji niti jedno univerzalno podešavanje koje se odnosi na sve slike. Na kraju, želite se poigrati različitim slikama da vidite koji najbolje funkcionira.

Promjena veličine slike u skali

Zahvaljujući odgovarajućim stranicama na web mjestima, kao što je WordPress, dobit ćete nekoliko veličina datoteka u svojoj medijskoj biblioteci. Vaš preglednik može odabrati veličinu koja je najbolja i preuzeti je. Veličina koju odabire preglednik temelji se na rezoluciji uređaja.

promjena veličine slike u wordpress-u

Izvorna datoteka ostaje netaknuta i zadržana. Možete koristiti dodatke kako biste izbjegli spremanje originala za uštedu prostora na disku, ako želite.

Zamjena i uklanjanje slika

Trebaju li vam sve slike na web stranici? Ako ne, uklonite one nepotrebne. Međutim, ako su svi relevantni za sadržaj, razmislite o zamjeni većih ili nižih kvaliteta boljim opcijama.

U nekim slučajevima web-fontovi i CSS efekti mogu zauzeti mjesto slika, a istovremeno pružaju lijepu vizualnu estetiku na stranici. Pomoću web fontova lijepi znakovi mogu poboljšati iskoristivost i pružiti više prilagođen izgled vašim stranicama.

Također može poboljšati vašu čitljivost i markiranje. Samo osigurajte da možete i dalje jednostavno pretraživati, odabrati i promijeniti veličinu teksta bez problema s čitanjem.

CSS efekti uključuju elemente, kao što su sjene i gradijenti. I oni mogu dodatno markirati. Animacije mogu pružiti vizualnu privlačnost na vašoj web stranici na svakoj razini i rezoluciji zuma. U usporedbi s slikovnim datotekama, to je djelić bajtova.

Raster nasuprot vektorskim slikama

rastor vs vektor

Raster i vektor su dvije glavne vrste slikovnih datoteka. Programi na temelju piksela, skener ili kamera koriste se za izradu rasterskih slika.

Oni se široko koriste na internetu i češće se koriste. Za izradu vektorskih slika koristi se vektorski softver. To je uobičajeno za slike koje idu na fizičke proizvode, a inženjerstvo, CAD i 3D grafiku.

Vektorske slike su neovisne o rezoluciji i zumiranju. Kad su uključeni geometrijski oblici, vektor je idealan. Kad su slike složene i imaju obilje detalja i nepravilnih oblika, preferiraju se rasterske slike.

Rasterska grafika kodira pojedinačne vrijednosti svakog piksela unutar pravokutne mreže da bi predstavljala sliku. Vektorska grafika predstavlja sliku pomoću točaka, linija i poligona.

Implikacije zaslona visoke rezolucije

Važno je razlikovati dvije različite vrste piksela, koje uključuju piksele uređaja i CSS piksela. U jednom CSS pikselu može biti prisutno više piksela uređaja. Pojedinosti na zaslonu postaju sitnije s više piksela uređaja.

css pixel vs pixel uređajaDa biste u potpunosti iskoristili veći broj piksela uređaja, slike slike moraju imati više detalja.

Ovaj zadatak je idealno za vektorske slike jer mogu dati oštre rezultate kada se donese bilo kojom rezolucijom.

Budući da se rasterske slike za kodiranje slikovnih podataka koriste po pikselu, oni su izazovniji. Ovo se događa dok se veličine rasterskih datoteka povećavaju kako se povećavaju pikseli.

Dakle, zasloni visoke rezolucije trebaju slike visoke razlučivosti da bi iskoristili prednosti. Vektorske slike su najbolje za ekrane visoke rezolucije jer uvijek daju oštre rezultate zahvaljujući neovisnosti o rezoluciji.

Sjetite se samo da su, bez obzira na rezoluciju, tehnike optimizacije slike iste.

Optimiziranje vektorskih slika

Skalabilna vektorska grafika (SVG) podržani su od strane svih modernih preglednika.

Ovo je idealno za dvodimenzionalnu grafiku, a format se temelji na XML slici. SVG datoteke mogu se stvoriti ručno pomoću uređivača teksta koji želite ili s većinom tipova softvera na bazi vektora.

Da bi se smanjila veličina SVG datoteka, treba ih umanjiti. GZIP treba koristiti kod komprimiranja SVG datoteka.

Optimizacija rasterskih slika

Mreža piksela čini rastrujuću sliku. Pojedinačni pikseli nalaze se na dvodimenzionalnoj mreži. Na primjer, slijed od 10000 piksela čini sliku veličine 100 do 100 piksela. Svaki piksel kodira informacije o transparentnosti i boji.

raster težakRGBA vrijednosti pohranjuju se u svakom pikselu. To uključuje:

  • Crvena traka
  • Plavi kanal
  • Zelena traka
  • Alpha (transparentni) kanal

256 nijansi (vrijednosti) interno dodjeljuje preglednik. To po kanalu znači osam bita. Po pikselu, to je četiri bajta. To omogućava izračun veličine datoteke pomoću dimenzija rešetke. Ne treba puno da veličina datoteke postane vrlo velika.

Dakle, za smanjenje veličine slikovne datoteke, postoji nekoliko strategija:

  • Smanjite dubinu slike. To možete učiniti pomoću manje palete boja.
  • Optimizirajte podatke koje pojedini pikseli pohranjuju.

Alat i ugađanje parametara

Ne postoji savršen alat za sliku, skup parametara za optimizaciju ili format koji će raditi za svaku sliku. Sadržaj slike i njeni tehnički i vizualni zahtjevi odredit će koje biste trebali koristiti.

Nakon što pronađete dobar set postavki, možete ga koristiti za slične slike u budućnosti kako biste uštedjeli vrijeme. No, pazite da nikada ne pretpostavite da se za komprimiranje svih slika trebaju koristiti iste postavke.

Učenje o nekoliko uobičajenih alata može vam pomoći u pravom izboru. Ove su četiri osobe koje se najčešće koriste:

  • Gifsicle: To vam omogućuje optimizaciju i stvaranje različitih GIF slika.
  • Optipng: Koristi se za optimizaciju PNG bez gubitaka.
  • Jpegtran: Ovaj vam omogućuje optimizaciju JPEG slika.
  • Pngquant: Koristi se za optimizaciju gubitaka na PNG.

Postavljanje umanjenih slika

Dva su osnovna kriterija koja trebate uzeti u obzir prilikom izvođenja optimizacije slike:

  • Optimiziranje ukupnog broja piksela slike.
  • Optimiziranje koliko bajtova je potrebno za kodiranje svakog piksela na slici.

stablo formata slikeVeličina vaše slikovne datoteke propada na ukupni pikseli pomnoženi s ukupnim bajtovima potrebnim za pojedinačno kodiranje piksela. To je to. Imajte to na umu kada radite na određivanju optimalne veličine za slikovne datoteke na vašoj web lokaciji.

Zbog toga je najučinkovitiji i najjednostavniji način optimizacije slika osigurati da ne otpremate više piksela koje vam apsolutno trebaju prikazati u pregledniku u namjeravanoj veličini.

Tako, ne oslanjajte se samo na svoj preglednik da biste promijenili veličine slika. Zbog toga će se prikazati u nižoj rezoluciji. Također koristi puno dodatnih resursa procesora.

Obično nije moguće jamčiti točnu veličinu prikaza za svaku pojedinačnu isporučenu imovinu. Međutim, važno je osigurati da sve nepotrebne piksele svedete na minimum.

Također je neophodno da isporučite svoju veliku imovinu što je moguće bliže njihovoj veličini zaslona.

Popis za optimizaciju slike

Sve ovdje navedene informacije omogućuju vam da optimizirate svoje slike kako bi web stranice bile brže. I dalje ćete moći koristiti prekrasne slike, ali one neće uzrokovati značajno usporavanje vremena učitavanja vaše stranice.

Ovo će posjetitelje učiniti sretnim i poboljšati opću funkciju vaše web stranice. Kada optimizirate svoje slike, uzmite u obzir sljedeće točke provjere:

  • Razmislite o vektorskim formatima jer rade za visoke rezolucije i za više uređaja jer su neovisni o skali i rezoluciji.
  • Sva se SVG imovina treba komprimirati i minimizirati. Time se uklanjaju nepotrebni metapodaci.
  • Za rasterske formate poigrajte se optimalnim postavkama kvalitete. To vam može uštedjeti značajan broj bajtova.
  • Za svaku imovinu utvrdite svoje funkcionalne zahtjeve i odaberite najbolji format za rasterske slike.
  • Automatizirajte kad god možete kako biste osigurali dosljednu optimizaciju slike.
  • Poslužite umanjene slike tako da prirodna veličina slike i veličina zaslona budu što je moguće sličnija.

Ukratko, optimizacija slike je i znanosti i umjetnosti. Algoritmi i tehnike koje su visoko razvijene služe kao znanost.

Nedostatak konačnih odgovora u pogledu kompresije pojedine slike je umjetnost. U konačnici, trebali biste se igrati i eksperimentirati. To vam omogućuje da napravite najbolji izbor za svoje slikovne datoteke i kako oni doprinose brzini vaše web stranice.

Uz sve veću popularnost i sofisticiranost graditelja web stranica poput Wix-a, dizajneri mogu lako postati neuredni, ali ostati usredotočeni na razvoj i održavanje dobrih procesa optimizacije slike bilo da šišaju šablonu ili stvaraju web lokaciju ispočetka.

Reference i slikovni prilozi:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map