Kurzüberblick über Responsive Image Techniken beim Webmontag Karksruhe

1. Responsive Images
15 Techniken in 15 Minuten
Sven Wolfermann | maddesigns
Webmontag Karlsruhe, 13.05.2013

2. Sven Wolfermann (35)
Freelancer für moderne Webentwicklung
(HTML5, CSS3, Responsive Webdesign) aus Berlin
CSS3 Adventskalender 2010/2011
schreibt Artikel für das T3N-, PHP- und
Webstandards-Magazin (new: Screengui.de)
mobile Geek
Wer ist die Flitzpiepe da überhaupt?
Twitter: @maddesigns
Web: http://maddesigns.de
·
·
·
·
·
·
·
/

3. Responsive Webdesign
Flexible Spaltenraster, die auf Prozentwerte basieren
Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an
CSS3 um Gerätegröße abzufragen und Inhalte anzupassen
·
·
·
Quelle Bild: http://macrojuice.com/
/

4. flexible Medieninhalte
keine statische Breitenangaben
img,embed,object,video{
max-width:100%;
}
Für Medien muss im CSS eine flexible Breite gesetzt werden, die Höhe
soll sich automatisch in Relation anpassen.
img,embed,object,video{
max-width:100%;/*max.originalpxwidth*/
height:auto;
/*width:auto;*/
}
/

5. Responsive Images
Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen
Große Bilder werden zwar verkleinert dargestellt, laden aber
unnötige Datenmengen
<img>-Tag ist nicht dafür ausgelegt
ein responsives Bildformat gibt es nicht
Polyfills müssen her
·
·
·
·
·
/

6. Bilder größter Anteil bei Websites
http://httparchive.org/trends.php
/

7. Größenübersicht deviceoptimierter Bilder
Bild von @grigs
/

8. Asset Loading
Tests des Ladeverhalten mobiler Browser
Tim Kadlec – Media Query & Asset Downloading Results
/

9. Lösungsansätze für Bildgrößenproblematik
CSS3-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 Images
Ansatz der Filament Group
<imgsrc="small.jpg?full=large.jpg">
https://github.com/filamentgroup/Responsive-Images
Responsive Media - Blog Post von @drublic
/

11. Responsive Images
Die 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 nicht
vom Browser in den DOM eingefügt (und geladen), wenn JavaScript
aktiviert 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> Element
Aktuelle W3C-Diskussion – <picture> Element
Aufbau 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. Picturefill
Polyfill 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 Technique
Media Queries innerhalb SVG
<imgsrc="file.svg"alt="responsiveimage">
Nachteil: SVG erst ab Android 4
http://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 Images
http://adaptive-images.com/
/

18. adaptive-images.com Script einbinden
Cookie-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>
#EnableURLrewriting
RewriteEngineOn
Options+FollowSymlinks
#AdaptiveImages
#don'tapplytheAIbehaviourtoimagesinsideAI'scachefolder:
RewriteCond%{REQUEST_URI}!ai-cache
#furtherdirectoriesthatshouldn'tuseAI
RewriteCond%{REQUEST_URI}!cssimages
#SendanyGIF,JPG,orPNGrequestthatISNOTstoredinsideoneoftheabovedirectories
RewriteRule^.*.(jpg|jpeg|png|gif)$adaptive-images.php[L]
...
</IfModule>
jQuery Variante – http://responsiveimg.com/
/

20. Responsive Images Service – ReSRC.it
http://www.resrc.it/
/

21. Lösungsvarianten für Bildausschnitte – Focal Point
Bildinhalte anders fokussieren
http://www.cdnconnect.com/docs/focal-point-css/pure-html-css-responsive-high-resolution-images-solution
/

22. Retina – hochauflösende Bilder
CSS 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 JPGs
left: JPEG, 500x508, quality=60, size=87802
right: JPEG, 1000x1015, quality=15, size=83150 (file size -5%)
http://retinafy.me/jpgs/
/

24. Icon Fonts == Dingbats on dope
Vorteil:
Farben und Größe der Icons kann leicht mit CSS angepasst werden
zusätzlich können CSS-Effekte, wie text-shadow für die Darstellung
genutzt werden
·
·
/

25. Icon Fonts
kostenloser Service icomoon.io
http://icomoon.io/
/

26. nachgezählt? Es waren nur 10 Techniken in 20min ;)
weitere interessante Links
8 Guidelines and 1 Rule for Responsive Images
Sensible jumps in responsive image file sizes
Responsive Images for Ruby on Rails
Riloadr – cross-browser framework-independent responsive images
loader
/

27. Danke für die Aufmerksamkeit!
Sven Wolfermann | maddesigns
http://maddesigns.de
HTML5 slideshow by Google
/