Responsive Images/Performance Webinale, Berlin 04.06.2013 Sven Wolfermann | maddesigns
Jan 27, 2015
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
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
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
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
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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-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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
HiDPI screens aka bdquoRetinaldquo
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
Bilder optimieren
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google
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
Danke fuumlr die AufmerksamkeitSven Wolfermann | maddesigns
httpmaddesignsderesponsive-images
HTML5 slideshow by Google