HTML IMG -tunnisteen käyttö kuvissa ja objekteissa
HTML-IMG-tunniste säätelee kuvien ja muiden staattisten graafisten objektien lisäämistä verkkosivun sisällä. Tämä yhteinen tunniste tukee useita pakollisia ja valinnaisia attribuutteja, jotka lisäävät rikkautta kykyksesi suunnitella kiehtova, kuva keskittynyt verkkosivusto.
Esimerkki täysin muodostetusta HTML IMG-tagista näyttää tältä:
Pakolliset IMG-tunnisteominaisuudet
SRC. Ainoa attribuutti, jonka haluat saada kuvan näyttämiseen verkkosivulla, on SRC-attribuutti. Tämä ominaisuus tunnistaa näytettävän kuvatiedoston nimen ja sijainnin.
ALT. Myös voimassa olevan XHTML- ja HTML4-koodin kirjoittaminen edellyttää ALT-attribuuttia. Tätä ominaisuutta käytetään tarjoamaan ei-visuaalisille selaimille tekstiä, joka kuvailee kuvaa. Selaimet näyttävät vaihtoehtoisen tekstin eri tavoin. Jotkut näyttävät sen ponnahdusikkuna, kun siirrät hiiren kuvan päälle, muut näyttävät sen ominaisuuksina, kun napsautat kuvaa hiiren kakkospainikkeella ja jotkut eivät näytä sitä lainkaan.
Käytä tekstin tekstiä antamaan lisätietoja yksityiskohtiin, jotka eivät ole olennaisia tai tärkeitä verkkosivun tekstille. Muista kuitenkin, että näytönlukijoissa ja muissa tekstin vain selaimissa tekstiä luetaan sivun loppuosan kanssa. Hämmennyksen välttämiseksi käytä kuvailevaa alt-tekstiä, joka kertoo (esimerkiksi), "Tietoja Web-suunnittelusta ja HTML: stä" vain "logon sijaan".
HTML5: ssä ALT-määritettä ei aina vaadita, koska sen avulla voit lisätä kuvauksen lisää kuvausta. Voit myös käyttää attribuuttia ARIA-DESCRIBEDBY ilmoittamaan tunnuksen, joka sisältää täydellisen kuvauksen.
Alt tekstiä ei myöskään vaadita, jos kuva on puhtaasti koristeellinen, kuten graafinen esitys web-sivun tai kuvakkeiden yläosassa. Mutta jos et ole varma, sisällytä tekstit vain siinä tapauksessa.
Suositeltavat IMG-ominaisuudet
Leveys ja korkeus . Sinun tulisi päästä käyttämään aina WIDTH- ja HEIGHT-attribuutteja. Ja sinun pitäisi aina käyttää todellista kokoa eikä muokata kuvia selaimella.
Nämä attribuutit nopeuttavat sivun renderointia, koska selain voi jakaa tilaa kuvion suunnittelussa ja jatka sitten lataamista lopullisesta sisällöstä sen sijaan, että odotettaisiin koko kuvan lataamista.
Muut hyödylliset IMG-ominaisuudet
NIMI . Attribuutti on globaali määritelmä, jota voidaan soveltaa mihin tahansa HTML-elementtiin . Lisäksi TITLE-attribuutilla voit lisätä lisätietoa kuvasta.
Useimmat selaimet tukevat TITLE-määritettä, mutta ne toimivat eri tavoin. Jotkut näyttävät tekstin ponnahdusikkunaan, kun taas toiset näyttävät sen tietonäyttöissä, kun käyttäjä napsauttaa hiiren oikeaa kuvaa. Voit käyttää TITLE-attribuuttia kirjoittamaan lisätietoja kuvasta, mutta älä anna luottaa siihen, että nämä tiedot ovat piilotettuja tai näkyviä. Älä ehdottomasti käytä tätä piilottaaksesi hakukoneiden avainsanoja. Useimmat hakukoneet rankaavat tätä käytäntöä.
USEMAP ja ISMAP . Nämä kaksi määritettä asettavat asiakkaiden puolelle () ja palvelinpuolen (ISMAP) kuvakartat kuviin.
LONGDESC . Attribuutti tukee URL-osoitteita pitemmän kuvauksen kuvaamiseen. Tämä ominaisuus tekee kuvista helpompaa.
Epäonnistuneet ja vanhentuneet IMG-attribuutit
Useat määritteet ovat vanhentuneet HTML5: ssa tai vanhentuneet HTML4: ssä. Parhaat HTML-ratkaisut löytyvät muista ratkaisuista näiden attribuuttien sijaan.
RAJAT . Määritelmä määrittää kuvan ympärillä olevien reunojen leveyden pikseleissä. Se on hylätty CSS: n hyväksi HTML4: ssa ja vanhentunut HTML5: ssa.
ALIGN . Tämän attribuutin avulla voit sijoittaa kuvan tekstin sisälle ja tulostaa sen ympärille. Voit kohdistaa kuvan oikealle tai vasemmalle. Se on hylätty HTML4: n float CSS -ominaisuuden hyväksi ja HTML5: ssa vanhentunut.
HSPACE ja VSPACE . HSPACE ja VSPACE-attribuutit lisäävät vaakasuoraa tilaa (HSPACE) ja pystysuoraan (VSPACE). Valkoinen tila lisätään graafin molemmille puolille (ylä- ja alaosa tai vasemmalle ja oikealle), joten jos tarvitset vain tilaa toisella puolella, käytä CSS: ää. Nämä attribuutit on hylätty HTML4: ssä marginaalin CSS-ominaisuuden hyväksi, ja ne ovat HTML5: ssa vanhentuneita.
LOWSRC . LOWSRC-attribuutti tarjoaa vaihtoehtoisen kuvan, kun kuvan lähde on niin suuri, että se latautuu erittäin hitaasti. Esimerkiksi sinulla saattaa olla 500 kt: n kuva, jonka haluat näyttää Web-sivulla, mutta 500 kt: n lataaminen kestää kauan. Joten luot paljon pienemmän kopion kuvaa, ehkä mustavalkoisena tai vain äärimmäisen optimoituna, ja laita se LOWSRC-attribuuttiin. Pienempi kuva latautuu ja näytetään ensin ja sitten kun suurempi kuva näkyy, se korvaa pienen lähteen.
LOWSRC-attribuutti lisättiin Netscape Navigator 2.0: een IMG-tunnisteeseen. Se oli osa DOM-tasoa 1, mutta poistettiin sitten DOM-tasolta 2. Selaintuki on luonnostellut tätä ominaisuutta varten, vaikka monet sivustot väittävät, että kaikki nykyaikaiset selaimet tukevat sitä. HTML5: ssä ei ole vanhentunut tai vanhentunut HTML5: ssä, koska se ei ole koskaan virallinen osa mihinkään määritykseen.
Vältä tämän attribuutin käyttämistä ja optimoi kuvat siten, että ne latautuvat nopeasti. Sivun latausnopeus on kriittinen osa hyvää Web-suunnittelua ja suuret kuvat hitaat sivut alas - vaikka käytätkin LOWSRC-määritettä.