CodeGym /Kurse /Frontend SELF DE /Responsive Bilder

Responsive Bilder

Frontend SELF DE

Level 25 , Lektion 4

Verfügbar

5.1 Das Attribut srcset

Responsive Bilder spielen eine wichtige Rolle bei der Erstellung von reaktionsschnellen und optimierten Webseiten. Sie ermöglichen das Laden von Bildern in verschiedenen Größen und Auflösungen, abhängig vom Gerät und den Sichtbedingungen, was die Leistung und Benutzerfreundlichkeit verbessert. Die Hauptwerkzeuge zur Umsetzung responsiver Bilder in HTML sind die Attribute srcset und sizes.

Das Attribut srcset wird verwendet, um mehrere Bildquellen mit unterschiedlichen Größen oder Auflösungen anzugeben. Der Browser wählt das am besten geeignete Bild je nach Benutzergerät aus.

Syntax:

    
      <img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Beispielbild">

Wo:

src: gibt den Pfad zum Standardbild an
srcset: enthält eine Liste von Bildern und deren Eigenschaften, durch Kommas getrennt
1x, 2x: geben den Skalierungsfaktor an (z. B. 1x für normale Auflösung und 2x für Geräte mit hoher Pixeldichte)

Beispiel für die Verwendung von srcset:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Beispiel für die Verwendung von srcset</title>
        </head>
        <body>
          <img
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            alt="Beispiel für ein responsives Bild">
        </body>
      </html>

Erklärung des Codes:

src="images/default.jpg": gibt das Standardbild an
srcset: enthält eine Liste von Bildern mit deren Breite in Pixel (480w, 800w, 1200w). Der Browser wählt das am besten geeignete Bild je nach der Breite des Viewports

5.2 Das Attribut sizes

Das Attribut sizes wird in Verbindung mit srcset verwendet, um die Breite des Bildes unter verschiedenen Anzeigeumständen anzugeben. Dies ermöglicht es dem Browser, das passende Bild genauer auszuwählen.

Syntax:

HTML

    
      <img src="default.jpg"
      srcset="image1.jpg 480w, image2.jpg 800w"
      sizes="(max-width: 600px) 480px, 800px"
      alt="Beispielbild">

Wo:

sizes: enthält eine Liste von Anzeigeumständen und zugehörigen Bildbreiten
(max-width: 600px) 480px: wenn die Breite des Viewports kleiner oder gleich 600px ist, ein Bild mit 480px Breite verwenden
800px: in allen anderen Fällen ein Bild mit 800px Breite verwenden

Beispiel für die Verwendung von sizes:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Beispiel für die Verwendung von sizes</title>
          <style>
            .responsive-img {
              width: 100%;
              max-width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
        <img
          class="responsive-img"
          src="images/default.jpg"
          srcset="images/image-small.jpg 480w,
            images/image-medium.jpg 800w,
            images/image-large.jpg 1200w"
          sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
          alt="Beispiel für ein responsives Bild">
        </body>
      </html>

Erklärung des Codes:

sizes definiert die Breite des Bildes für verschiedene Anzeigeumstände:

Wenn die Breite des Viewports kleiner oder gleich 600px ist, ein Bild mit 480px Breite verwenden
Wenn die Breite des Viewports kleiner oder gleich 900px ist, ein Bild mit 800px Breite verwenden
In allen anderen Fällen ein Bild mit 1200px Breite verwenden

5.3 Responsive Bilder

Responsive Bild für verschiedene Bildschirmgrößen

Lass uns ein Beispiel erstellen, bei dem sich ein Bild an verschiedene Bildschirmgrößen anpasst, indem die Attribute srcset und sizes verwendet werden.

Beispiel:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Responsives Bild</title>
          <style>
            .responsive-img {
              width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
          <img
            class="responsive-img"
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
            alt="Beispiel für ein responsives Bild">
        </body>
      </html>

Erklärung des Codes:

src="images/default.jpg": gibt das Standardbild an
srcset: definiert drei Versionen des Bildes mit unterschiedlichen Breiten (480w, 800w, 1200w)
sizes: definiert die Breite des Bildes für verschiedene Bedingungen:
- bis 600px — ein Bild mit 480px Breite verwenden
- bis 900px — ein Bild mit 800px Breite verwenden
- größer als 900px — ein Bild mit 1200px Breite verwenden
.responsive-img: CSS-Klasse, die dem Bild eine Breite von 100% und eine automatische Höhe gibt, damit es den verfügbaren Platz nutzt und die Proportionen beibehält

Zurück Vorige Lektion

Weiter Nächste Lektion

Kommentare

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION