Responsive Images
Ein Bild wird in verschiedenen Größen und Auflösungen auf dem Server gespeichert – das jeweils für die Browserbreite bzw. Auflösung passende wird automatisch vom Browser verwendet. Die nicht passenden Bildgrößen werden gar nicht erst vom Server geladen…
Schaut Euch die Demo an!
HTML
<img src="p/seerose.jpg" alt="seerose" srcset="p/seerose_2x.jpg 2x">Das „normale“ Bild (960px breit) wird via srcset auf einem Retina-Display gegen das hochauflösende (1920px breit) ausgetauscht.
HTML
<img src="p/seerose.jpg" alt="seerose" srcset="p/seerose_960w.jpg 960w, p/seerose_600w.jpg 600w, p/seerose_300w.jpg 300w" sizes="100vw">Es wird das Bild geladen, das für die jeweilige Viewport-Breite geeignet ist – damit kann man z.B. auch unterschiedliche Ausschnitte für unterschiedliche Viewport-Breiten festlegen!