Responsiiviset kuvat

Silktide lataa sivusi oikeassa selaimessa ja vertaa kunkin kuvan todellisia mittoja sen näytettyyn kokoon. Kuvista, jotka ovat paljon suurempia kuin ne näkyvät näytöllä, raportoidaan sekä ylimääräisen tarkkuuden vuoksi hukkaan menevät tiedot.

Miksi tämä on tärkeää

Yleinen tilanne: 4 000 pikselin valokuva ladataan palveluun, ja sivu näyttää sen 400 pikselin levyisenä. Vierailijat lataavat täyden tarkkuuden tiedoston – mahdollisesti megatavuja – nähdäkseen kuvan, jonka paljon pienempi tiedosto renderöisi täysin samannäköisenä. Hukka on suurinta puhelimissa, joissa on pienimmät näytöt ja usein hitaimmat sekä kalleimmat yhteydet. Nopeammat sivut pitävät enemmän vierailijoita, ja ne vaikuttavat hakusijoitukseen Core Web Vitals -mittareiden kautta.

Näin korjaat ongelman

1. Tarjoa jokaisesta kuvasta useita kokoja ja anna selaimen valita laitteelle sopiva koko:

<!-- Selain lataa vain tarvitsemansa koon -->
<img src="flower-800.jpg"
     srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Kukkakoju torilla">

2. Automatisoi koon muuttaminen. Useimmat CMS-järjestelmät luovat ladattaessa useita kokoja, ja CDN-palvelut voivat muuttaa kokoa toimituksen yhteydessä – kumpikin estää ongelman toistumisen.
3. Muuta vähintään yksittäisten kuvien koko suunnilleen niiden näytettävään kokoon ennen niiden lataamista palveluun.

Näin Silktide testaa tämän

1. Lataa sivu oikeassa selaimessa ja tallentaa koon, jossa kukin kuva näytetään, huomioiden nykyaikaisten laitteiden tarkemmat näytöt.
2. Vertaa sitä tosiasiassa ladatun kuvatiedoston mittoihin.
3. Raportoi kuvat, joissa ylimääräinen koko on merkittävä, sekä tavumäärän, jonka oikein mitoitettu kuva säästäisi, suurimmasta alkaen.

Vianmääritys

Miten tämä eroaa muista kuvatarkistuksista?

Tämä tarkistus koskee mittoja: sivu tarjoaa fyysisesti suuremman kuvan kuin sivu näyttää. Kuvien pakkaus ja kuvien optimointi koskevat tiedoston pienentämistä samoilla mitoilla, kun taas Nykyaikaiset kuvamuodot käsittelee muuntamista WebP- tai AVIF-muotoon. Sama kuva voi esiintyä useassa näistä – korjaukset täydentävät toisiaan.

Kuva näyttää terävältä korkean tarkkuuden näytön ansiosta

Nykyaikaiset näytöt tarvitsevatkin enemmän pikseleitä kuin näytetty koko antaa ymmärtää, ja mittauksessa huomioidaan tämä. Kuvista raportoidaan vain, kun ne ylittävät sen, mitä edes korkean tarkkuuden näyttö voi hyödyntää.

Lisätietoja

• Responsiiviset kuvat (MDN)
• Mitoita kuvat oikein (web.dev)
• Kuvien optimointi