Skaalattujen kuvien tarjoaminen WordPressissä
On selvää, että valokuvat ovat olennainen osa elämäämme. Näin ollen emme voi kuvitella verkkosivustoa ilman kuvia. Kuvat houkuttelevat kävijöitä ja auttavat järjestämään sivuston sisältöä. Kuvat tekevät sivusta mielenkiintoisen, informaatiorikkaan ja parantavat käyttökokemusta.
Ylisuuret kuvat vaikuttavat negatiivisesti verkkosivuston suorituskykyyn ja kuvat tulisi skaalata aktiivisen teeman mukaan. Ne ovat tärkeitä elementtejä verkkosivustolla, ja ne ansaitsevat näkyvän parhaalla mahdollisella tavalla. On erittäin tärkeää tarjota skaalattuja kuvia WordPress-sivustolla.
Skaalattujen kuvien koot mukautuvat oikeaan kokoon HTML:ssä ja CSS:ssä määritettyjen mittojen mukaan. Silti monet verkkovastaavat eivät kiinnitä huomiota tähän tärkeään suunnittelun yksityiskohtaan. Otetaan esimerkiksi kuva, jossa on 500 x 500 pikseliä 50 x 50 pikkukuvaa varten. Web-selaimen on ladattava kuva ja skaalattava se, jotta se voidaan näyttää vierailijalle. On selvää, että tämä on tehotonta ja hidastaa verkkosivustoa.
Eroa resoluutiossa ei näy, ja siksi suurten kuvien mukanaan tuoma paino jää usein huomaamatta. Useimmat ihmiset eivät edes tiedä, että tämä ylilyönti aiheuttaa ongelmia ja ongelma jätetään korjaamatta. Ne jättävät ongelman selaimen hoidettavaksi.
Miksi tarjota skaalattuja kuvia WordPress-sivustolla
Suurin syy skaalattujen kuvien näyttämiseen on se, että täydet korkearesoluutioiset kuvat hidastavat verkkosivustoa ja pidentävät latausaikoja. Hidas sivu johtaa huonoon käyttökokemukseen, ja sen sijaan, että he jäävät ja palaavat, he lähtevät ja pysyvät poissa. Kissmetrics-tilastot osoittavat, että sivuilla, joiden latautuminen kestää yli kolme sekuntia, on korkeampi poistumisprosentti.
Verkkosivustolle optimoitujen kuvakokojen ansiosta latausajat ovat lyhyempiä. Ihmiset viipyvät todennäköisemmin verkkosivustolla pidempään ja palaavat myöhemmin. Tämä parantaa hakukoneoptimointia ja sivuston sijoitus nousee.
Suuret kuvat aiheuttavat erilaisia ongelmia
- Se lisää stressiä selaimen suorituskykyyn. Selaimen on suoritettava ylimääräisiä palvelinpyyntöjä. Se ei voi näyttää kuvaa nopeasti, mutta sen sijaan kuvan koon muuttaminen vie aikaa ja resursseja. Raskaat kuvat sisältävät verkkosivustot latautuvat kauemmin.
- Jos suuria korkearesoluutioisia kuvia näytetään pieninä verkkosivustolla, ne tuhlaavat aikaa ja lataavat tietoja. Näin on esimerkiksi silloin, kun matkapuhelimesta otettua selfietä käytetään käsittelemättömänä pieneen Gravatariin.
Kuvien skaalaaminen WordPress-verkkosivustoilla
Käsin
Aloita alusta analysoimalla verkkosivuston kuvat GTMetrixin kaltaisella työkalulla. GTMetrix on suorituskyvyn analysointityökalu, jonka on suunnitellut GT.net. Tämä yritys on kuuluisa nopeuden valvonnasta ja optimoinnista sekä Pingdomista. Kun GTMetrics on analysoinut verkkosivuston, se luo raportin. Tämä näyttää, mitä ongelmia havaittiin ja mitä parannuksia se suosittelee.
Kun tarkastelet raporttia, kiinnitä erityistä huomiota Rakenne-välilehteen. Napsauta tässä välilehdessä Oikean kokoiset kuvat. Se näyttää luettelon kuvista, joiden koko ei ole oikea.
WordPress ei kutista kuvia automaattisesti, kun mahdollista, vaan lisää ne sivustolle ilman käsittelyä. Tämän ongelman ratkaisemiseksi on kaksi vaihtoehtoa.
Vaikka lisäosien käyttö ei olisikaan haluttu tapa, on muita vaihtoehtoja. Ensimmäinen tapa skaalata kuvia on säätää kunkin kuvan kokoa manuaalisesti käyttämällä valokuvaeditoria, kuten Photoshopia. Saattaa tuntua, että tämä menetelmä on tehoton, mutta todellisuudessa se ei ole sitä.
Photoshopissa on muita vaihtoehtoja kuvan korkeuden ja leveyden säätämisen lisäksi. Toinen asia, joka kannattaa tarkistaa tässä, on kuvan resoluutio. Suurimman osan ajasta verkkosovelluksissa 72 PPI riittää hyvään katselukokemukseen.
Toinen on käyttää laajennusta kuvien skaalaamiseen. Tämä vaihtoehto on helppo ja nopea. WordPressillä on oma ominaisuus tätä varten, srcset. Tämä työkalu voi muuntaa grafiikkaa, kuten kuvia, responsiivisiksi tiedostoiksi. Responsiiviset kuvat säätyvät automaattisesti eri laitteille ja näyttökokoille. Alla on joitain muita laajennuksia, jotka tekevät hienoa työtä kuvakoon pienentämisessä.
Optimole
Erinomainen työkalu skaalattujen kuvien tarjoamiseen on Optimole. Se on WordPress-laajennus, joka pystyy muuttamaan kuvien kokoa eri laitteille. Se muuttaa automaattisesti kuvan optimaalisen koon erilaisten laitteiden mukaan. Tuloksena on korkealaatuisia skaalattuja kuvia.
Nämä ovat joitakin ominaisuuksia, jotka tekevät Optimolesta mielenkiintoisen valinnan:
- Käsitellyt kuvat ovat pienempiä, mutta säilyttävät laatunsa.
- Se on täysin automatisoitu. Kyse on vain kuvien lataamisesta.
- Optimole tukee kaikkia kuvaformaatteja.
- Se tukee erilaisia kuvatyyppejä, mukaan lukien Retina ja WebP
- Se tukee pilvikuvakirjastoja.
- Optimole tarjoaa maailmanlaajuisia CDN – kuvia ilmaiseksi.
- Haluttua kokoa ei tarvitse arvata tai arvioida. Optimole käyttää vierailijan laitemäärityksiä.
- Verkkosivustojen rakentajille, kuten Elementorille, on täysi tuki .
Automaattinen kuvankäsittelyominaisuus on suuri plussa tästä laajennusvaihtoehdosta. Ei tarvitse käydä läpi pitkää asetusluetteloa; Optimole tekee kaiken itse.
Kohdassa Media > Optimole laajennus näyttää palveluiden tilan sekä käytön ja saavutetun optimoinnin.
Asetukset-osio sijaitsee Asetukset – välilehden alla. Tässä on kaksi ominaisuutta, jotka ansaitsevat erityisen maininnan:
- Ota kuvan vaihto käyttöön. Varmista, että tämä vaihtoehto on käytössä, jotta voit nauttia edistyneistä kuvanoptimointitoiminnoista.
- Skaalaa kuvia & Lazy Load. Tämä on vaihtoehto, joka mahdollistaa kuvien skaalauksen vierailijan näytön koon mukaan. Laiska lataus näyttää nämä kuvat.
Smush-kuvan optimointi
Smush Image Optimization, Compression ja Lazy Load on tämän laajennusluettelon koko nimi. Kun pienennät kuvien kokoa, varmista, että kuvan laatu säilyy.
Jotta voit käyttää WP Smushia, se on ensin asennettava ja aktivoitava. Sitten Smush-kuvake ilmestyy WordPressin kojelautaan. Kojelaudassa näkyvät Smushin keräämät tilastot ja eri ominaisuuksien nykyinen tila.
Kokonaissäästötietojen viereen ilmestyy kuvake, joka ilmoittaa kaikki mediakirjaston kuvat, jotka vaativat käsittelyn. Jos on kuvia, jotka tarvitsevat käsittelyä, helpoin tapa on siirtyä Bulk Smush -moduuliin. Tämä pienentää kaikkien merkittyjen kuvien kokoa.
Jos haluat käsitellä kuvia yksitellen, siirry Mediakirjastoon ja napsauta Tarkista kuvat uudelleen. Tämä tuottaa reaaliaikaisen päivityksen kuvista, jotka pitäisi käsitellä.
Smushissa on ominaisuuksia, jotka mahdollistavat kuvien suodattamisen Smush-tilan mukaan ja kuvien valikoivan skaalauksen.
Smush-laajennus ei käsittele videoita ja GIF-tiedostoja. Skaalaamattomat kuvatiedostot osoittavat, että Smushin tehoa ei käytetä täysimääräisesti.
EWWW Image Optimizer
EWWW Image Optimizer on myös WordPress-laajennus, joka optimoi kuvakoot ja -muodot. Se toimii uusien latausten ja olemassa olevien kuvien kanssa. Siinä on vaihtoehto, joka skannaa kaikki verkkosivuston kuvat ja optimoi ne.
Aloita sen käyttö lataamalla ja asentamalla se ja aktivoimalla se WordPress-sivuston järjestelmänvalvojalta. Napsauta Dashboard-ympäristössä Asetukset ja sitten EWWW Image Optimizer. Perusasetukset -kohdassa on useita vaihtoehtoja, kuten metatietojen poistaminen kuvista. GIF-, JPG- ja PNG-optimointitasoksi tulee asettaa Pixel Perfect. Vain maksullinen versio mahdollistaa myös PDF-tiedostojen optimoinnin.
Muuta kokoa -välilehti sisältää Resize Detection -vaihtoehdon. Muuta kuvien kokoa -kohdassa aseta kuvien suurin sallittu korkeus ja leveys verkkosivustolla. Ota myös käyttöön Muuta muiden kuvien kokoa ja Muuta olemassa olevien kuvien kokoa. Älä unohda tallentaa muutoksia.
ShortPixel
Viimeinen suositus skaalattujen kuvien näyttämiseen on ShortPixel- laajennus. Tämä on oikea vaihtoehto niille, jotka tarvitsevat skaalattuja kuvia, mutta joiden budjetti on tiukka. Ilmainen versio tarjoaa 100 kuvan skaalauskertaa kuukaudessa.
ShortPixel on suoraviivainen ja helppokäyttöinen. Se käsittelee kuvat automaattisesti käyttäjän määrittämiin mittoihin, kun ne ladataan verkkosivustolle. Automaattisen vaihtoehdon lisäksi on myös mahdollisuus käsitellä kuvia manuaalisesti.
Laajennus pienentää kuvan kokoa joko häviöttömästi tai resoluution menetyksellä. Se pystyy käsittelemään GIF-, JPEG- ja PNG-kuvia ja voi jopa optimoida PDF-tiedostoja.
Lopetetaan ajatuksia skaalattujen kuvien tarjoamisesta
On selvää, että on monia tapoja tarjota skaalattuja kuvia WordPress-sivustolla, eikä sen tekemisen tarvitse olla vaikeaa tai kallista. Ongelmana on se, että verkkosivusto on ollut verkossa pitkään ja käsiteltävänä on paljon kuvia.
Kuvien skaalaaminen on tärkeä taito jokaiselle, joka rakentaa tai ylläpitää verkkosivustoa. Se auttaa nopeuttamaan hitaita verkkosivustoja ja tarjoaa muita suorituskykyetuja. Oikea kuvamääritys parantaa minkä tahansa verkkosivuston nopeutta.
Jos pidit tämän artikkelin lukemisesta skaalattujen kuvien näyttämisestä WordPressissä, sinun kannattaa tutustua tähän artikkeliin, jossa kerrotaan puhelinnumeron saamisesta napsautettavaksi WordPressissä.
Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten Facebook-videon upottamisesta WordPressiin, WordPress-teemojen poistamisesta, WordPress-tietokannan tarkistamisesta haittaohjelmien varalta, HTML-tiedoston lataamisesta WordPressiin, WordPress-tietokannan siivoamisesta, kuinka löytää ja korvata URL-osoite WordPress-tietokannasta ja kuinka piilottaa kirjoittaja WordPressissä