Responsiva bilder

Steg för steg-guide:

• Använd elementet <picture>: Detta element låter dig ange flera bildkällor för olika storlekar och enheter.
• Ange srcset-attribut: Detta attribut anger en lista över bildkällor med deras respektive bredd. Exempel: srcset="/bild-100w.jpg 100w, /bild-200w.jpg 200w, /bild-300w.jpg 300w"
• Bestäm responsiva brytpunkter: Dessa punkter anger vid vilka skärmstorlekar en ny bildkälla ska användas. Exempel: (max-width: 600px) 100w, (max-width: 900px) 200w, 300w

CSS-exempel:

picture {
  max-width: 100%;
}

source {
  display: none;
}

source[media="(max-width: 600px)"] {
  display: block;
}

@media (min-width: 601px) and (max-width: 900px) {
  source[media="(max-width: 900px)"] {
    display: block;
  }
}

@media (min-width: 901px) {
  source[media="(min-width: 901px)"] {
    display: block;
  }
}

Förbättrad tillgänglighet för svensktalande:

• Använd beskrivande alt-text: Ge en kort beskrivning av vad bilden visar för användare med synnedsättningar.
• Skapa captions: Lägg till en förklaring under bilden för att ge ytterligare sammanhang.
• Tänk på färgkontrast: Se till att texten och bilden är tillräckligt kontrasterande för att vara lättlästa.