Slike

Test za slike pregledava sve slike na web-stranici kako bi provjerio da li su povezane u skladu s današnjom najboljom praksom. Također provjeravamo da li su slike u odgovarajućem web-formatu.

Zašto vršimo ovo testiranje?

Proizvođači web-stranica često loše uključuju slike na svojim stranicama, stvarajući probleme pristupačnosti za posjetitelje i povećavajući vremena učitavanja stranice.

Važno je uključiti atribute širine i visine u svaku oznaku slike. Obilježje je valjano bez atributa visine i širine, ali njihovo uključivanje je u skladu s današnjom najboljom praksom. Bez tih atributa, posjetiteljev web preglednik ne zna koliko mjesta ostaviti za sliku sve dok je ne preuzme. To znači da jednom kada se slika učita, posjetiteljev preglednik mora stranicu ponovno producirati, što povećava vrijeme učitavanja stranice i može uzrokovati 'skok' elemenata na stranici, posebno ako korisnik ima sporu internetsku vezu. Također je važno da se korištenjem tih atributa slika ne rastegne; oni bi trebali biti jednaki stvarnim dimenzijama slike. To također produžuje učitavanje stranice.

Kako vršimo ovo testiranje?

Preuzeli smo sve slike na stranici i zabilježili rezultat prema nekoliko kriterija:

• Is it a non web-friendly format? Only webp, avif, jpeg, png, svg and gif images are allowed.
• Nedostaju li atributi širine i visine? To je kada izostavite atribute širine i visine za sliku.
• Deformira se u pregledniku? To se događa kada je izvorna slika različite veličine naspram atributa širine i visine navedenih u HTML-u. Ako želite rastegnuti sliku u pregledniku, trebali bi koristiti CSS pošto oznaka opisuje izvornu sliku, a ne kako bi ona trebala biti prikazana.

Što mogu poduzeti?

Pobrinite se da su sve slike koje koristite u formatu prikladnom za web, kao što su jpeg, gif ili png. Također bi trebali uključiti atribute širine i visine za sve slike, a to bi trebale biti stvarne dimenzije izvorne slike. Ako je potrebno rastegnuti sliku u pregledniku, koristite CSS. Oznaku slike u HTML-u određuje izvorna slika, a CSS određuje kako ona treba biti prikazana.