Your SlideShare is downloading. ×
0
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)

877

Published on

Kurzüberblick über Responsive Image Techniken beim Webmontag Karksruhe

Kurzüberblick über Responsive Image Techniken beim Webmontag Karksruhe

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
877
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Responsive Images15 Techniken in 15 MinutenSven Wolfermann | maddesignsWebmontag Karlsruhe, 13.05.2013
  • 2. Sven Wolfermann (35)Freelancer für moderne Webentwicklung(HTML5, CSS3, Responsive Webdesign) aus BerlinCSS3 Adventskalender 2010/2011schreibt Artikel für das T3N-, PHP- undWebstandards-Magazin (new: Screengui.de)mobile GeekWer ist die Flitzpiepe da überhaupt?Twitter: @maddesignsWeb: http://maddesigns.de·······/
  • 3. Responsive WebdesignFlexible Spaltenraster, die auf Prozentwerte basierenVariable Bilder- und Videogrößen – Bilder passen sich den Spalten anCSS3 um Gerätegröße abzufragen und Inhalte anzupassen···Quelle Bild: http://macrojuice.com//
  • 4. flexible Medieninhaltekeine statische Breitenangabenimg,embed,object,video{max-width:100%;}Für Medien muss im CSS eine flexible Breite gesetzt werden, die Höhesoll sich automatisch in Relation anpassen.img,embed,object,video{max-width:100%;/*max.originalpxwidth*/height:auto;/*width:auto;*/}/
  • 5. Responsive ImagesProblem ist, dass sich Bilddatenmengen nicht dynamisch anpassenGroße Bilder werden zwar verkleinert dargestellt, laden aberunnötige Datenmengen<img>-Tag ist nicht dafür ausgelegtein responsives Bildformat gibt es nichtPolyfills müssen her·····/
  • 6. Bilder größter Anteil bei Websiteshttp://httparchive.org/trends.php/
  • 7. Größenübersicht deviceoptimierter BilderBild von @grigs/
  • 8. Asset LoadingTests des Ladeverhalten mobiler BrowserTim Kadlec – Media Query & Asset Downloading Results/
  • 9. Lösungsansätze für BildgrößenproblematikCSS3-Ansatz von Nicolas Gallagher<imgsrc="image.jpg"alt=""data-src-600px="image-600px.jpg">Umsetzung auf CSS-Basis@media(min-device-width:600px){img[data-src-600px]{content:attr(data-src-600px,url);}}@media(min-device-width:800px){img[data-src-800px]{content:attr(data-src-800px,url);}}http://nicolasgallagher.com/responsive-images-using-css3//
  • 10. Responsive ImagesAnsatz der Filament Group<imgsrc="small.jpg?full=large.jpg">https://github.com/filamentgroup/Responsive-ImagesResponsive Media - Blog Post von @drublic/
  • 11. Responsive ImagesDie aktuell einfachste und beste Lösung meiner Meinung nach ist die<noscript>-Lösung mit HTML5 data-Attributen<noscriptdata-large="Koala-large.jpg"data-small="Koala-small.jpg"data-alt="Koala"><imgsrc="Koala-small.jpg"alt="Koala"/></noscript>Vorteil: Assets die im <noscript>-Tag eingebunden sind, werden nichtvom Browser in den DOM eingefügt (und geladen), wenn JavaScriptaktiviert ist. Ressourcen werden also nicht doppelt geladen.http://www.monoliitti.com/images//
  • 12. Responsive Images – <noscript>jQuery Snippet$(noscript[data-large][data-small]).each(function(){varsrc=screen.width>=500?$(this).data(large):$(this).data(small);$(<imgsrc="+src+"alt="+$(this).data(alt)+"/>).insertAfter($(this));});/
  • 13. <picture> ElementAktuelle W3C-Diskussion – <picture> ElementAufbau wie <video> Element + srcset für Retina-Images<picturewidth="500"height="500"><sourcemedia="(min-width:45em)"srcset="large-1.jpg1x,large-2.jpg2x"><sourcemedia="(min-width:18em)"srcset="med-1.jpg1x,med-2.jpg2x"><sourcesrcset="small-1.jpg1x,small-2.jpg2x"><imgsrc="small-1.jpg"alt=""><p>Accessibletext</p></picture>CSS Retina-Support für background-images/*Safari,Chromesupportsbackground-image:-webkit-image-set();*/background-image:-webkit-image-set(url(cloud-sd.png)1x,url(cloud-hd.png)2x);picture element proposal/
  • 14. PicturefillPolyfill für den <picture> Ansatz<divdata-picturedata-alt="Alttext"><divdata-src="small.jpg"></div><divdata-src="medium.jpg" data-media="(min-width:400px)"></div><divdata-src="large.jpg" data-media="(min-width:800px)"></div><divdata-src="extralarge.jpg"data-media="(min-width:1000px)"></div><!--Fallbackcontentfornon-JSbrowsers.Sameimgsrcastheinitial,unqualifiedsou<noscript><imgsrc="external/imgs/small.jpg"alt="Alt"></noscript></div>https://github.com/scottjehl/picturefill/
  • 15. Clown Car TechniqueMedia Queries innerhalb SVG<imgsrc="file.svg"alt="responsiveimage">Nachteil: SVG erst ab Android 4http://www.standardista.com/responsive-images-clown-car-technique//
  • 16. Clown Car Technique<svgxmlns="http://www.w3.org/2000/svg"viewBox="00300329"preserveAspectRatio="xMidYM<title>ClownCarTechnique</title><style>svg{background-size:100%100%;background-repeat:no-repeat;}@mediascreenand(max-width:400px){svg{background-image:url(images/small.png");}}@mediascreenand(min-width:401px)and(max-width:700px){svg{background-image:url(images/medium.png);}}@mediascreenand(min-width:701px)and(max-width:1000px){svg{background-image:url(images/big.png);}}@mediascreenand(min-width:1001px){svg{background-image:url(images/huge.png);}}</style></svg>/
  • 17. Adaptive Imageshttp://adaptive-images.com//
  • 18. adaptive-images.com Script einbindenCookie-Snippet so früh wie möglich im <head><head><script>document.cookie=resolution=+Math.max(screen.width,screen.height)+;path=/;</script>…</head>PHP-Script anpassen (global Breakpoints)$resolutions=array(1382,992,768,480,320);/
  • 19. .htaccess anpassen<IfModulemod_rewrite.c>#EnableURLrewritingRewriteEngineOnOptions+FollowSymlinks#AdaptiveImages#dontapplytheAIbehaviourtoimagesinsideAIscachefolder:RewriteCond%{REQUEST_URI}!ai-cache#furtherdirectoriesthatshouldntuseAIRewriteCond%{REQUEST_URI}!cssimages#SendanyGIF,JPG,orPNGrequestthatISNOTstoredinsideoneoftheabovedirectoriesRewriteRule^.*.(jpg|jpeg|png|gif)$adaptive-images.php[L]...</IfModule>jQuery Variante – http://responsiveimg.com//
  • 20. Responsive Images Service – ReSRC.ithttp://www.resrc.it//
  • 21. Lösungsvarianten für Bildausschnitte – Focal PointBildinhalte anders fokussierenhttp://www.cdnconnect.com/docs/focal-point-css/pure-html-css-responsive-high-resolution-images-solution/
  • 22. Retina – hochauflösende BilderCSS abhängig von der Pixeldichte@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),onlyscreenand(min-resolution:192dpi){/*Retina-specificstuffhere*/}http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries//
  • 23. Retina JPGsleft: JPEG, 500x508, quality=60, size=87802right: JPEG, 1000x1015, quality=15, size=83150 (file size -5%)http://retinafy.me/jpgs//
  • 24. Icon Fonts == Dingbats on dopeVorteil:Farben und Größe der Icons kann leicht mit CSS angepasst werdenzusätzlich können CSS-Effekte, wie text-shadow für die Darstellunggenutzt werden··/
  • 25. Icon Fontskostenloser Service icomoon.iohttp://icomoon.io//
  • 26. nachgezählt? Es waren nur 10 Techniken in 20min ;)weitere interessante Links8 Guidelines and 1 Rule for Responsive ImagesSensible jumps in responsive image file sizesResponsive Images for Ruby on RailsRiloadr – cross-browser framework-independent responsive imagesloader/
  • 27. Danke für die Aufmerksamkeit!Sven Wolfermann | maddesignshttp://maddesigns.deHTML5 slideshow by Google/

×