Startseite Skripte für das Wintersemester 2018/19 Webdesign Responsive Images, Transitions & Javascript Responsive Images


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!

Guter Artikel dazu von Chris Coyer