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

Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

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)

LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEYEAH!

SRCSET

Page 15: Responsive Images für Designer! Ein Blick auf "srcset" (Open Web Space . Juli 2014)

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)

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)

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)

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)

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)

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)

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/