Responsive ImagesPerformanceWebinale Berlin 04062013

Sven Wolfermann | maddesigns

Sven Wolfermann (35)

Freelancer fuumlr moderne Webentwicklung (HTML5 CSS3 Responsive Webdesign) aus Berlin

CSS3 Adventskalender 20102011

schreibt Artikel fuumlr das T3N- PHP- und Webstandards-Magazin (new Screenguide)

mobile Geek

Wer ist die Flitzpiepe da uumlberhaupt

Twitter maddesignsWeb httpmaddesignsde

middot

middot

middot

middot

middot

Sven Wolfermann (35)

Freelancer fuumlr moderne Webentwicklung (HTML5 CSS3 Responsive Webdesign) aus Berlin

CSS3 Adventskalender 20102011

schreibt Artikel fuumlr das T3N- PHP- und Webstandards-Magazin (new Screenguide)

mobile Geek

Wer ist die Flitzpiepe da uumlberhaupt

Twitter maddesignsWeb httpmaddesignsde

middot

middot

middot

middot

middot

Responsive Webdesign

Flexible Spaltenraster die auf Prozentwerte basieren

Variable Bilder- und Videogroumlszligen ndash Bilder passen sich den Spalten an

CSS3 um Geraumltegroumlszlige abzufragen und Inhalte anzupassen

middot

middot

middot

Quelle Bild httpmacrojuicecom

flexible Medieninhalte

keine statische Breitenangaben

img embed object video max-width 100

Fuumlr Medien muss im CSS eine flexible Breite gesetzt werden die Houmlhesoll sich automatisch in Relation anpassen

img embed object video max-width 100 max original px width height auto width auto

Bilder groumlszligter Anteil bei Websites

httphttparchiveorgtrendsphp

Bilder groumlszligter Anteil bei Websites

httphttparchiveorgtrendsphp

Responsive Images

Problem ist dass sich Bilddatenmengen nicht dynamisch anpassen

Groszlige Bilder werden zwar verkleinert dargestellt laden aberunnoumltige Datenmengen

ltimggt-Tag ist nicht dafuumlr ausgelegt

ein responsives Bildformat gibt es nicht

Polyfills muumlssen helfen

middot

middot

middot

middot

middot

Groumlszligenuumlbersicht deviceoptimierter Bilder

Bild von grigs

Groumlszligenuumlbersicht deviceoptimierter Bilder

Bild von grigs

Asset Loading Tests von Tim Kadlec

Tests des Ladeverhalten mobiler Browser

Beispiel Test CSS-Hintergrundbilder

ltdiv class=test5gtltdivgt

media all and (min-width 601px) test5 background-image url(imgtest5-desktoppng) media all and (max-width 600px) test5 background-image url(imgtest5-mobilepng)

Asset Loading Tests von Tim Kadlec

nur das passende Bild wird geladen gutTim Kadlec ndash Media Query amp Asset Downloading Results

Asset Loading Tests von Tim Kadlec

nur das passende Bild wird geladen gutTim Kadlec ndash Media Query amp Asset Downloading Results

Loumlsungsansaumltze fuumlr Responsive Images

CSS3-Ansatz von Nicolas Gallagher

ltimg src=imagejpg alt= data-src-600px=image-600pxjpggt

Umsetzung auf CSS-Basis

media (min-device-width600px) img[data-src-600px] content attr(data-src-600px url) media (min-device-width800px) img[data-src-800px] content attr(data-src-800px url)

Nachteil 2 Bilder werden geladen keine Browserunterstuumltzung

httpnicolasgallaghercomresponsive-images-using-css3

Responsive Images

alter Ansatz der Filament Group

ltimg src=smalljpgfull=largejpggt

httpsgithubcomfilamentgroupResponsive-Images

Nachteil nicht immer kann man src veraumlndern (CMS)

wird von der Filament Group nicht mehr empfohlen und nichtweiterentwickelt

Responsive Media - Blog Post von drublic

Responsive Images

Eine einfache und gute Loumlsung meiner Meinung nach ist dieltnoscriptgt-Loumlsung mit HTML5 data-Attributen

ltnoscript data-large=Koala-largejpg data-small=Koala-smalljpg data-alt=Koalagt ltimg src=Koala-smalljpg alt=Koala gtltnoscriptgt

Vorteil Assets die im ltnoscriptgt-Tag eingebunden sind werden nichtvom Browser in den DOM eingefuumlgt (und nicht geladen) wennJavaScript aktiviert ist

Ressourcen werden also nicht doppelt geladen

JavaScript notwendighttpwwwmonoliitticomimages

Responsive Images ndash ltnoscriptgt

jQuery Snippet

$(noscript[data-large][data-small])each(function() var $this = $(this) var src = screenwidth gt= 500 $thisdata(large) $thisdata(small)

$(ltimg src= + src + alt= + $this data(alt) + gt) insertAfter($this))

lt-- small screen DOM --gtltnoscript gt ltimg src=Koala-smalljpg alt=Koala gtltnoscriptgtltimg src=Koala-smalljpg alt=Koalagt

ltpicturegt Element

Aktuelle W3C-Diskussion ndash ltpicturegt Element

Aufbau wie ltvideogt Element

ltpicture width=500 height=500gt ltsource src=largejpg media=(min-width 45em)gt ltsource src=middlejpg media=(min-width 18em)gt ltimg src=smalljpg alt=gt ltpgtAccessible textltpgtltpicturegt

picture element proposal

ltpicturegt Element

Aktuelle W3C-Diskussion ndash ltpicturegt Element

Aufbau wie ltvideogt Element

ltpicture width=500 height=500gt ltsource src=largejpg media=(min-width 45em)gt ltsource src=middlejpg media=(min-width 18em)gt ltimg src=smalljpg alt=gt ltpgtAccessible textltpgtltpicturegt

picture element proposal

Picturefill

Polyfill fuumlr den ltpicturegt Ansatz

ltdiv data-picture data-alt=Alttextgt ltdiv data-src=smalljpggtltdivgt ltdiv data-src=mediumjpg data-media=(min-width 400px)gtltdivgt ltdiv data-src=largejpg data-media=(min-width 800px)gtltdivgt ltdiv data-src=xlargejpg data-media=(min-width 1000px)gtltdivgt

lt-- Fallback content for non-JS browsers Same img src as the initial unqualified source element --gt ltnoscriptgt ltimg src=smalljpg alt=Altgt ltnoscriptgtltdivgt

httpsgithubcomscottjehlpicturefill

Vorschlag srcset-Attribut

ltimggt durch ein neues Attribut erweitern das mehrere Bildpfade und -qualitaumlten enthaumllt

ltimg alt=The Breakfast Combo src=bannerjpeg srcset=banner-HDjpeg 2x banner-phonejpeg 100w banner-phone-HDjpeg 100w 2xgt

Support in CSS fuumlr background-images

Safari 6 Chrome 21 supports background-image -webkit-image-set() background-image -webkit-image-set( url(cloud-sdpng) 1x url(cloud-hdpng) 2x)

-rsaquo Retina-Support fuumlr iOS

srcset attribut proposal

Responsive Images Art Direction Usecase

httpresponsiveimagesorg

ltpicturegt Element + srcset

Das beste aus beiden Vorschlaumlgen

ltpicture width=500 height=500gt ltsource media=(min-width 45em) srcset=large-1jpg 1x large-2jpg 2xgt ltsource media=(min-width 18em) srcset=med-1jpg 1x med-2jpg 2xgt ltsource srcset=small-1jpg 1x small-2jpg 2xgt ltimg src=small-1jpg alt=gt ltpgtAccessible textltpgtltpicturegt

wird mit den Browserherstellern diskutiert aktuell scheint dieIntegration vom srcset-Attribut bevorzugt zu werden

httpscodegooglecompchromiumissuesdetailid=233751

Clown Car Technique

Media Queries innerhalb SVG

ltimg src=filesvg alt=imagegt

Vorteilgut fuumlr Bild im Text

NachteilSVG erst ab Android 4 IE9 Bild das erscheint ist nicht das was manherunterladen kann

httpcodingsmashingmagazinecom20130602clown-car-technique-solving-for-adaptive-images-in-responsive-web-design

Clown Car Technique

filesvg

ltsvg xmlns=httpwwww3org2000svgviewBox=0 0 300 329 preserveAspectRatio=xMidYMid meetgt lttitlegtClown Car Techniquelttitlegt ltstylegt svg background-size 100 100 background-repeat no-repeat media screen and (max-width 400px) svg background-image url(imagessmallpng) media screen and (min-width 401px) and (max-width 700px) svg background-image url(imagesmediumpng) media screen and (min-width 701px) and (max-width 1000px) svg background-image url(imagesbigpng) media screen and (min-width 1001px) svg background-image url(imageshugepng) ltstylegtltsvggt

Adaptive Images

httpadaptive-imagescom

Adaptive Images

httpadaptive-imagescom

adaptive-imagescom Script einbinden

Cookie-Snippet so fruumlh wie moumlglich im ltheadgt

ltheadgt ltscriptgt documentcookie=resolution=+Mathmax(screenwidthscreenheight)+ path= ltscriptgt hellipltheadgt

PHP-Script anpassen (global Breakpoints)

$resolutions = array(1382 992 768 480 320)

htaccess anpassen

ltIfModule mod_rewritecgtEnable URL rewritingRewriteEngine On

Options +FollowSymlinksAdaptive Imagesdont apply the AI behaviour to images inside AIs cache folderRewriteCond REQUEST_URI ai-cachefurther directories that shouldnt use AIRewriteCond REQUEST_URI cssimagesSend any GIF JPG or PNG request that IS NOT stored inside one of the above directoriesRewriteRule (jpg|jpeg|png|gif)$ adaptive-imagesphp [L]

ltIfModulegt

jQuery Variante ndash httpresponsiveimgcom

htaccess anpassen

ltIfModule mod_rewritecgtEnable URL rewritingRewriteEngine On

Options +FollowSymlinksAdaptive Imagesdont apply the AI behaviour to images inside AIs cache folderRewriteCond REQUEST_URI ai-cachefurther directories that shouldnt use AIRewriteCond REQUEST_URI cssimagesSend any GIF JPG or PNG request that IS NOT stored inside one of the above directoriesRewriteRule (jpg|jpeg|png|gif)$ adaptive-imagesphp [L]

ltIfModulegt

jQuery Variante ndash httpresponsiveimgcom

Responsive Images Service ndash ReSRCit

httpwwwresrcit

Focal Point ndash Loumlsungsvarianten fuumlr Bildausschnitte

httpwwwcdnconnectcomdocsfocal-point-csspure-html-css-responsive-high-resolution-images-solution

HiDPI screens aka bdquoRetinaldquo

bdquoRetinaldquo

doppelte Pixeldichte iPhone = 326ppi

httpcodingsmashingmagazinecom20120820towards-retina-web

bdquoRetinaldquo

doppelte Pixeldichte iPhone = 326ppi

httpcodingsmashingmagazinecom20120820towards-retina-web

List of mobile phones with HD display

httpenwikipediaorgwikiList_of_mobile_phones_with_HD_display

Rumor Apple to doubleiPhone 5S Retinaresolution to 15M pixels

ldquo

rdquo

httpappleinsidercomarticles130528rumor-apple-to-double-iphone-5s-retina-resolution-to-15m-pixels

Android Screen Vielfalt

viele Android-Screens sind bereits HiDPI-Screen mit 15-facher Pixeldichte

mittlerweile sogar Smartphones mit 30 Pixel-Desity -rsaquo HTC One

viele Low DPI-Screens (075 Pixel-Desity) gibt es ebenfalls

Samsung Android Screen Sizes28 314 32 34 35 36 365 37 397 4 42 427 43 45 452 465 48 5 53 55 58 63 7 77 810 101 (Tweet von dkdsgn)

middot

middot

middot

bdquoRetinaldquo

Problem hochgezogene Pixel

mehrere optimierte Grafiken muumlssen bereit gestellt werden

Loumlsung waumlre bdquoimage-set()ldquo

background-image -webkit-image-set( url(cloud-sdpng) 1x url(cloud-hdpng) 2x)

CSS Media Queries

CSS abhaumlngig von der Pixeldichte

media only screen and (-webkit-max-device-pixel-ratio 075) only screen and (max-resolution 90dpi) LowDPI CSS

media only screen and (-webkit-min-device-pixel-ratio 15) only screen and (min-resolution 144dpi) HiDPI CSS

media only screen and (-webkit-min-device-pixel-ratio 2) only screen and (min-resolution 192dpi) Retina specific CSS

httpwwwbrettjankordcom20121128cross-browser-retinahigh-resolution-media-queries

CSS Media Queries

CSS abhaumlngig von der Pixeldichte

media only screen and (-webkit-max-device-pixel-ratio 075) only screen and (max-resolution 90dpi) LowDPI CSS

media only screen and (-webkit-min-device-pixel-ratio 15) only screen and (min-resolution 144dpi) HiDPI CSS

media only screen and (-webkit-min-device-pixel-ratio 2) only screen and (min-resolution 192dpi) Retina specific CSS

httpwwwbrettjankordcom20121128cross-browser-retinahigh-resolution-media-queries

Bildgroumlszlige 400x400px Qualitaumlt 60 Groumlszlige 49161 Byte

Bildgroumlszlige 800x800px Qualitaumlt 15 Groumlszlige 51289 Byte

ltimg width=400 src=normaljpg alt=gt ltimg width=400 src=retinajpg alt=gt

Retina JPGs

httpretinafymejpgs

SVG ndash Scalable Vector Graphic

optimal fuumlr Logos amp Icons

ltimg src=imgSVG-logosvg width=100 alt=gtltimg src=imgSVG-logosvg width=200 alt=gtltimg src=imgSVG-logosvg width=300 alt=gt

SVG vs PNG

SVG 757 KB 5150 KB 450 KB

PNG 200px 650 KB 1110 KB 418 KB

PNG 400px 1180 KB 2760 KB 832 KB

PNG 800px 1850 KB 7270 KB 1480 KB

fett = PNG kleiner als SVG

die Datenmenge fuumlr kleine PNG-Bilder ist haumlufig kleiner als eine SVG-Grafik

super WPO Slides von Christian derSchepp Schaumlfer

SVG vs PNG

SVG 757 KB 5150 KB 450 KB

PNG 200px 650 KB 1110 KB 418 KB

PNG 400px 1180 KB 2760 KB 832 KB

PNG 800px 1850 KB 7270 KB 1480 KB

fett = PNG kleiner als SVG

die Datenmenge fuumlr kleine PNG-Bilder ist haumlufig kleiner als eine SVG-Grafik

super WPO Slides von Christian derSchepp Schaumlfer

Classic CSS Sprites ndash Image-Requests sparen

kleine Grafiken oder Icons zu groszligen Sprite-Grafikenzusammenfassen

mit CSS background-position den richtigen Ausschnitt anzeigen

middot

middot

CSS Sprite [DE]

SVG-Sprites

funktionieren wie normale Image-Sprites

svg cloud background url(imgSVG_spritessvg)no-svg cloud background url(imgSVG_spritespng)cloud background-position 0px 0pxcloud-active background-position -64px 0px

Icon-Fonts

Icon Fonts == Dingbats on dope

Vorteil

Farben und Groumlszlige der Icons kann leicht mit CSS angepasst werden

zusaumltzlich koumlnnen CSS-Effekte wie text-shadow oder animation fuumlrdie Darstellung genutzt werden

middot

middot

Icon Fonts

kostenloser Service icomoonio

httpicomoonio

Icon-Fonts

Icon Fonts == Dingbats on dope

Vorteil

Farben und Groumlszlige der Icons kann leicht mit CSS angepasst werden

zusaumltzlich koumlnnen CSS-Effekte wie text-shadow oder animation fuumlrdie Darstellung genutzt werden

middot

middot

Icon Fonts

kostenloser Service icomoonio

httpicomoonio

Icon Fonts == Dingbats on dope

Vorteil

Farben und Groumlszlige der Icons kann leicht mit CSS angepasst werden

zusaumltzlich koumlnnen CSS-Effekte wie text-shadow oder animation fuumlrdie Darstellung genutzt werden

middot

middot

Icon Fonts

kostenloser Service icomoonio

httpicomoonio

Icon Fonts

kostenloser Service icomoonio

httpicomoonio

Font Custom

Command Line Tool

$ brew install fontforge ttfautohint$ gem install fontcustom$ fontcustom watch pathtovectors

httpfontcustomcom

Data URI

HTML

ltimg src=logo-maddesignspng alt=Logo maddesignsgt

ltimg src=dataimagepngbase64iVBORw0KGgoAAAANSUhEgt

CSS

ltstylegt logo background-image url(logo-maddesignspng) ltstylegt

ltstylegt logo background-image url(dataimagepngbase64iVBORw)ltstylegt

httpenwikipediaorgwikiData_URI_scheme

Data URI

super fuumlr kleine Grafiken die nicht fuumlr Sprite-Image geeignet sind(Twitter nutzt diese Technik fuumlr 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 lt 24kb)

middot

middot

middot

middot

middot

Vorsicht mit groszligen Bildern ndash iOS Resource Limits

Max Groumlszlige fuumlr GIF PNG amp TIF = 3 Megapixel fuumlr Geraumlte lt 256MBRAM 5 Megapixel ge 256 MB RAM

width height le 3 1024 1024 Hinweis Das dekodierte Bild ist weit aus groumlszliger als die enkodierteBild

Mit Hilfe von Subsampling betraumlgt die maximale Groumlszlige von JPEGs 32Megapixel Das Subsampling dekodiert die JPEG Bilder so dass sienur noch ein sechzehntel der urspruumlnglichen Pixel haben Um denSpeicher zu reduzieren werden alle JPEGs mit mehr als 2 Megapixelgesampelt

middot

middot

middot

Know iOS Resource Limits

Vorsicht mit groszligen Bildern ndash iOS Resource Limits

Max Groumlszlige fuumlr GIF PNG amp TIF = 3 Megapixel fuumlr Geraumlte lt 256MBRAM 5 Megapixel ge 256 MB RAM

width height le 3 1024 1024 Hinweis Das dekodierte Bild ist weit aus groumlszliger als die enkodierteBild

Mit Hilfe von Subsampling betraumlgt die maximale Groumlszlige von JPEGs 32Megapixel Das Subsampling dekodiert die JPEG Bilder so dass sienur noch ein sechzehntel der urspruumlnglichen Pixel haben Um denSpeicher zu reduzieren werden alle JPEGs mit mehr als 2 Megapixelgesampelt

middot

middot

middot

Know iOS Resource Limits

Bilder optimieren

Bildoptimierung kann Kosten sparen

BeispielAmazon Web Service (AWS) ndash jedes gesparte Byte kann helfen Kostenzu sparen

httpstwittercomandmagstatus339987087531057153

Bildoptimierung kann Kosten sparen

BeispielAmazon Web Service (AWS) ndash jedes gesparte Byte kann helfen Kostenzu sparen

httpstwittercomandmagstatus339987087531057153

Bildformat

das richtige Bildformat je Bildinhalt verwenden

lieber PNG als GIF (besser komprimierbar)

PNG8 fuumlr einen limitierten Farbraum

PNG24 fuumlr Bilder mit Alphatransparenz

8bit PNG mit Alphatransparenz httppngminicom

zusaumltzlich PNGs crushen

Bestes Tool httpimageoptimcom (Mac)

RIOT httplucicrioswebroriot (Win)

middot

middot

middot

middot

middot

middot

Alpha Transparency in PNG-8 Images Without Using Fireworks

JPG fuumlr Photos verwenden -rsaquo JPEGmini

Online-Tool

httpwwwjpegminicom

kleinere Bilddaten bei vergleichbarer Qualitaumlt

neues Bildformat durch Google entwickelt (Ursprung in der WebM-Videokompression)

komprimiert verlustbehaftet oder verlustfrei

statische oder animierte Bilder

unterstuumltzt Alphatransparenzen

kann also PNG und JPG ersetzen

nur Chrome (und Opera)

Problematisch Facebook testete WebP-Bilder User waren unzufrieden

middot

middot

middot

middot

middot

Video und Slides zum WebP-Status

Weitere Online-Tools zur Bildkomprimierung

PunyPNG

Smushit

TinyPNG

httpimg2webpnet

middot

middot

middot

middot

lossless image optimization tools

Mobilnetz Provider Kompression (Vodafone UK)

httpstwittercomkaeligstatus316566775103909888

Caching

Apache Modul bdquoExpires Headerldquo zum Caching verwenden

ltIfModule mod_expirescgtExpiresActive OnExpiresByType textcss access plus 1 weekExpiresByType applicationjavascript access plus 1 monthExpiresByType applicationx-javascript access plus 1 monthExpiresByType imagegif access plus 1 monthExpiresByType imagejpeg access plus 1 monthExpiresByType imagepng access plus 1 monthltIfModulegt

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 ndash cross-browser framework-independent responsive imagesloader

Squeezr ndash Device-aware Adaptive Images and more

Adept JPG Compressor

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 ndash cross-browser framework-independent responsive imagesloader

Squeezr ndash Device-aware Adaptive Images and more

Adept JPG Compressor

Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns

httpmaddesignsderesponsive-images

HTML5 slideshow by Google