Imagini

Testul pentru imagini verifică toate imaginile de pe un site web pentru a verifica dacă acestea includ linkuri în conformitate cu cele mai recente bune practici. De asemenea, verificăm dacă imaginile sunt într-un format web corespunzător.

De ce realizăm un test pentru acest lucru?

Producătorii site-urilor web includ adesea imagini pe paginile lor în mod incorect, creând probleme de accesibilitate pentru vizitatori şi mărind timpii de încărcare a paginii.

Este important să se includă atributele de lăţime şi înălţime în fiecare etichetă de imagine. Reperul este valabil fără un atribut de înălţime şi lăţime, dar este cea mai bună practică pentru a le include. Fără aceste atribute, browserul web al vizitatorului nu stie cat de mult spatiu să păstreze pentru imagine până când nu o va descărca. Aceasta înseamnă că odată ce imaginea a încărcată, pagina trebuie să fie redată de către browserul vizitatorului, ceea ce creşte timpul de încărcare a paginii şi poate determina elementele de pe pagină să realizeze "salturi", mai ales dacă utilizatorul are o conexiune lentă de internet. Este de asemenea important să nu întindeţi imaginea utilizând aceste atribute, acestea trebuie să fie identice cu dimensiunile reale ale imaginii. Acest lucru măreşte de asemenea încărcarea paginii.

Cum realizăm testul pentru acest lucru?

Descărcăm toate imaginile de pe un site şi marcăm punctajul pentru mai multe criterii:

• Is it a non web-friendly format? Only webp, avif, jpeg, png, svg and gif images are allowed.
• Lipsesc atributele de lăţime şi înălţime? Acest lucru se întâmplă atunci când omiteţi atributele de lăţime şi înălţime pentru o imagine.
• Imaginea este întinsă în browser? Acest lucru se întâmplă atunci când imaginea sursă are o dimensiune diferită faţă de atributele de lăţime şi înălţime specificate în HTML. Dacă doriţi să întindeţi o imagine în browser, ar trebui să utilizaţi CSS întrucât eticheta descrie imaginea sursă, nu modul în care ar trebui să fie afişat.

Ce pot face cu privire la acest lucru?

Asiguraţi-vă că toate imaginile pe care le utilizaţi sunt într-un format web prietenos, precum JPEG, GIF sau PNG. Trebuie de asemenea să includeţi atributele de lăţime şi înălţime pentru toate imaginile şi acestea trebuie să fie dimensiunile reale din imaginea sursă. Dacă aveţi nevoie să întindeţi imaginea în browser, utilizaţi CSS. Eticheta de imagine în HTML defineşte imaginea sursă şi CSS defineşte modul în care ar trebui să fie prezentate.