Suurin ongelma, joka liittyy HTML-kuvien lisäämiseen etälähteistä, on, että se voi johtaa sivun hitaisiin latausaikoihin. Tämä johtuu siitä, että selaimen on tehtävä erillinen pyyntö jokaisesta kuvasta, joka voi lisääntyä nopeasti, jos sivulla on useita kuvia. Lisäksi, jos etälähde on pois käytöstä tai sen yhteys on hidas, tämä voi edelleen viivästyttää sivun latausaikoja. Lopuksi on myös lisääntynyt tietoturva-aukkojen riski, koska kuvat haetaan ulkoisesta lähteestä.
<img src="https://example.com/image.jpg" alt="Example Image">
1. Tämä koodirivi on HTML-kuvatunniste, jota käytetään kuvan näyttämiseen verkkosivulla.
2. Attribuutti "src" määrittää näytettävän kuvan URL-osoitteen, tässä tapauksessa se on "https://example.com/image.jpg".
3. Attribuutti "alt" tarjoaa vaihtoehtoisen tekstin kuvalle, tässä tapauksessa se on "Esimerkkikuva".
img src -attribuutti
HTML:n attribuuttia img src käytetään määrittämään kuvan lähde. Sitä käytetään sisällä -tunniste määrittääksesi kuvan lähteen. Tämän määritteen arvon tulee olla kelvollinen URL-osoite, joka osoittaa kuvatiedostoon. Tämä attribuutti vaaditaan kaikille verkkosivun kuville, ja sen avulla selain voi paikantaa ja näyttää kuvan.
Kuinka lisään ulkoisen kuvan HTML:ään
Ulkoisen kuvan lisääminen HTML:ään on melko yksinkertaista. Sinun tarvitsee vain käyttää -tunniste ja määritä kuvan lähde src-attribuutilla. Syntaksi ulkoisen kuvan lisäämiseksi HTML:ään näyttää tältä:
"Image_url" on linkki kuvatiedostoon ja "vaihtoehtoinen teksti" on kuvaus kuvan sisällöstä (esteettömyyssyistä).
Jos esimerkiksi haluat lisätä ulkoisen kuvan verkkosivustostasi nimeltä my-image.jpg, koodisi näyttäisi tältä:
