Kuvat

Kuvatestissä tarkistetaan, että kaikki sivuston kuvat on linkitetty uusimpien parhaiden käytäntöjen mukaisesti. Tarkistamme myös, että kuvat ovat sopivassa web-muodossa.

Miksi me testaamme tätä?

Verkkosivustojen tuottajat sisällyttävät usein kuvia sivuilleen huonosti, mikä aiheuttaa kävijöille saavutettavuusongelmia ja lisää sivun latausaikoja.

On tärkeää sisällyttää leveys- ja korkeusattribuutit jokaiseen kuvatunnisteeseen. Merkintä on kelvollinen ilman korkeus- ja leveysattribuutteja, mutta paras käytäntö on sisällyttää ne. Ilman näitä attribuutteja kävijän selain ei tiedä, kuinka paljon tilaa kuvalle on jätettävä, ennen kuin se on ladannut sen. Tämä tarkoittaa, että kun kuva on ladattu, kävijän selaimen on renderöitävä sivu uudelleen, mikä lisää sivun latausaikaa ja voi aiheuttaa sivun elementtien "hyppimistä", varsinkin jos käyttäjällä on hidas internetyhteys. On myös tärkeää, että kuvaa ei venytetä käyttämällä näitä määritteitä, vaan niiden on vastattava kuvan todellisia mittoja. Myös tämä lisää sivun latautumista.

Miten tämä testataan?

Lataamme kaikki sivuston kuvat ja merkitsemme pisteet useiden kriteerien perusteella:

• Onko se ei-verkkoystävällisessä muodossa? Vain webp-, avif-, jpeg-, png-, svg- ja gif-kuvat ovat sallittuja.
• Puuttuvatko leveys- ja korkeusattribuutit? Näin tapahtuu, kun jätät kuvan leveys- ja korkeusattribuutit pois.
• Venytetäänkö sitä selaimessa? Näin tapahtuu, kun lähdekuva on eri kokoinen kuin HTML:ssä määritetyt leveys- ja korkeusattribuutit. Jos haluat venyttää kuvaa selaimessa, sinun on käytettävä CSS:ää, koska tagi kuvaa lähdekuvaa, ei sitä, miten se pitäisi näyttää.

Mitä voin tehdä asialle?

Varmista, että kaikki käyttämäsi kuvat ovat verkkoystävällisessä muodossa, kuten jpeg, gif tai png. Kaikkiin kuviin on myös liitettävä leveys- ja korkeusattribuutit, joiden on oltava lähdekuvan todelliset mitat. Jos haluat venyttää kuvaa selaimessa, käytä CSS:ää. HTML:n image-tag määrittelee lähdekuvan, ja CSS määrittelee, miten se esitetään.