Kuvien optimointi SEO-ystävällisiksi (täydellinen opas)

Verkkosivustosi suorituskyky riippuu useista tekijöistä, jotka vaihtelevat valitsemastasi Web-isännästä verkkosivustojen saavutettavuusohjeiden noudattamisen ja käyttämäsi kuvatiedostojen koon välillä.


Niiden muotoilu oikean kokoiseksi voi kuitenkin heikentää laatua tekemistäsi muutoksista. Hyvä uutinen on, että voit ylläpitää optimaalista kuvanlaatua ja saada oikean koon muutamalla tekniikalla ja temppulla.

Mikä on kuvan optimointi?

kuvan optimoinnin mitatVerkkosivut voivat hidastaa huomattavasti, kun suuria kuvia on. Tämä voi lyhentää latausaikoja ja tehdä sivuston kävijöistä yleisen kokemuksen.

Tiedoston koon pienentäminen on kuvan optimointia. Voit käyttää komentosarjaa tai laajennusta tähän.

Tällöin sivuillesi latausajat ovat nopeammat. Häviötön ja häviöllinen pakkaus ovat kaksi yleisintä optimointimenetelmää.

Kuvan muotoilun edut

keskimääräiset kuvakoko webissäArviolta noin 54 prosenttia verkkosivun kokonaispainosta johtuu kuvista.

Kun työskentelet verkkosivustojen optimoinnissa, kuvien tulisi olla ensimmäinen tehtävä tämän vuoksi. Kuvan muotoilun etuihin kuuluvat:

  • Parannettu sivun latausnopeus
  • Varmuuskopioiden luominen on nopeampaa
  • Tarvitaan vähemmän palvelimen tallennustilaa
  • Parannettu SEO oikealla SEO-laajennuksella
  • Vähemmän kaistanleveyttä käytetään

Kuinka parantaa suorituskykyä kuvan optimoinnilla

Tavoitteena on tasapainottaa hyväksyttävä laatu ja mahdollisimman pieni tiedostokoko. Voit tehdä tämän useammalla kuin yhdellä tavalla. Kuvien pakkaaminen on yleinen vaihtoehto ennen lähettämistä. Voit käyttää työkalua tai laajennusta tähän tarkoitukseen (tässä on muutama).

On tärkeää ottaa huomioon käyttämäsi pakkaustyyppi ja tiedostomuoto. Oikea yhdistelmä antaa mahdollisuuden pienentää kuvan kokoa jopa viisi kertaa.

Kokeile erilaisia ​​tiedostomuotoja ja pakkaustyyppejä parhaan yhdistelmän löytämiseksi tarpeitasi varten.

Valitse paras tiedostomuoto

Parhaimman tiedostotyypin valitsemiseksi on tärkeää tietää, mitkä ovat saatavilla. Nämä ovat yleisimmät:

  • JPEG: Tämä tyyppi hyödyntää häviötöntä ja häviöllistä optimointia. Voit löytää vankan tasapainon tiedoston koosta ja laadusta säätämällä laatutasoa.
  • PNG: Tämän tyyppisellä tiedostolla on yleensä suurempi koko, mutta kuvat ovat laadukkaampia. Voit käyttää häviötöntä tai häviötöntä pakkausta.
  • GIF: Tämä on ihanteellinen animoituihin kuviin. Voit käyttää vain häviötöntä pakkausta. Se käyttää vain 256 väriä.

kuvatiedostomuodot

On myös muita vaihtoehtoja, mutta ne ovat yleisimpiä ja helppo työskennellä. Muita vaihtoehtoja ovat JPEG XR ja WebP. Kaikki selaimet eivät tue näitä kahta, joten ole tietoinen tästä.

Ne voivat kuitenkin olla toteuttamiskelpoinen valinta. Esimerkiksi verrattuna vertailukelpoiseen JPEG-kuvaan WebP: llä on keskimäärin 30 prosentin tiedostokoko pienentynyt.

Koska näille kahdelle vaihtoehdolle ei ole universaalia tukea, sovelluksesi tarvitsee palvelimillesi tai sovelluksillesi lisälogiikan asianmukaisen resurssin tarjoamiseksi:

  • Kuvan optimointi on joidenkin CDN: ien tarjoama palvelu, mukaan lukien WebP- ja JPEG XR -toimitukset.
  • Voit havaita asiakkaan tarjoamalla parhaan käytettävissä olevan kuvamuodon ja tarkistamalla tuetut muodot. Voit lisätä lisää sovelluslogiikkaa.
  • Tietyt avoimen lähdekoodin työkalut automatisoivat keskustelun, optimoinnin ja asianmukaisten omaisuuserien tarjoamisen.

Koko vs. puristuslaatu

Matala pakkaus antaa yleensä korkeamman laadun, mutta tiedostot ovat tyypillisesti suurempia. Korkealla pakkauksella päinvastoin. Tiedostot ovat pienempiä, mutta laadulla on taipumus heikentyä.

kuvanlaatu vs. pakkaus

Ihannetapauksessa haluat, että verkkosivusi kokonaispaino on yhteensä yksi tai kaksi megatavua. Joten harkitse kuinka monta kuvaa sinun täytyy käyttää ja jaa tämä luku noin 1,5: llä. Tämä antaa sinulle kuvan koon, joka mahdollistaa parhaan latausnopeuden.

Häviämätön vs. häviöllinen optimointi

Nämä ovat kahta pakkaustyyppiä, joita käytät. On tärkeää ymmärtää mitä he tekevät:

  • häviämätön vs häviöllinen pakkaushäviötön: Tämä pakata tiedot ja on suodatin. Ennen kuvan tuottamista se on pakkaamaton. Laatu ei kuitenkaan heikkene. On olemassa useita työkaluja, jotka suorittavat häviötöntä pakkausta.
  • Hukkaava: Tämä eliminoi joitain tietoja ja se on suodatin. Ota huomioon, kuinka paljon vähennystä teet, koska se huonontaa kuvaa. Voit säätää kuvan laatuasetuksia erilaisten kuvankäsittelyohjelmien ja työkalujen avulla.

Joko häviöttömän tai häviöllisen kokoonpanon optimaalinen kokoonpano riippuu omista kriteereistäsi, kuten esimerkiksi kompromissi esiteltyjen esineiden ja tiedostokokojen sekä kuvan sisällön välillä.

Kaikille kuville ei ole yhtä ainoaa yleistä asetusta. Viime kädessä haluat pelata eri kuvilla nähdäksesi mikä toimii parhaiten.

Kuvien koon muuttaminen skaalaamiseksi

Sivustojen reagoivien sivujen, kuten WordPress, ansiosta saat useita tiedostokokoja mediakirjastoon. Selaimesi voi valita parhaan koon ja ladata sen. Selaimen valitsema koko perustuu laitteen tarkkuuteen.

kuvan koon muuttaminen WordPressissä

Alkuperäinen tiedosto säilyy ennallaan. Voit käyttää laajennuksia välttääksesi alkuperäisen tallentamisen säästääksesi levytilaa, jos haluat.

Kuvien korvaaminen ja poistaminen

Tarvitsetko kaikki verkkosivun kuvat? Jos ei, poista tarpeettomat. Jos kaikki liittyvät sisältöön, harkitse suurempien tai heikompien kuvien korvaamista paremmilla vaihtoehdoilla.

Joissain tapauksissa Web-fontit ja CSS-tehosteet voivat korvata kuvat, samalla kun ne tarjoavat sivulle mukavan visuaalisen estetiikan. Verkkokirjaimien avulla hienot kirjasintyypit voivat parantaa käytettävyyttä ja tarjota räätälöityn ulkoasun sivuillesi.

Se voi myös parantaa luettavuutta ja brändäystäsi. Varmista vain, että voit silti etsiä, valita ja muuttaa tekstin kokoa helposti ilman, että sillä olisi luettavuusongelmia.

CSS-tehosteet sisältävät elementtejä, kuten varjoja ja kaltevuuksia. Myös nämä voivat lisätä brändäystä. Animaatiot voivat tarjota visuaalisen vetovoiman verkkosivustollesi kaikilla zoom-tasoilla ja tarkkuuksilla. Kuvatiedostoihin verrattuna nämä ovat murto-osa tavuista.

Rasteri vs. vektorikuvat

rastor vs vektori

Rasteri ja vektori ovat kaksi ensisijaista kuvatiedostotyyppiä. Rasterikuvien luomiseen käytetään pikselipohjaisia ​​ohjelmia, skanneria tai kameraa.

Niitä käytetään laajasti Internetissä ja yleisemmin. Vektorikuvaa käytetään vektorikuvien luomiseen. Nämä ovat yleisiä kuvissa, jotka menevät fyysisiin tuotteisiin, sekä tekniikassa, CAD- ja 3D-grafiikoissa.

Vektorikuvat ovat erottelukyvystä ja zoomauksesta riippumattomia. Kun kyseessä ovat geometriset muodot, vektori on ihanteellinen. Kun kuvat ovat monimutkaisia ​​ja niissä on paljon yksityiskohtia ja epäsäännöllisiä muotoja, rasterikuvat ovat parempia.

Rasterigrafiikka koodaa kunkin pikselin yksittäiset arvot suorakulmaisessa ruudukossa kuvaamaan kuvaa. Vektorigrafiikka edustaa kuvaa käyttämällä pisteitä, viivoja ja monikulmioita.

Korkean resoluution näytön vaikutukset

On tärkeää erottaa kaksi eri pikselityyppiä, jotka sisältävät laitepikselit ja CSS-pikselit. Yhdessä CSS-pikselissä voi olla useita laitepikseliä. Näytön yksityiskohdat muuttuvat hienommiksi, kun enemmän laitepikseliä.

css pikseli vs. laitteen pikseliSuurempien laitepikselimäärien hyödyntämiseksi kuvasisällöissä on oltava yksityiskohtaisempia tietoja.

Tämä tehtävä on ihanteellinen vektorikuville, koska ne voivat tuottaa teräviä tuloksia kun se esitetään millä tahansa tarkkuudella.

Koska rasterikuvat käyttävät kuvadataa koodaamaan pikseliä kohden, ne ovat haastavammat. Tämä on silloin, kun rasteritiedostojen koot kasvavat pikselien kasvaessa.

Joten korkearesoluutioiset näytöt tarvitsevat korkearesoluutioisia kuvia hyödyntääkseen niitä. Vektorikuvat ovat paras korkean resoluution näytöille koska ne tarjoavat aina teräviä tuloksia resoluutiosta riippumattomuuden vuoksi.

Muista vain, että tarkkuudesta riippumatta kuvan optimointitekniikat ovat samat.

Vektorikuvien optimointi

Skaalautuvaa vektorigrafiikkaa (SVG) tukee kaikki nykyaikaiset selaimet.

Tämä on ihanteellinen kaksiulotteiselle grafiikalle ja muoto on XML-kuvapohjainen. SVG-tiedostot voidaan luoda käsin käyttämällä haluamaasi tekstieditoria tai useimpien vektoripohjaisten ohjelmistotyyppien kanssa.

SVG-tiedostojen koon pienentämiseksi ne tulisi pienentää. GZIP: tä tulisi käyttää SVG-tiedostojen pakkaamisessa.

Rasterikuvien optimointi

Pikseliristikko muodostaa rasterikuvan. Yksittäiset pikselit ovat kaksiulotteisessa ruudukossa. Esimerkiksi 10 000 pikselin sekvenssi muodostaa kuvan 100 – 100 pikseliä. Jokainen pikseli koodaa läpinäkyvyyttä ja väritietoja.

rasteri raskasJokainen pikseli tallentaa RGBA-arvot. Nämä sisältävät:

  • Punainen linja
  • Sininen kanava
  • Vihreä linja
  • Alfa (läpinäkyvyys) -kanava

Selain allokoi 256 sävyä (arvoa) sisäisesti. Kanavaa kohti tämä kääntää kahdeksan bittiä. Pikseliä kohti, tämä on neljä tavua. Tämä antaa mahdollisuuden laskea tiedostokoko ruudukon mittojen avulla. Tiedoston koon muuttaminen erittäin suureksi ei vie paljon.

Joten kuvatiedoston koon pienentämiseksi on olemassa muutamia strategioita:

  • Pienennä kuvan bittisyvyyttä. Voit tehdä tämän käyttämällä pienempää väripalettia.
  • Optimoi yksittäisten pikselien tallentamat tiedot.

Työkalut ja parametrien viritys

Ei ole täydellistä kuvatyökalua, optimointiparametriryhmää tai muotoa, joka toimisi jokaisessa kuvassa. Kuvasisältö ja sen tekniset ja visuaaliset vaatimukset määräävät, mitä sinun tulee käyttää.

Kun olet löytänyt hyvän asetusjoukon, voit käyttää sitä tulevaisuuden samanlaisiin kuviin säästääksesi aikaa. Varmista kuitenkin, ettet koskaan oleta, että samoja asetuksia tulisi käyttää kaikkien kuvien pakkaamiseen.

Muutaman yleisen työkalun oppiminen voi auttaa sinua tekemään oikean valinnan. Nämä neljä ovat yleisimmin käytettyjä:

  • Gifsicle: Tämän avulla voit optimoida ja luoda erilaisia ​​GIF-kuvia.
  • optipng: Tätä käytetään häviöttömän PNG-optimoinnin mahdollistamiseen.
  • Jpegtran: Tämän avulla voit optimoida JPEG-kuvia.
  • Pngquant: Tätä käytetään PNG-optimoinnin menettämiseen.

Skaalattujen kuvaresurssien toimittaminen

Kuvan optimoinnissa on otettava huomioon kaksi ensisijaista kriteeriä:

  • Kuvan pikselimäärän optimointi.
  • Optimoimalla kuinka monta tavua tarvitaan kuvan jokaisen pikselin koodaamiseksi.

kuvamuoto puuKuvatiedoston koko jakautuu pikselien kokonaismäärä kerrottuna tavuilla, jotka tarvitaan yksittäiseen pikselien koodaukseen. Tämä se on. Pidä tämä mielessä, kun yrität määrittää verkkosivustosi kuvatiedostojen optimaalisen koon.

Tästä syystä tehokkain ja helpoin tapa optimoida kuvia on varmistaa, että et lähetä enemmän pikseliä, jotka sinun on ehdottomasti näytettävä sisällön selaimessa sen suunnitellussa koosta.

Niin, älä luota pelkästään selaimeesi kuvien muuttamiseen. Tämä voi johtaa niiden näyttämiseen pienemmällä tarkkuudella. Se käyttää myös paljon ylimääräisiä CPU-resursseja.

Jokaisen toimitetun omaisuuden tarkkaa näyttökokoa ei yleensä voida taata. On kuitenkin tärkeää varmistaa, että pidät kaikki tarpeettomat pikselit minimissä.

On myös välttämätöntä, että toimitat suuret omaisuutesi mahdollisimman lähellä näytön kokoa.

Kuvan optimoinnin tarkistuslista

Kaikkien täällä olevien tietojen avulla voit optimoida kuvasi verkkosivujen nopeammaksi. Voit silti käyttää kauniita kuvia, mutta ne eivät aiheuta merkittävää hidastumista sivusi latausaikojen kanssa.

Tämä tekee kävijöistä iloisia ja parantaa verkkosivustosi yleistä toimintaa. Harkitse seuraavia tarkistuslistan kohtia, kun optimoit kuviasi:

  • Harkitse vektorimuotoja, koska ne toimivat korkearesoluutioisissa ja useissa laitteissa, koska ne ovat mittakaavasta ja resoluutiosta riippumattomia.
  • Kaikki SVG-varat on pakattava ja pienennettävä. Tämä poistaa tarpeettomat metatiedot.
  • Rasterimuodoissa pelataan optimaalisilla laatuasetuksilla. Tämä voi säästää huomattavan määrän tavuja.
  • Selvitä kullekin omaisuudelle toiminnalliset vaatimuksesi ja valitse paras muoto rasterikuville.
  • Automatisoi aina kun mahdollista varmistaaksesi kuvan jatkuvan optimoinnin.
  • Tarjoa skaalattuja kuvia niin, että luonnollinen kuvan koko ja näytön koko ovat mahdollisimman samankaltaiset.

Yhteenvetona voidaan todeta, että kuvanoptimoinnissa on sekä tiedettä että taidetta. Tiede on erittäin kehittyneiden algoritmien ja tekniikoiden käyttö.

Yksittäisen kuvan pakkaamiseen liittyvien lopullisten vastausten puute on taide. Viime kädessä sinun pitäisi leikkiä ja kokeilla. Tämän avulla voit tehdä parhaan valinnan kuvatiedostoillesi ja kuinka ne vaikuttavat verkkosivusi nopeuteen.

Wixin kaltaisten kolmansien osapuolien verkkosivustojen rakentajien suosion ja hienostuneisuuden myötä suunnittelijoiden on helppo saada huolimaton, mutta keskittyä hyvien kuvanoptimointiprosessien kehittämiseen ja ylläpitämiseen riippumatta siitä, siirretäänkö mallia tai rakennetaan sivusto tyhjästä..

Viitteet ja kuvapisteet:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector