{"id":227407,"date":"2022-09-14T11:04:00","date_gmt":"2022-09-14T08:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227407"},"modified":"2022-11-08T23:42:11","modified_gmt":"2022-11-08T20:42:11","slug":"skaalattujen-kuvien-tarjoaminen-wordpressissae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/skaalattujen-kuvien-tarjoaminen-wordpressissae\/","title":{"rendered":"Skaalattujen kuvien tarjoaminen WordPressiss\u00e4"},"content":{"rendered":"\n

On selv\u00e4\u00e4, ett\u00e4 valokuvat ovat olennainen osa el\u00e4m\u00e4\u00e4mme. N\u00e4in ollen emme voi kuvitella verkkosivustoa ilman kuvia. Kuvat houkuttelevat<\/strong> k\u00e4vij\u00f6it\u00e4 ja auttavat j\u00e4rjest\u00e4m\u00e4\u00e4n sivuston sis\u00e4lt\u00f6\u00e4. Kuvat tekev\u00e4t sivusta mielenkiintoisen, informaatiorikkaan ja parantavat k\u00e4ytt\u00f6kokemusta.<\/p>\n

Ylisuuret kuvat vaikuttavat negatiivisesti verkkosivuston suorituskykyyn<\/strong> ja kuvat tulisi skaalata aktiivisen teeman mukaan. Ne ovat t\u00e4rkeit\u00e4 elementtej\u00e4 verkkosivustolla, ja ne ansaitsevat n\u00e4kyv\u00e4n parhaalla mahdollisella tavalla. On eritt\u00e4in t\u00e4rke\u00e4\u00e4 tarjota skaalattuja kuvia WordPress-sivustolla.<\/p>\n

Skaalattujen kuvien koot mukautuvat oikeaan kokoon HTML:ss\u00e4 ja CSS:ss\u00e4 m\u00e4\u00e4ritettyjen mittojen mukaan. Silti monet verkkovastaavat eiv\u00e4t kiinnit\u00e4 huomiota t\u00e4h\u00e4n t\u00e4rke\u00e4\u00e4n suunnittelun yksityiskohtaan. Otetaan esimerkiksi kuva, jossa on 500 x 500 pikseli\u00e4 50 x 50 pikkukuvaa varten. Web-selaimen on ladattava kuva ja skaalattava se, jotta se voidaan n\u00e4ytt\u00e4\u00e4 vierailijalle. On selv\u00e4\u00e4, ett\u00e4 t\u00e4m\u00e4 on tehotonta ja hidastaa<\/strong> verkkosivustoa.<\/p>\n

Eroa resoluutiossa ei n\u00e4y, ja siksi suurten kuvien mukanaan tuoma paino j\u00e4\u00e4 usein huomaamatta. Useimmat ihmiset eiv\u00e4t edes tied\u00e4, ett\u00e4 t\u00e4m\u00e4 ylily\u00f6nti aiheuttaa ongelmia ja ongelma j\u00e4tet\u00e4\u00e4n korjaamatta. Ne j\u00e4tt\u00e4v\u00e4t ongelman selaimen hoidettavaksi.<\/p>\n

Miksi tarjota skaalattuja kuvia WordPress-sivustolla<\/h2>\n

\"Skaalattujen<\/a><\/p>\n

Suurin syy skaalattujen kuvien n\u00e4ytt\u00e4miseen on se, ett\u00e4 t\u00e4ydet korkearesoluutioiset kuvat hidastavat<\/strong> verkkosivustoa ja pident\u00e4v\u00e4t latausaikoja<\/strong>. Hidas sivu johtaa huonoon k\u00e4ytt\u00f6kokemukseen<\/strong>, ja sen sijaan, ett\u00e4 he j\u00e4\u00e4v\u00e4t ja palaavat, he l\u00e4htev\u00e4t ja pysyv\u00e4t poissa. Kissmetrics-tilastot osoittavat, ett\u00e4 sivuilla, joiden latautuminen kest\u00e4\u00e4 yli kolme sekuntia, on korkeampi poistumisprosentti<\/strong>.<\/p>\n

Verkkosivustolle optimoitujen kuvakokojen ansiosta latausajat ovat lyhyempi\u00e4<\/strong>. Ihmiset viipyv\u00e4t<\/strong> todenn\u00e4k\u00f6isemmin verkkosivustolla pidemp\u00e4\u00e4n ja palaavat<\/strong> my\u00f6hemmin. T\u00e4m\u00e4 parantaa hakukoneoptimointia<\/strong> ja sivuston sijoitus nousee<\/strong>.<\/p>\n

Suuret kuvat aiheuttavat erilaisia \u200b\u200bongelmia<\/h3>\n
    \n
  1. Se lis\u00e4\u00e4 stressi\u00e4 selaimen suorituskykyyn<\/strong>. Selaimen on suoritettava ylim\u00e4\u00e4r\u00e4isi\u00e4 palvelinpyynt\u00f6j\u00e4. Se ei voi n\u00e4ytt\u00e4\u00e4 kuvaa nopeasti, mutta sen sijaan kuvan koon muuttaminen vie aikaa ja resursseja. Raskaat kuvat sis\u00e4lt\u00e4v\u00e4t verkkosivustot latautuvat kauemmin.<\/li>\n
  2. Jos suuria korkearesoluutioisia kuvia n\u00e4ytet\u00e4\u00e4n pienin\u00e4 verkkosivustolla, ne tuhlaavat aikaa ja lataavat tietoja<\/strong>. N\u00e4in on esimerkiksi silloin, kun matkapuhelimesta otettua selfiet\u00e4 k\u00e4ytet\u00e4\u00e4n k\u00e4sittelem\u00e4tt\u00f6m\u00e4n\u00e4 pieneen Gravatariin.<\/li>\n<\/ol>\n

    Kuvien skaalaaminen WordPress-verkkosivustoilla<\/h2>\n

    K\u00e4sin<\/h3>\n

    \"Skaalattujen<\/a><\/p>\n

    Aloita alusta analysoimalla<\/strong> verkkosivuston kuvat GTMetrixin kaltaisella ty\u00f6kalulla. GTMetrix on suorituskyvyn analysointity\u00f6kalu, jonka on suunnitellut GT.net. T\u00e4m\u00e4 yritys on kuuluisa nopeuden valvonnasta ja optimoinnista sek\u00e4 Pingdomista. Kun GTMetrics on analysoinut verkkosivuston, se luo raportin. T\u00e4m\u00e4 n\u00e4ytt\u00e4\u00e4, mit\u00e4 ongelmia<\/strong> havaittiin ja mit\u00e4 parannuksia<\/strong> se suosittelee.<\/p>\n

    Kun tarkastelet raporttia, kiinnit\u00e4 erityist\u00e4 huomiota Rakenne-v\u00e4lilehteen<\/strong>. Napsauta t\u00e4ss\u00e4 v\u00e4lilehdess\u00e4 Oikean kokoiset kuvat. Se n\u00e4ytt\u00e4\u00e4 luettelon kuvista, joiden koko ei ole oikea.<\/p>\n

    WordPress ei kutista kuvia automaattisesti, kun mahdollista, vaan lis\u00e4\u00e4 ne sivustolle ilman k\u00e4sittely\u00e4. T\u00e4m\u00e4n ongelman ratkaisemiseksi on kaksi vaihtoehtoa.<\/p>\n

    Vaikka lis\u00e4osien k\u00e4ytt\u00f6 ei olisikaan haluttu tapa, on muita vaihtoehtoja. Ensimm\u00e4inen tapa skaalata kuvia on s\u00e4\u00e4t\u00e4\u00e4 kunkin kuvan kokoa manuaalisesti k\u00e4ytt\u00e4m\u00e4ll\u00e4 valokuvaeditoria, kuten Photoshopia<\/strong>. Saattaa tuntua, ett\u00e4 t\u00e4m\u00e4 menetelm\u00e4 on tehoton, mutta todellisuudessa se ei ole sit\u00e4.<\/p>\n

    \"Skaalattujen<\/a><\/p>\n

    Photoshopissa on muita vaihtoehtoja kuvan korkeuden ja leveyden s\u00e4\u00e4t\u00e4misen<\/strong> lis\u00e4ksi. Toinen asia, joka kannattaa tarkistaa t\u00e4ss\u00e4, on kuvan resoluutio<\/strong>. Suurimman osan ajasta verkkosovelluksissa 72 PPI riitt\u00e4\u00e4 hyv\u00e4\u00e4n katselukokemukseen.<\/p>\n

    Toinen on k\u00e4ytt\u00e4\u00e4 laajennusta<\/strong> kuvien skaalaamiseen. T\u00e4m\u00e4 vaihtoehto on helppo ja nopea. WordPressill\u00e4 on oma ominaisuus t\u00e4t\u00e4 varten, srcset<\/strong>. T\u00e4m\u00e4 ty\u00f6kalu voi muuntaa grafiikkaa, kuten kuvia, responsiivisiksi tiedostoiksi<\/strong>. Responsiiviset kuvat s\u00e4\u00e4tyv\u00e4t automaattisesti eri laitteille ja n\u00e4ytt\u00f6kokoille. Alla on joitain muita laajennuksia, jotka tekev\u00e4t hienoa ty\u00f6t\u00e4 kuvakoon pienent\u00e4misess\u00e4.<\/p>\n

    Optimole<\/h3>\n

    \"Skaalattujen<\/a><\/p>\n

    Erinomainen ty\u00f6kalu skaalattujen kuvien tarjoamiseen on Optimole<\/strong>. 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<\/strong>.<\/p>\n

    N\u00e4m\u00e4 ovat joitakin ominaisuuksia, jotka tekev\u00e4t Optimolesta mielenkiintoisen valinnan:<\/p>\n