HTML
Bilder

Syntax

• <img src="" alt="">

parametrar

Skapa en bild

Använd bildtaggen för att lägga till en bild på en sida.

Bildtaggar ( img ) har inga stängande taggar. De två huvudattributen du ger till img taggen är src , bildkällan och alt , som är en alternativ text som beskriver bilden.

<img src="images/hello.png" alt="Hello World">

Du kan också hämta bilder från en webbadress:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

Obs: Bilder är inte tekniskt infogade på en HTML-sida, bilder är länkade till HTML-sidor. Taggen <img> skapar ett utrymme för den refererade bilden.

Det är också möjligt att bädda in bilder direkt på sidan med bas64:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Tips: Om du vill länka en bild till ett annat dokument ska du helt enkelt bo in <img> -taggen i <a> -taggarna.

Bildbredd och höjd

Obs! Attributen för bredd och höjd skrivs inte ut på bilder och har aldrig varit. Deras användning har dock gjorts mycket strängare.

Dimensionerna hos en bild kan anges med width och height attribut för bildtaggen:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

Genom att ange en bilds width och height din struktur webbläsaren ett tips om hur sidan ska läggas ut även om du bara anger den faktiska bildstorleken. Om bilddimensionerna inte anges måste webbläsaren beräkna layoutens sida efter att bilden har laddats, vilket kan göra att sidan "hoppar runt" medan den laddas.

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

Att välja alt text

Alt-text används av skärmläsare för synskadade användare och av sökmotorer. Det är därför viktigt att skriva bra alt-text för dina bilder.

Texten ska se korrekt ut även om du byter ut bilden med dess altattribut. Till exempel:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

Utan bilderna skulle detta se ut:

Anonym användaravatar En anonym användare skrev:

Lorem ipsum dolor sed.

Redigera ikon / Radera ikon

För att korrigera detta:

• Ta bort alt-texten för avataren. Den här bilden lägger till information för synskådade användare (en lätt identifierbar ikon för att visa att användaren är anonym) men denna information finns redan tillgänglig i texten. ¹
• Ta bort "ikonen" från alt-texten för ikonerna. Att veta att detta skulle vara en ikon om det var där hjälper inte att förmedla dess faktiska syfte.

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

En anonym användare skrev:

Lorem ipsum dolor sed.

Redigera / radera

fotnoter

¹ Det finns en semantisk skillnad mellan att inkludera ett tomt altattribut och helt utesluta. Ett tomt altattribut indikerar att bilden inte är en viktig del av innehållet (som är sant i det här fallet - det är bara en tillsatsbild som inte är nödvändig för att förstå resten) och därför kan utelämnas från rendering. Bristen på ett altattribut indikerar dock att bilden är en viktig del av innehållet och att det helt enkelt inte finns någon textekvivalent för rendering.

Responsiv bild med srcset-attributet

Använda srcset med storlekar

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes är som mediefrågor som beskriver hur mycket utrymme bilden tar i visningsområdet.

• Om viewport är större än 1200px är bilden exakt 580px (till exempel är vårt innehåll centrerat i behållaren som är max 1200px bred. Bilden tar hälften av det minus marginaler).
• Om viewport är mellan 640px och 1200px tar bilden 48% av viewporten (till exempel bildskalor med vår sida och tar hälften av visningsbredden minus marginaler).
• om viewport är någon annan storlek, i vårt fall mindre än 640px, tar bilden 98% av viewporten (till exempel bildskalor med vår sida och tar full bredd av viewport minus marginaler). Media villkor måste utelämnas för sista artikel.

srcset berättar bara webbläsaren vilka bilder vi har tillgängliga och vilka storlekar de har.

• img/hello-300.jpg är 300px bred,
• img/hello-600.jpg är 600px bred,
• img/hello-900.jpg är 900px bred,
• img/hello-1200.jpg är 1200px bred

src är alltid obligatorisk bildkälla. Vid användning med srcset , kommer src att tjäna fallback-bild om webbläsaren inte stöder srcset .

Använda srcset utan storlekar

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset ger en lista över tillgängliga bilder, med enhets-pixel-förhållande x deskriptor.

• Om enhets-pixel-förhållandet är 1, använd img/hello-300.jpg
• Om enhets-pixel-förhållandet är 2, använd img/hello-600.jpg
• Om enhets-pixel-förhållandet är 3, använd img/hello-1200.jpg

src är alltid obligatorisk bildkälla. Vid användning med srcset , kommer src att tjäna fallback-bild om webbläsaren inte stöder srcset .

Responsiv bild med bildelement

Koda

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

Användande

För att visa olika bilder under olika skärmbredd måste du inkludera alla bilder med källtaggen i en bildtagg som visas i exemplet ovan.

Resultat

• På skärmar med skärmbredd> 600px visar det large_image.jpg
• På skärmar med skärmbredd> 450px visar det small_image.jpg
• På skärmar med annan skärmbredd visar det default_image.jpg