Mittlerweile als moderne Technik etabliert, beschreiben zahlreiche Tutorials Umsetzungsvorschläge für Responsive Webdesign; dennoch stößt man in Projekten mit einem skalierbaren Layout auf immer gleiche Schwierigkeiten. Häufig haben mobile Geräte eine deutlich schwächere technische Ausstattung als der heimische Desktoprechner, sodass Fragen der Performance auf unterschiedlichen Devices in den Vordergrund gerückt werden. Gerade bei Bildern tauchen Begriffe wie "Responsive Images" oder "Adaptive Images" immer wieder auf. Welche Lösungen wann Sinn ergeben und wie man mit Retina-Screens umgeht, wie der aktuelle Stand des HTML5-Responsive-Image-Elements ist und wie man eine schlanke Bilder erstellt, werden in der Präsentation gezeigt.

1. Responsive Images/Performance
Webinale, Berlin 04.06.2013
Sven Wolfermann | maddesigns

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. Bilder größter Anteil bei Websites
http://httparchive.org/trends.php
/

6. 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 helfen
·
·
·
·
·
/

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

8. Asset Loading Tests von Tim Kadlec
Tests des Ladeverhalten mobiler Browser
Beispiel: Test CSS-Hintergrundbilder
<divclass="test5"></div>
@mediaalland(min-width:601px){
.test5{
background-image:url("img/test5-desktop.png");
}
}
@mediaalland(max-width:600px){
.test5{
background-image:url("img/test5-mobile.png");
}
}
/

9. Asset Loading Tests von Tim Kadlec
nur das passende Bild wird geladen, gut!
Tim Kadlec – Media Query & Asset Downloading Results
/

10. Lösungsansätze für Responsive Images
CSS3-Ansatz von Nicolas Gallagher
<img src="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);
}
}
Nachteil: 2 Bilder werden geladen, keine Browserunterstützung
http://nicolasgallagher.com/responsive-images-using-css3/
/

11. Responsive Images
alter Ansatz der Filament Group
<imgsrc="small.jpg?full=large.jpg">
https://github.com/filamentgroup/Responsive-Images
Nachteil: nicht immer kann man "src" verändern (CMS)
wird von der Filament Group nicht mehr empfohlen und nicht
weiterentwickelt!
Responsive Media - Blog Post von @drublic
/

12. Responsive Images
Eine einfache und gute 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 nicht geladen), wenn
JavaScript aktiviert ist.
Ressourcen werden also nicht doppelt geladen.
JavaScript notwendig
http://www.monoliitti.com/images/
/

13. Responsive Images – <noscript>
jQuery Snippet
$('noscript[data-large][data-small]').each(function(){
var$this=$(this);
varsrc=screen.width>=500?
$this.data('large'):$this.data('small');
$('<imgsrc="'+src+'"alt="'+$this
.data('alt')+'"/>')
.insertAfter($this);
});
<!--smallscreenDOM-->
<noscript...>
<imgsrc="Koala-small.jpg"alt="Koala"/>
</noscript>
<imgsrc="Koala-small.jpg"alt="Koala">
/

14. <picture> Element
Aktuelle W3C-Diskussion – <picture> Element
Aufbau wie <video> Element
<picturewidth="500"height="500">
<sourcesrc="large.jpg" media="(min-width:45em)">
<sourcesrc="middle.jpg"media="(min-width:18em)">
<imgsrc="small.jpg"alt="">
<p>Accessibletext</p>
</picture>
picture element proposal
/

15. 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="xlarge.jpg"data-media="(min-width:1000px)"></div>
<!--Fallbackcontentfornon-JSbrowsers.Sameimgsrcas
theinitial,unqualifiedsourceelement.-->
<noscript>
<imgsrc="small.jpg"alt="Alt">
</noscript>
</div>
https://github.com/scottjehl/picturefill
/

16. Vorschlag: srcset-Attribut
<img> durch ein neues Attribut erweitern, das mehrere Bildpfade und -
qualitäten enthält
<imgalt="TheBreakfastCombo"src="banner.jpeg"
srcset="banner-HD.jpeg2x,banner-phone.jpeg100w,
banner-phone-HD.jpeg100w2x">
Support in CSS für background-images
/*Safari6,Chrome21supportsbackground-image:-webkit-image-set();*/
background-image:-webkit-image-set(
url(cloud-sd.png)1x,url(cloud-hd.png)2x);
-› Retina-Support für iOS
srcset attribut proposal
/

17. Responsive Images Art Direction Usecase
http://responsiveimages.org/
/

18. <picture> Element + srcset
Das beste aus beiden Vorschlägen
<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>
wird mit den Browserherstellern diskutiert, aktuell scheint die
Integration vom "srcset"-Attribut bevorzugt zu werden
https://code.google.com/p/chromium/issues/detail?id=233751
/

19. Clown Car Technique
Media Queries innerhalb SVG
<imgsrc="file.svg"alt="image">
Vorteil:
gut für Bild im Text
Nachteil:
SVG erst ab Android 4, IE9
Bild das erscheint, ist nicht das was man
herunterladen kann
http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-
web-design/
/

20. Clown Car Technique
file.svg
<svgxmlns="http://www.w3.org/2000/svg"
viewBox="00300329"preserveAspectRatio="xMidYMidmeet">
<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>
/

21. Adaptive Images
http://adaptive-images.com/
/

22. 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);
/

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

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

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

26. HiDPI screens aka „Retina“
/

27. „Retina“
doppelte Pixeldichte, iPhone = 326ppi
http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
/

28. List of mobile phones with HD display
http://en.wikipedia.org/wiki/List_of_mobile_phones_with_HD_display
/

29. Rumor: Apple to double
'iPhone 5S' Retina
resolution to 1.5M pixels
“
”
http://appleinsider.com/articles/13/05/28/rumor-apple-to-double-iphone-5s-retina-resolution-to-15m-pixels
/

30. Android Screen Vielfalt
viele Android-Screens sind bereits HiDPI-Screen mit 1,5-facher Pixeldichte
mittlerweile sogar Smartphones mit 3.0 Pixel-Desity -› HTC One
viele Low DPI-Screens (0.75 Pixel-Desity) gibt es ebenfalls
Samsung Android Screen Sizes:
2.8, 3.14, 3.2, 3.4, 3.5, 3.6, 3.65, 3.7, 3.97, 4, 4.2, 4.27, 4.3, 4.5, 4.52, 4.65, 4.8, 5, 5.3, 5.5, 5.8, 6.3, 7, 7.7, 8,
10, 10.1 (Tweet von @dkdsgn)
·
·
·
/

31. „Retina“
Problem: hochgezogene Pixel
mehrere optimierte Grafiken müssen bereit gestellt werden
Lösung wäre „image-set()“
background-image:-webkit-image-set(
url(cloud-sd.png)1x,url(cloud-hd.png)2x);
/

32. CSS Media Queries
CSS abhängig von der Pixeldichte
@mediaonlyscreenand(-webkit-max-device-pixel-ratio:0.75),
onlyscreenand(max-resolution:90dpi){
/*LowDPICSS*/
}
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),
onlyscreenand(min-resolution:144dpi){
/*HiDPICSS*/
}
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),
onlyscreenand(min-resolution:192dpi){
/*RetinaspecificCSS*/
}
http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
/

33. Bildgröße: 400x400px
Qualität: 60
Größe: 49.161 Byte
Bildgröße: 800x800px
Qualität: 15
Größe: 51.289 Byte
<img width="400" src="normal.jpg" alt=""> <img width="400" src="retina.jpg" alt="">
Retina JPGs
http://retinafy.me/jpgs/
/

34. SVG – Scalable Vector Graphic
optimal für Logos & Icons
<imgsrc="img/SVG-logo.svg"width="100"alt="">
<imgsrc="img/SVG-logo.svg"width="200"alt="">
<imgsrc="img/SVG-logo.svg"width="300"alt="">
/

35. SVG vs. PNG
SVG 7,57 KB 51,50 KB 4,50 KB
PNG 200px 6,50 KB 11,10 KB 4,18 KB
PNG 400px 11,80 KB 27,60 KB 8,32 KB
PNG 800px 18,50 KB 72,70 KB 14,80 KB
fett = PNG kleiner als SVG
die Datenmenge für kleine PNG-Bilder ist häufig kleiner als eine SVG-
Grafik
super WPO Slides von Christian @derSchepp Schäfer
/

36. Classic CSS Sprites – Image-Requests sparen
kleine Grafiken oder Icons zu großen Sprite-Grafiken
zusammenfassen
mit CSS background-position den richtigen Ausschnitt anzeigen
·
·
CSS Sprite [DE]
/

37. SVG-Sprites
funktionieren wie normale Image-Sprites
.svg.cloud{
background:url(img/SVG_sprites.svg);
}
.no-svg.cloud{
background:url(img/SVG_sprites.png);
}
.cloud{
background-position:0px0px;
}
.cloud-active{
background-position:-64px0px;
}
/

38. Icon-Fonts
/

39. 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 oder animation für
die Darstellung genutzt werden
·
·
/

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

41. Font Custom
Command Line Tool
$brewinstallfontforgettfautohint
$geminstallfontcustom
$fontcustomwatch/path/to/vectors
http://fontcustom.com/
/

42. Data URI
HTML
<imgsrc="logo-maddesigns.png"alt="Logomaddesigns">
<imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhE...">
CSS
<style>
.logo{background-image:url("logo-maddesigns.png")}
</style>
<style>
.logo{background-image:url("data:image/png;base64,iVBORw...")}
</style>
http://en.wikipedia.org/wiki/Data_URI_scheme
/

43. Data URI
super für kleine Grafiken, die nicht für Sprite-Image geeignet sind
(Twitter nutzt diese Technik für die Timeline Profilbilder)
optimal wenn Grafiken nur 1x vorkommen
reduziert die HTTP-Requests
Nachteile
nicht cachebar (cachebar in externen CSS Dateien)
IE8+ (IE8 Data-URI limitation < 24kb)
·
·
·
·
·
/

44. Vorsicht mit großen Bildern – iOS Resource Limits
Max. Größe für GIF, PNG & TIF = 3 Megapixel für Geräte < 256MB
RAM, 5 Megapixel ≥ 256 MB RAM
width * height ≤ 3 * 1024 * 1024.
Hinweis: Das dekodierte Bild ist weit aus größer als die enkodierte
Bild.
Mit Hilfe von Subsampling beträgt die maximale Größe von JPEGs 32
Megapixel. Das Subsampling dekodiert die JPEG Bilder so, dass sie
nur noch ein sechzehntel der ursprünglichen Pixel haben. Um den
Speicher zu reduzieren werden alle JPEGs mit mehr als 2 Megapixel
gesampelt.
·
·
·
Know iOS Resource Limits
/

45. Bilder optimieren
/

46. Bildoptimierung kann Kosten sparen
Beispiel:
Amazon Web Service (AWS) – jedes gesparte Byte kann helfen Kosten
zu sparen
https://twitter.com/andmag/status/339987087531057153
/

47. Bildformat
das richtige Bildformat je Bildinhalt verwenden!
lieber PNG als GIF (besser komprimierbar)
PNG8 für einen limitierten Farbraum
PNG24 für Bilder mit Alphatransparenz
8bit PNG mit Alphatransparenz: http://pngmini.com/
zusätzlich PNGs crushen!
Bestes Tool: http://imageoptim.com/ (Mac)
RIOT http://luci.criosweb.ro/riot/ (Win)
·
·
·
·
·
·
Alpha Transparency in PNG-8 Images Without Using Fireworks
/

48. JPG für Photos verwenden! -› JPEGmini
Online-Tool
http://www.jpegmini.com/
/

49. kleinere Bilddaten bei vergleichbarer Qualität
neues Bildformat durch Google entwickelt (Ursprung in der WebM-
Videokompression)
komprimiert verlustbehaftet oder verlustfrei
statische oder animierte Bilder
unterstützt Alphatransparenzen
kann also PNG und JPG ersetzen
nur Chrome (und Opera)
Problematisch: Facebook testete WebP-Bilder, User waren unzufrieden
·
·
·
·
·
Video und Slides zum WebP-Status
/

50. Weitere Online-Tools zur Bildkomprimierung
PunyPNG
Smush.it
TinyPNG
http://img2webp.net
·
·
·
·
lossless image optimization tools
/

51. Mobilnetz Provider Kompression (Vodafone UK)
https://twitter.com/kaelig/status/316566775103909888
/

52. Caching
Apache Modul „Expires Header“ zum Caching verwenden
<IfModulemod_expires.c>
ExpiresActiveOn
ExpiresByTypetext/css "accessplus1week"
ExpiresByTypeapplication/javascript "accessplus1month"
ExpiresByTypeapplication/x-javascript"accessplus1month"
ExpiresByTypeimage/gif "accessplus1month"
ExpiresByTypeimage/jpeg "accessplus1month"
ExpiresByTypeimage/png "accessplus1month"
</IfModule>
/

53. 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
Squeezr – Device-aware Adaptive Images and more
Adept JPG Compressor
/

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