Kuvat ja sivun nopeus: muodot, koot, laiska lataus

Miksi kuvat ratkaisevat latausajan

Google kirjoittaa, että kuvat kasvattavat sivun kokonaiskokoa usein eniten, mikä voi tehdä sivujen lataamisesta hidasta ja kallista. Kaksi Core Web Vitals -mittaria riippuu suoraan kuvista. Largest Contentful Paint (LCP) mittaa latausta: Google neuvoo, että suurimman elementin pitäisi näkyä 2,5 sekunnin kuluessa siitä, kun sivun lataus alkaa. Monilla sivuilla tämä elementti on kuva, esimerkiksi suuri valokuva yläosassa. Cumulative Layout Shift (CLS) mittaa visuaalista vakautta, ja sen pitäisi pysyä alle 0,1:n. Kuvat, jotka saapuvat ilman varattua tilaa, työntävät tekstiä alaspäin ja nostavat tätä arvoa.

Oikea muoto

• Valokuvat: JPEG toimii kaikkialla. WebP ja AVIF ovat samankaltaisella laadulla usein selvästi pienempiä.
• Teräväreunaiset tai läpinäkyvät grafiikat: PNG tai WebP ja AVIF, jotka voivat myös olla läpinäkyviä.
• Logot ja kuvakkeet: SVG, koska se pysyy terävänä kaikissa koissa ja on yleensä hyvin pieni.
• Google-haku tukee src-määritteessä kuvia muodoissa BMP, GIF, JPEG, PNG, WebP, SVG ja AVIF.

Jos tarjoat WebP- tai AVIF-kuvia, voit pitää JPEG-kuvan varavaihtoehtona picture-elementissä. Selain valitsee ensimmäisen lähteen, jonka se ymmärtää.

Oikea koko

Kuva, joka on 2400 pikseliä leveä mutta näytetään 600 pikselin levyisenä, tuhlaa suurimman osan tavuistaan. Vie kuvat suunnilleen siinä leveydessä, jossa ne näytetään, ja tarkoille näytöille noin kaksinkertaisena. Pakkaa ne sitten. Monissa kuvankäsittelyohjelmissa asteikon puolivälin tienoilla oleva laatuasetus riittää verkon valokuville. Tarkista tulos täysikokoisena ennen kuin korvaat alkuperäisen.

srcset ja sizes

Yksi tiedosto ei koskaan sovi jokaiselle näytölle. srcset-määritteellä tarjoat samasta kuvasta useita tiedostoja ja ilmoitat kunkin tiedoston leveyden. sizes-määritteellä kerrot selaimelle, kuinka leveänä kuva näytetään. Selain valitsee sitten pienimmän tiedoston, joka on riittävän terävä.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

Tässä esimerkissä kuva täyttää kapean näytön ja on leveämmillä näytöillä 700 pikselin levyinen. Google suosittelee pitämään src-määritteessä aina varavaihtoehdon. Kirjoita kolmen pisteen tilalle oikea alt-teksti.

Width ja height asettelun siirtymiä vastaan

Ilman width- ja height-määritteitä selain ei tiedä, kuinka paljon tilaa kuva tarvitsee, ennen kuin tiedosto saapuu. Kuvan alla oleva teksti hyppää silloin alaspäin. web.devin asettelun siirtymiä käsittelevä opas neuvoo: lisää kuviin ja videoelementteihin aina width- ja height-määritteet tiedoston pikselikoolla tai vähintään oikealla kuvasuhteella. Nykyaikaiset selaimet asettavat näistä arvoista kuvan oletuskuvasuhteen ja varaavat tilan. CSS:ssä width: 100% ja height: auto pitävät kuvan joustavana. Jos et voi asettaa määritteitä, opas mainitsee vaihtoehtona CSS-ominaisuuden aspect-ratio.

Laiska lataus

Kun käytät määritettä loading="lazy", selain lataa kuvan vasta, kun se tulee lähelle näkyvää aluetta. Tämä säästää dataa sivun alempana olevien kuvien kohdalla. Google sanoo laiskasta latauksesta: älä lisää sitä sisältöön, joka todennäköisesti näkyy heti, kun käyttäjä avaa sivun. Selaimen sisäänrakennettu laiska lataus on käytettävissä kuville ja iframe-kehyksille.

LCP-kuva

Yläosan suurin kuva, usein pääkuva tai tärkein tuotekuva, on sivun tärkein tiedosto. web.devin LCP-opas sanoo: älä koskaan lataa LCP-kuvaasi laiskasti. fetchpriority="high" on vihje selaimelle ladata se aikaisin. Oppaan mukaan korkea prioriteetti useammalla kuin yhdellä tai kahdella kuvalla ei enää auta. Kuvat, joiden osoitteen skriptikirjasto piilottaa data-src-määritteeseen tai jotka ovat vain CSS-taustakuvia, selain löytää myöhään. Taustakuvalle opas mainitsee HTML:ssä esilatauksen link rel="preload" -elementillä. AVIF tai WebP ja pienempi tiedosto lyhentävät myös latausaikaa.

Nähdäksesi, miten sivusi suoriutuvat, Google ohjaa Search Consolen Core Web Vitals -raporttiin. Yksittäiselle sivulle selaimesi suorituskykytyökalut näyttävät, mikä elementti on LCP-elementti ja mitkä elementit siirtävät asettelua. Mittaa ennen muutosta ja sen jälkeen, jotta tiedät, auttoiko se.

Lyhyt tarkistuslista

• Ladataanko yläosan suurin kuva normaalisti eikä laiskasti?
• Onko jokaisella img-elementillä width ja height, tai onko tila varattu aspect-ratio-ominaisuudella?
• Onko jokainen tiedosto suunnilleen niin leveä kuin se näytetään, ja onko se pakattu?
• Tulevatko suuret valokuvat useassa leveydessä srcset- ja sizes-määritteillä?
• Onko JPEG- tai PNG-tiedostoja, jotka voisivat olla WebP- tai AVIF-muodossa?

Työskentele Do4U:n kanssa

Kuvien tarkistus lukee yhden sivun ja jokaisen sen kuvan. Jokaisesta tiedostosta se raportoi muodon, tiedostokoon ja pikselit sekä HTML:stä width ja height, loading, fetchpriority, srcset ja sizes, picture-lähteet ja style-määritteiden taustakuvat. Do4U arvioi HTML:n perusteella todennäköisen LCP-kuvan. Se ei mittaa sitä, koska todellisen LCP-elementin määrää selain. Saat taulukon kuvista havaintoineen, kokonaispainon ja lyhyen yhteenvedon. JavaScriptin lisäämät kuvat ja ulkoisten CSS-tiedostojen taustakuvat eivät ole mukana. Tekoälyä ei käytetä, ja tarkistus on ilmainen, päivittäisellä rajalla.

Do4U löytää vihjeitä, sinä tarkistat ja päätät. Varmista LCP-elementti selaimesi suorituskykytyökaluilla ennen kuin muutat sivua.