OPEN
WEB
SPACE
RESPONSIVE IMAGES
FÜR DESIGNER,
EIN BLICK AUF SRCSET
Lukas Kerecz
FORMLOS Berlin
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE
Lukas Kerecz
B.A. Kommunikationsdesigner, Dipl. Volkswirt
zehnjährige Erfah...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE
https://www.flickr.com/photos/unwiredben/2922315952 https://www.flickr.com/...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE
http://en.wikipedia.org/wiki/File:Vector_Video_Standards2.svg
FRAGMENTIERUNG
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Ein...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Ein...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Ein...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Ein...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“
https://www.flickr.com/photos/96802003@N07/11968027233
Ein...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“
Einzeln für alle!
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“
https://twitter.com/danscotton/status/184672861158518785
Ei...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“
https://twitter.com/danscotton/status/184672861158518785
Ei...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEWAS NUN?
https://www.flickr.com/photos/helga/3952984450
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEYEAH!
SRCSET
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEPIXELDICHTE
1x
2x 1.6x
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACESRCSET!
<img
srcset=“small.jpg 1x,
medium.jpg 1.6x,
large.jpg 2x“
src=“small...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
<img
srcset="large.jpg 1024w,
medium-crop.jpg 640w,
small-cr...
LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACERESSOURCEN & WEITERE INFOS
http://sjhcockrell.com/writing/2013/john-cleveley...
Nächste SlideShare
Wird geladen in …5
×

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

1.782 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.782
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.135
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. OPEN WEB SPACE RESPONSIVE IMAGES FÜR DESIGNER, EIN BLICK AUF SRCSET Lukas Kerecz FORMLOS Berlin
  2. 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. 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. 4. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE http://en.wikipedia.org/wiki/File:Vector_Video_Standards2.svg FRAGMENTIERUNG
  5. 5. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“ https://www.flickr.com/photos/96802003@N07/11968027233 Einer für alle!
  6. 6. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“ https://www.flickr.com/photos/96802003@N07/11968027233 Einer für alle!
  7. 7. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“ https://www.flickr.com/photos/96802003@N07/11968027233 Einer für alle!
  8. 8. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEAKTUELLE „LÖSUNG“ https://www.flickr.com/photos/96802003@N07/11968027233 Einer für alle!
  9. 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. 10. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“ Einzeln für alle!
  11. 11. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“ https://twitter.com/danscotton/status/184672861158518785 Einzeln für alle!
  12. 12. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEBESSERE „LÖSUNG“ https://twitter.com/danscotton/status/184672861158518785 Einzeln für alle! min. 19 Versionen
  13. 13. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEWAS NUN? https://www.flickr.com/photos/helga/3952984450
  14. 14. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEYEAH! SRCSET
  15. 15. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACEPIXELDICHTE 1x 2x 1.6x
  16. 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. 17. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
  18. 18. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
  19. 19. LUKAS KERECZ × FORMLOS BERLIN × OPEN WEB SPACE„ART DIRECTION“
  20. 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. 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/

×