Kako optimizirati svoje slike, da bodo prijazne do SEO (celotni vodnik)

Uspešnost vašega spletnega mesta je odvisna od več dejavnikov, od določenega spletnega gostitelja, ki ga izberete, do upoštevanja smernic o dostopnosti spletnega mesta, do velikosti slikovne datoteke, ki jo uporabljate.


Če jih formatirate v ustrezni velikosti, pa lahko zmanjšate kakovost zaradi spremenjenih sprememb. Dobra novica je, da lahko z nekaj tehnikami in triki ohranite optimalno kakovost slike in dobite pravo velikost.

Kaj je optimizacija slike?

dimenzije za optimizacijo slikeSpletne strani lahko občutijo upočasnitev, kadar so prisotne velike slike. To lahko skrajša čas nalaganja in celotno izkušnjo poveča za obiskovalce vaše spletne strani.

Zmanjševanje velikosti datoteke je optimizacija slike. Za to lahko uporabite skript ali vtičnik.

To posledično povzroči hitrejše nalaganje strani. Stiskanje brez izgub in izguba sta najpogostejši metodi optimizacije.

Prednosti oblikovanja slike

povprečne velikosti slike na spletuOcenjujejo, da je približno 54 odstotkov celotne teže spletne strani posledica slik.

Ko delate na področju optimizacije spletnih strani, bi morale biti vaše slike prva naloga zaradi tega. Prednosti oblikovanja slik vključujejo:

  • Izboljšana hitrost nalaganja strani
  • Hitreje ustvarite varnostne kopije
  • Potrebno je manj prostora za shranjevanje strežnika
  • Izboljšano SEO s pravim vtičnikom SEO
  • Uporablja se manj pasovne širine

Kako izboljšati zmogljivost z optimizacijo slik

Cilj je enakomerno uravnotežiti sprejemljivo kakovost in najmanjšo možno velikost datoteke. Za to obstaja več kot en način. Pred nalaganjem je stiskanje slik pogosta možnost. V ta namen lahko uporabite orodje ali vtičnik (tukaj je nekaj).

Pomembno je upoštevati vrsto stiskanja in obliko datoteke, ki jo uporabljate. Prava kombinacija omogoča, da se velikost slike zmanjša do petkrat.

Preizkusite z različnimi formati datotek in vrstami stiskanja, da določite najboljšo kombinacijo za vaše potrebe.

Izberite najboljši format datoteke

Če želite izbrati najboljšo vrsto datoteke, je pomembno vedeti, katere so na voljo. Te so najpogostejše:

  • JPEG: Ta vrsta uporablja optimizacijo brez izgub in izgube. Z nastavitvijo stopnje kakovosti lahko dosežete trdno razmerje med velikostjo in kakovostjo datoteke.
  • PNG: Ta vrsta ponavadi ima večjo velikost datoteke, vendar so slike večje kakovosti. Uporabite lahko stiskanje z izgubo ali brez izgub.
  • GIF: To je idealno za animirane slike. Uporabljate lahko samo stiskanje brez izgub. Uporablja le 256 barv.

formati slikovnih datotek

Obstajajo tudi druge možnosti, vendar so te med najpogostejšimi in z njimi enostavno delati. Druge možnosti vključujejo JPEG XR in WebP. Vsi brskalniki ne podpirajo teh dveh, zato se tega zavedajte.

Lahko pa so uspešna izbira. Na primer, v primerjavi s podobno sliko JPEG v povprečju prihaja do 30-odstotnega zmanjšanja velikosti datoteke z WebP.

Zaradi pomanjkanja univerzalne podpore za ti dve možnosti bo vaša aplikacija potrebovala dodatno logiko na vaših strežnikih ali aplikaciji, da bo zagotovila ustrezen vir:

  • Optimizacija slike je storitev, ki jo nudijo nekateri CDN-ji, vključno z dostavo WebP in JPEG XR.
  • Če želite odkriti odjemalca, zagotoviti najboljši razpoložljivi format slike in preveriti podprte formate, je mogoče dodati dodatno logiko aplikacije.
  • Nekatera odprtokodna orodja avtomatizirajo pogovor, optimizacijo in strežbo ustreznih sredstev.

Velikost v primerjavi s kakovostjo stiskanja

Nizka kompresija ponavadi daje boljšo kakovost, vendar so velikosti datotek običajno večje. Pri visoki kompresiji je ravno obratno. Datoteke so manjše, kakovost pa se zmanjšuje.

kakovost slike v primerjavi s stiskanjem

V idealnem primeru želite skupno od enega do dveh MB za skupno težo vaše spletne strani. Torej, razmislite, koliko slik morate uporabiti in to številko razdelite za približno 1,5. Tako dobite velikost slike, ki omogoča najboljšo hitrost nalaganja.

Lossless vs. Lossy Optimizacija

To sta dve vrsti stiskanja, ki ju boste uporabljali. Pomembno je razumeti, kaj počnejo:

  • Zguba v primerjavi z izguboBrez izgube: Ta stisne podatke in to je filter. Pred upodabljanjem slike mora biti nestisnjena. Kakovost pa se ne zmanjša. Obstaja več orodij, ki izvajajo stiskanje brez izgub.
  • Izgubljeni: S tem se izločijo nekateri podatki in to je filter. Upoštevajte, koliko zmanjšate, ker bo slika poslabšala. Za prilagajanje kakovosti slike lahko uporabite različne urejevalnike slik in orodja.

Optimalna konfiguracija bodisi izgubljene bodisi izgubljene konfiguracije je odvisna od vaših lastnih meril, na primer izmenjave med vnesenimi artefakti in velikostjo datoteke ter vsebino slike.

Ni nobene univerzalne nastavitve, ki bi veljala za vse slike. Konec koncev se želite igrati z različnimi slikami, da vidite, katera deluje najbolje.

Spreminjanje velikosti slik na lestvici

Zahvaljujoč odzivnim stranem na spletnih mestih, kot je WordPress, boste v svoji medijski knjižnici dobili več velikosti datotek. Vaš brskalnik lahko izbere največjo velikost in jo prenese. Velikost, ki jo izbere brskalnik, temelji na ločljivosti naprave.

spreminjanje velikosti slike v wordpressu

Izvirna datoteka ostane nedotaknjena in ohranjena. Uporabite vtičnike, če želite, da prihranite izvirnik in tako prihranite prostor na disku.

Zamenjava in odstranjevanje slik

Potrebujete vse slike na spletni strani? Če ne, odstranite nepotrebne. Če pa vse ustreza vsebini, razmislite o zamenjavi večjih ali manj kakovostnih slik z boljšimi možnostmi.

V nekaterih primerih lahko spletne pisave in učinki CSS zasedejo slike, medtem ko na strani še vedno zagotavljajo lepo vizualno estetiko. S pomočjo spletnih pisav lahko lepi tipkovnice pomagajo izboljšati uporabnost in zagotavljajo bolj prilagojen videz vaših strani.

Prav tako lahko izboljša vašo berljivost in trženje blagovnih znamk. Prepričajte se, da lahko besedilo še vedno enostavno iščete, izbirate in spreminjate velikost, ne da bi prišlo do težav z berljivostjo.

CSS učinki vključujejo elemente, kot so sence in gradienti. Tudi te lahko dodatno blagovno znamko. Animacije lahko na vaši spletni strani nudijo vizualno privlačnost na vsaki stopnji povečave in ločljivosti. V primerjavi s slikovnimi datotekami je to del bajtov.

Raster vs. Vektorske slike

rastor vs vektor

Raster in vektor sta dve od glavnih vrst slikovnih datotek. Za ustvarjanje rastrskih slik se uporabljajo programi na osnovi pikslov, optični bralnik ali kamera.

Te se na internetu pogosto uporabljajo in pogosteje uporabljajo. Za ustvarjanje vektorskih slik se uporablja vektorska programska oprema. Te so pogoste za slike, ki gredo na fizične izdelke, inženirstvo, CAD in 3D grafiko.

Vektorske slike niso odvisne od ločljivosti in povečave. Ko gre za geometrijske oblike, je vektor idealen. Kadar so slike zapletene in vsebujejo veliko podrobnosti in nepravilnih oblik, so prednostne rastrske slike.

Rasterska grafika kodira posamezne vrednosti vsakega piksla v pravokotni mreži, da predstavlja sliko. Vektorska grafika predstavlja sliko s točkami, črtami in mnogokotniki.

Posledice zaslona z visoko ločljivostjo

Pomembno je razlikovati med dvema različnima vrstama pikslov, ki vključujeta slikovne pike in CSS slikovne pike. V enem piklu ​​CSS je lahko prisotnih več slikovnih pik. Podrobnosti na zaslonu postanejo bolj natančne z več pikami naprav.

css pixel vs pixel napraveČe želite v celoti izkoristiti višje število slikovnih pik v napravi, morajo biti slike slike podrobnejše.

Ta naloga je idealno za vektorske slike, saj lahko prinesejo ostre rezultate ko je bilo izdano pri kateri koli resoluciji.

Glede na to, da so rastrske slike za kodiranje slikovnih podatkov uporabljene na slikovni sliki, so bolj zahtevne. Velikost rastrskih datotek se povečuje, ko se slikovne pike povečujejo.

Zasloni z visoko ločljivostjo potrebujejo slike visoke ločljivosti, da izkoristijo prednosti. Vektorske slike so najboljše za zaslone z visoko ločljivostjo saj vedno zagotavljajo ostre rezultate, ker so neodvisni od ločljivosti.

Ne pozabite le, da so ne glede na ločljivost tehnike optimizacije slike enake.

Optimizacija vektorskih slik

Prilagodljiva vektorska grafika (SVG) podpira vse sodobne brskalnike.

To je idealno za dvodimenzionalno grafiko, format pa temelji na XML-sliki. SVG datoteke lahko ustvarite ročno z urejevalnikom besedil, ki vam je ljubše, ali z večino programske opreme, ki temelji na vektorjih.

Če želite zmanjšati velikost datotek SVG, jih je treba poenostaviti. GZIP je treba uporabiti pri stiskanju datotek SVG.

Optimizacija rastrskih slik

Rešetka slikovnih pik tvori rastrsko sliko. Posamezni slikovni piki so na dvodimenzionalni mreži. Na primer, zaporedje 10.000 slikovnih pik tvori sliko od 100 do 100 slikovnih pik. Vsak piksel kodira informacije o preglednosti in barvah.

rastrsko težkaVrednosti RGBA so shranjene v vsakem pikslu. Tej vključujejo:

  • Rdeči kanal
  • Modri ​​kanal
  • Zeleni kanal
  • Alfa (transparentnost) kanal

256 odtenkov (vrednosti) je dodeljeno v brskalniku. Na kanal to pomeni osem bitov. Na piksel je to štiri bajte. To omogoča izračun velikosti datoteke s pomočjo dimenzij mreže. Za velikost datoteke ne bo potrebno veliko.

Za zmanjšanje velikosti slikovne datoteke obstaja nekaj strategij:

  • Zmanjšajte globino slike. To lahko storite z uporabo manjše barvne palete.
  • Optimizirajte podatke, ki jih hranijo posamezne slikovne pike.

Orodja in nastavitev parametrov

Ni popolnega slikovnega orodja, niza parametrov za optimizacijo ali formata, ki bi deloval za vsako sliko. Vsebina slike ter njene tehnične in vizualne zahteve bodo določile, katero naj uporabite.

Ko najdete dober niz nastavitev, ga lahko v prihodnosti uporabite za podobne slike, da prihranite čas. Vendar ne pozabite, da nikoli ne predvidevate, da bi za stiskanje vseh slik uporabili iste nastavitve.

Spoznavanje nekaj običajnih orodij vam lahko pomaga pri pravilni izbiri. Te štiri so med najpogosteje uporabljenimi:

  • Gifsicle: To vam omogoča optimizacijo in ustvarjanje različnih slik GIF.
  • Optipng: Uporablja se za optimizacijo PNG brez izgub.
  • Jpegtran: Ta vam omogoča optimizacijo slik JPEG.
  • Pngquant: Uporablja se za optimizacijo izgub PNG.

Dobava pomanjšanih slikovnih sredstev

Pri izvajanju optimizacije slike morate upoštevati dva glavna merila:

  • Optimizacija skupnega števila slikovnih pik slike.
  • Optimizacija, koliko bajtov je potrebnih za kodiranje vsake slikovne pike.

drevo formata slikeVelikost vaše slikovne datoteke se razdeli na skupno število slikovnih pik, pomnoženo s skupnimi bajti, potrebnimi za kodiranje posameznih pikslov. To je to. Upoštevajte to, ko delate na določitvi optimalne velikosti slikovnih datotek na vašem spletnem mestu.

Zaradi tega je najučinkovitejši in najpreprostejši način za optimizacijo slik zagotovite, da ne pošiljate več slikovnih pik, ki jih nujno potrebujete za prikaz sredstva v brskalniku v predvideni velikosti.

Torej, ne zanašajte se le na svoj brskalnik, če želite spremeniti slike. Zaradi tega se lahko prikažejo v nižji ločljivosti. Uporablja tudi veliko dodatnih virov CPU-ja.

Na splošno ni mogoče zagotoviti natančne velikosti prikaza za vsako posamezno dobavljeno sredstvo. Pomembno pa je, da zmanjšate vse nepotrebne slikovne pike na minimum.

Prav tako je nujno, da svoje veliko premoženje dostavite čim bližje njihovi velikosti zaslona.

Kontrolni seznam za optimizacijo slik

Vse tukaj najdene informacije vam omogočajo, da svoje slike optimizirate tako, da bodo hitrejše vaše spletne strani. Še vedno boste lahko uporabljali čudovite slike, vendar s časom nalaganja vaše strani ne bodo povzročile znatne upočasnitve.

To bo vaše obiskovalce razveselilo in izboljšalo splošno funkcijo vašega spletnega mesta. Pri optimizaciji slik upoštevajte naslednje kontrolne točke:

  • Upoštevajte vektorske formate, saj delujejo za visoke ločljivosti in več naprav, ker so neodvisni od obsega in ločljivosti.
  • Vsa sredstva SVG je treba stisniti in zmanjšati. S tem odstranite nepotrebne metapodatke.
  • Za rastrske formate se poigrajte z optimalnimi nastavitvami kakovosti. Tako lahko prihranite veliko število bajtov.
  • Za vsako sredstvo določite svoje funkcionalne zahteve in izberite najboljši format za rastrske slike.
  • Avtomatizirajte, kadar koli lahko zagotovite dosledno optimizacijo slike.
  • Slike pomanjšajte tako, da sta naravna velikost slike in velikost zaslona čim bolj podobni.

Če povzamem, obstaja tako znanost kot umetnost za optimizacijo slike. Algoritmi in tehnike, ki so zelo razviti, služijo kot znanost.

Pomanjkanje dokončnih odgovorov glede stiskanja posamezne slike je umetnost. Na koncu bi se morali igrati in eksperimentirati. To vam omogoča, da se najbolje odločite za slikovne datoteke in kako prispevajo k hitrosti vaše spletne strani.

Z naraščajočo priljubljenostjo in sofisticiranostjo drugih proizvajalcev spletnih strani, kot je Wix, so oblikovalci enostavno neukročeni, vendar ostajajo osredotočeni na razvoj in vzdrževanje dobrih procesov za optimizacijo slik, ne glede na to, ali kličete po predlogi ali gradite spletno mesto iz nič..

Reference in sliki:

  • PicupMedia.com
  • Računalništvo.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