Responsive Images
![](https://scripte.matthias-edler-golla.de/content/3-wise18/1-webdesign/8-responsive-typo-responsive-images-transitions-javascript/2-responsive-images/seerose.jpg)
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!