Pildielemendid

Pildielemendid on HTML-i ehituselementide grupp, mis on mõeldud piltide kuvamiseks veebilehel. Eestis ja rahvusvahelises kontekstis kasutatakse nende all mõlemat alatüüpi: img, picture ja source. Need elemendid võimaldavad kuvada pilte erinevates suurustes ja formaatides, parandada jõudlust ning tagada ligipääsetavus.

Img on kõige levinum pildielement, mis otseselt kuvab pildi veebilehel. Olulised atribuudid on src (pildi allikas) ja alt (pildikirjeldus, mis on ekraanil loetav või liikuvloojale narratiiv). Soovitav on määrata width ja height, mis aitab brauserid reserveerida ruumi ja vältida layouti rämpsumist. srcset ja sizes võimaldavad servata erinevaid lahendusi ja kujundeid sõltuvalt ekraanist ja lausest. Atribuudid nagu loading="lazy" ja decoding võivad parandada jõudlust. Dekoratiivsed pildid võivad omada alt="" või olla märgitud muul viisil, kui sisuline kirjeldus puudub.

Picture ja source pakuvad art-directioni ja mitme allika kasutamist. Picture sisaldab ühte või mitut source-elementi ja lõpp-IMG-i fallbacki. Source määrab srcseti, meedia (media) ja tüübi (type), et brauser saaks valida sobiva pildi vastavalt ekraanile, piksli tiirule või vormingule (nt WebP või AVIF). Kui mingit sobivat allikat ei leita, valib brauser IMG-i sisestatud fallback-i. See mehhanism võimaldab pakkuda optimaalseid formaate ja suurusi ning seeläbi vähendada andmemahtu ja suurendada laadimiskiirust.

Parimad tavad koos pildielementidega hõlmavad alt-teksti kasutamist iga pildi jaoks, srcseti ja size-i rikkalikku kasutamist, vormingute mitmekesisust (nt modernsed formaadid koos tagasivahetusega), ning lazy loadingi kasutamist suurte või mittetähtsate piltide puhul. Samuti on oluline testida ligipääsetavust ja jõudlust erinevates brauserites.