![Page 1: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/1.jpg)
OPENWEB
SPACE
RESPONSIVE IMAGES FÜR DESIGNER, EIN BLICK AUF SRCSET
Lukas KereczFORMLOS Berlin
![Page 2: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/2.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE
Lukas KereczB.A. Kommunikationsdesigner, Dipl. Volkswirt
zehnjährige Erfahrungen im Web-Bereich
FORMLOS BerlinBranding & Interface Design
Dozent design akademie berlinWebdesign & Webdevelopment
![Page 3: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/3.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE
https://www.flickr.com/photos/unwiredben/2922315952 https://www.flickr.com/photos/miniyo73/8371683905
DAS PROBLEM
![Page 4: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/4.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE
http://en.wikipedia.org/wiki/File:Vector_Video_Standards2.svg
FRAGMENTIERUNG
![Page 5: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/5.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!
![Page 6: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/6.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!
![Page 7: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/7.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!
![Page 8: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/8.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!
![Page 9: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/9.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!2048 x 1638 Pixel2.609 kB = 2,49 MB
![Page 10: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/10.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“
Einzeln für alle!
![Page 11: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/11.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“
https://twitter.com/danscotton/status/184672861158518785
Einzeln für alle!
![Page 12: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/12.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“
https://twitter.com/danscotton/status/184672861158518785
Einzeln für alle!min. 19 Versionen
![Page 13: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/13.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEWAS NUN?
https://www.flickr.com/photos/helga/3952984450
![Page 14: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/14.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEYEAH!
SRCSET
![Page 15: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/15.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEPIXELDICHTE
1x
2x 1.6x
![Page 16: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/16.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACESRCSET!
<img srcset=“small.jpg 1x, medium.jpg 1.6x, large.jpg 2x“ src=“small.jpg“ alt=“Much Venice - very wow!“ />
![Page 17: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/17.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
![Page 18: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/18.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
![Page 19: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/19.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
![Page 20: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/20.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
<img srcset="large.jpg 1024w, medium-crop.jpg 640w, small-crop.jpg 320w" src="small-crop.jpg" alt="Much Venice - very wow!" />
![Page 21: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051610/548299cbb4af9f6e0d8b4851/html5/thumbnails/21.jpg)
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACERESSOURCEN & WEITERE INFOS
http://sjhcockrell.com/writing/2013/john-cleveley-responsive-news/
http://vimeo.com/99683665
http://ericportis.com/posts/2014/srcset-sizes/
http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
http://www.matthew-steele.com/responsive-images-picture-srcset/
http://picture.responsiveimages.org/