Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014) www.open-web-space.de

1. OPEN
WEB
SPACE
RESPONSIVE IMAGES
FÜR DESIGNER,
EIN BLICK AUF SRCSET
Lukas Kerecz
FORMLOS Berlin

2. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE
Lukas Kerecz
B.A. Kommunikationsdesigner, Dipl. Volkswirt
zehnjährige Erfahrungen im Web-Bereich
FORMLOS Berlin
Branding & Interface Design
Dozent design akademie berlin
Webdesign & Webdevelopment

3. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE
https://www.flickr.com/photos/unwiredben/2922315952 https://www.flickr.com/photos/miniyo73/8371683905
DAS PROBLEM

4. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE
http://en.wikipedia.org/wiki/File:Vector_Video_Standards2.svg
FRAGMENTIERUNG

5. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!

6. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!

7. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!

8. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!

9. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Einer für alle!
2048 x 1638 Pixel
2.609 kB = 2,49 MB

10. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“
Einzeln für alle!

11. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“
https://twitter.com/danscotton/status/184672861158518785
Einzeln für alle!

12. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“
https://twitter.com/danscotton/status/184672861158518785
Einzeln für alle!
min. 19 Versionen

13. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEWAS NUN?
https://www.flickr.com/photos/helga/3952984450

14. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEYEAH!
SRCSET

15. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEPIXELDICHTE
1x
2x 1.6x

16. 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!“ />

17. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“

18. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“

19. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“

20. 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!" />

21. 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/