Gunnar Bittersmann: Unterschiedliche Bilder für unterschiedliche Screengrößen

Beitrag lesen

@@Kerstin1

könnt Ihr mir, einer Anfängerin in der Webentwicklung, anhand eines einfachen Beispiels erläutern, wie ich je nach Screengröße

<img src="/bilder/Kgross.PNG" alt="Kerstin"/>
bzw.
<img src="/bilder/Kklein.PNG" alt="Kerstin"/> anzeigen kann?

Das hängt davon ab, worin sich die beiden Bilder unterscheiden.

Wenn sich die Bilder lediglich in ihrer Auflösung unterscheiden, ansonsten aber gleichen Bildinhalt und gleiches Seitenverhältnis haben: Resolution Switching mit srcset

<img srcset="" src="" alt="Kerstin"/> 

Wenn das kleine Bild aber bspw. ein Ausschnitt des großen ist und ein anderes Seitenverhältnis hat: Art_Direction

<picture>
  <source media="(min-width: …)" srcset="/bilder/Kgross.PNG"/>
  <source srcset="/bilder/Kklein.PNG"/>
  <img src="" alt="Kerstin"/>
</picture>

LLAP 🖖

--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

—Marc-Uwe Kling