• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Images
 

Responsive Images

on

  • 1,361 views

Mittlerweile als moderne Technik etabliert, beschreiben zahlreiche Tutorials Umsetzungsvorschläge für Responsive Webdesign; dennoch stößt man in Projekten mit einem skalierbaren Layout auf immer ...

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

Statistics

Views

Total Views
1,361
Views on SlideShare
1,361
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Images Responsive Images Presentation Transcript

    • Responsive Images/PerformanceWebinale, Berlin 04.06.2013Sven Wolfermann | maddesigns
    • Sven Wolfermann (35)Freelancer für moderne Webentwicklung(HTML5, CSS3, Responsive Webdesign) aus BerlinCSS3 Adventskalender 2010/2011schreibt Artikel für das T3N-, PHP- undWebstandards-Magazin (new: Screengui.de)mobile GeekWer ist die Flitzpiepe da überhaupt?Twitter: @maddesignsWeb: http://maddesigns.de·····/
    • Responsive WebdesignFlexible Spaltenraster, die auf Prozentwerte basierenVariable Bilder- und Videogrößen – Bilder passen sich den Spalten anCSS3 um Gerätegröße abzufragen und Inhalte anzupassen···Quelle Bild: http://macrojuice.com//
    • flexible Medieninhaltekeine statische Breitenangabenimg,embed,object,video{max-width:100%;}Für Medien muss im CSS eine flexible Breite gesetzt werden, die Höhesoll sich automatisch in Relation anpassen.img,embed,object,video{max-width:100%;/*max.originalpxwidth*/height:auto;/*width:auto;*/}/
    • Bilder größter Anteil bei Websiteshttp://httparchive.org/trends.php/
    • Responsive ImagesProblem ist, dass sich Bilddatenmengen nicht dynamisch anpassenGroße Bilder werden zwar verkleinert dargestellt, laden aberunnötige Datenmengen<img>-Tag ist nicht dafür ausgelegtein responsives Bildformat gibt es nichtPolyfills müssen helfen·····/
    • Größenübersicht deviceoptimierter BilderBild von @grigs/
    • Asset Loading Tests von Tim KadlecTests des Ladeverhalten mobiler BrowserBeispiel: Test CSS-Hintergrundbilder<divclass="test5"></div>@mediaalland(min-width:601px){.test5{background-image:url("img/test5-desktop.png");}}@mediaalland(max-width:600px){.test5{background-image:url("img/test5-mobile.png");}}/
    • Asset Loading Tests von Tim Kadlecnur das passende Bild wird geladen, gut!Tim Kadlec – Media Query & Asset Downloading Results/
    • Lösungsansätze für Responsive ImagesCSS3-Ansatz von Nicolas Gallagher<img src="image.jpg" alt="" data-src-600px="image-600px.jpg">Umsetzung auf CSS-Basis@media (min-device-width:600px) {img[data-src-600px] {content: attr(data-src-600px, url);}}@media (min-device-width:800px) {img[data-src-800px] {content: attr(data-src-800px, url);}}Nachteil: 2 Bilder werden geladen, keine Browserunterstützunghttp://nicolasgallagher.com/responsive-images-using-css3//
    • Responsive Imagesalter Ansatz der Filament Group<imgsrc="small.jpg?full=large.jpg">https://github.com/filamentgroup/Responsive-ImagesNachteil: nicht immer kann man "src" verändern (CMS)wird von der Filament Group nicht mehr empfohlen und nichtweiterentwickelt!Responsive Media - Blog Post von @drublic/
    • Responsive ImagesEine einfache und gute Lösung meiner Meinung nach, ist die<noscript>-Lösung mit HTML5 data-Attributen<noscriptdata-large="Koala-large.jpg"data-small="Koala-small.jpg"data-alt="Koala"><imgsrc="Koala-small.jpg"alt="Koala"/></noscript>Vorteil: Assets die im <noscript>-Tag eingebunden sind, werden nichtvom Browser in den DOM eingefügt (und nicht geladen), wennJavaScript aktiviert ist.Ressourcen werden also nicht doppelt geladen.JavaScript notwendighttp://www.monoliitti.com/images//
    • Responsive Images – <noscript>jQuery Snippet$(noscript[data-large][data-small]).each(function(){var$this=$(this);varsrc=screen.width>=500?$this.data(large):$this.data(small);$(<imgsrc="+src+"alt="+$this.data(alt)+"/>).insertAfter($this);});<!--smallscreenDOM--><noscript...><imgsrc="Koala-small.jpg"alt="Koala"/></noscript><imgsrc="Koala-small.jpg"alt="Koala">/
    • <picture> ElementAktuelle W3C-Diskussion – <picture> ElementAufbau wie <video> Element<picturewidth="500"height="500"><sourcesrc="large.jpg" media="(min-width:45em)"><sourcesrc="middle.jpg"media="(min-width:18em)"><imgsrc="small.jpg"alt=""><p>Accessibletext</p></picture>picture element proposal/
    • PicturefillPolyfill für den <picture> Ansatz<divdata-picturedata-alt="Alttext"><divdata-src="small.jpg"></div><divdata-src="medium.jpg"data-media="(min-width: 400px)"></div><divdata-src="large.jpg" data-media="(min-width: 800px)"></div><divdata-src="xlarge.jpg"data-media="(min-width:1000px)"></div><!--Fallbackcontentfornon-JSbrowsers.Sameimgsrcastheinitial,unqualifiedsourceelement.--><noscript><imgsrc="small.jpg"alt="Alt"></noscript></div>https://github.com/scottjehl/picturefill/
    • Vorschlag: srcset-Attribut<img> durch ein neues Attribut erweitern, das mehrere Bildpfade und -qualitäten enthält<imgalt="TheBreakfastCombo"src="banner.jpeg"srcset="banner-HD.jpeg2x,banner-phone.jpeg100w,banner-phone-HD.jpeg100w2x">Support in CSS für background-images/*Safari6,Chrome21supportsbackground-image:-webkit-image-set();*/background-image:-webkit-image-set(url(cloud-sd.png)1x,url(cloud-hd.png)2x);-› Retina-Support für iOSsrcset attribut proposal/
    • Responsive Images Art Direction Usecasehttp://responsiveimages.org//
    • <picture> Element + srcsetDas beste aus beiden Vorschlägen<picturewidth="500"height="500"><sourcemedia="(min-width:45em)"srcset="large-1.jpg1x,large-2.jpg2x"><sourcemedia="(min-width:18em)"srcset="med-1.jpg1x,med-2.jpg2x"><sourcesrcset="small-1.jpg1x,small-2.jpg2x"><imgsrc="small-1.jpg"alt=""><p>Accessibletext</p></picture>wird mit den Browserherstellern diskutiert, aktuell scheint dieIntegration vom "srcset"-Attribut bevorzugt zu werdenhttps://code.google.com/p/chromium/issues/detail?id=233751/
    • Clown Car TechniqueMedia Queries innerhalb SVG<imgsrc="file.svg"alt="image">Vorteil:gut für Bild im TextNachteil:SVG erst ab Android 4, IE9Bild das erscheint, ist nicht das was manherunterladen kannhttp://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design//
    • Clown Car Techniquefile.svg<svgxmlns="http://www.w3.org/2000/svg"viewBox="00300329"preserveAspectRatio="xMidYMidmeet"><title>ClownCarTechnique</title><style>svg{background-size:100%100%;background-repeat:no-repeat;}@mediascreenand(max-width:400px){svg{background-image:url(images/small.png);}}@mediascreenand(min-width:401px)and(max-width:700px){svg{background-image:url(images/medium.png);}}@mediascreenand(min-width:701px)and(max-width:1000px){svg{background-image:url(images/big.png);}}@mediascreenand(min-width:1001px){svg{background-image:url(images/huge.png);}}</style></svg>/
    • Adaptive Imageshttp://adaptive-images.com//
    • adaptive-images.com Script einbindenCookie-Snippet so früh wie möglich im <head><head><script>document.cookie=resolution=+Math.max(screen.width,screen.height)+;path=/;</script>…</head>PHP-Script anpassen (global Breakpoints)$resolutions=array(1382,992,768,480,320);/
    • .htaccess anpassen<IfModulemod_rewrite.c>#EnableURLrewritingRewriteEngineOnOptions+FollowSymlinks#AdaptiveImages#dontapplytheAIbehaviourtoimagesinsideAIscachefolder:RewriteCond%{REQUEST_URI}!ai-cache#furtherdirectoriesthatshouldntuseAIRewriteCond%{REQUEST_URI}!cssimages#SendanyGIF,JPG,orPNGrequestthatISNOTstoredinsideoneoftheabovedirectoriesRewriteRule^.*.(jpg|jpeg|png|gif)$adaptive-images.php[L]...</IfModule>jQuery Variante – http://responsiveimg.com//
    • Responsive Images Service – ReSRC.ithttp://www.resrc.it//
    • Focal Point – Lösungsvarianten für Bildausschnittehttp://www.cdnconnect.com/docs/focal-point-css/pure-html-css-responsive-high-resolution-images-solution
    • HiDPI screens aka „Retina“/
    • „Retina“doppelte Pixeldichte, iPhone = 326ppihttp://coding.smashingmagazine.com/2012/08/20/towards-retina-web//
    • List of mobile phones with HD displayhttp://en.wikipedia.org/wiki/List_of_mobile_phones_with_HD_display/
    • Rumor: Apple to doubleiPhone 5S Retinaresolution to 1.5M pixels“”http://appleinsider.com/articles/13/05/28/rumor-apple-to-double-iphone-5s-retina-resolution-to-15m-pixels/
    • Android Screen Vielfaltviele Android-Screens sind bereits HiDPI-Screen mit 1,5-facher Pixeldichtemittlerweile sogar Smartphones mit 3.0 Pixel-Desity -› HTC Oneviele Low DPI-Screens (0.75 Pixel-Desity) gibt es ebenfallsSamsung Android Screen Sizes:2.8, 3.14, 3.2, 3.4, 3.5, 3.6, 3.65, 3.7, 3.97, 4, 4.2, 4.27, 4.3, 4.5, 4.52, 4.65, 4.8, 5, 5.3, 5.5, 5.8, 6.3, 7, 7.7, 8,10, 10.1 (Tweet von @dkdsgn)···/
    • „Retina“Problem: hochgezogene Pixelmehrere optimierte Grafiken müssen bereit gestellt werdenLösung wäre „image-set()“background-image:-webkit-image-set(url(cloud-sd.png)1x,url(cloud-hd.png)2x);/
    • CSS Media QueriesCSS abhängig von der Pixeldichte@mediaonlyscreenand(-webkit-max-device-pixel-ratio:0.75),onlyscreenand(max-resolution:90dpi){/*LowDPICSS*/}@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-resolution:144dpi){/*HiDPICSS*/}@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),onlyscreenand(min-resolution:192dpi){/*RetinaspecificCSS*/}http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries//
    • Bildgröße: 400x400pxQualität: 60Größe: 49.161 ByteBildgröße: 800x800pxQualität: 15Größe: 51.289 Byte<img width="400" src="normal.jpg" alt=""> <img width="400" src="retina.jpg" alt="">Retina JPGshttp://retinafy.me/jpgs//
    • SVG – Scalable Vector Graphicoptimal für Logos & Icons<imgsrc="img/SVG-logo.svg"width="100"alt=""><imgsrc="img/SVG-logo.svg"width="200"alt=""><imgsrc="img/SVG-logo.svg"width="300"alt="">/
    • SVG vs. PNGSVG 7,57 KB 51,50 KB 4,50 KBPNG 200px 6,50 KB 11,10 KB 4,18 KBPNG 400px 11,80 KB 27,60 KB 8,32 KBPNG 800px 18,50 KB 72,70 KB 14,80 KBfett = PNG kleiner als SVGdie Datenmenge für kleine PNG-Bilder ist häufig kleiner als eine SVG-Grafiksuper WPO Slides von Christian @derSchepp Schäfer/
    • Classic CSS Sprites – Image-Requests sparenkleine Grafiken oder Icons zu großen Sprite-Grafikenzusammenfassenmit CSS background-position den richtigen Ausschnitt anzeigen··CSS Sprite [DE]/
    • SVG-Spritesfunktionieren wie normale Image-Sprites.svg.cloud{background:url(img/SVG_sprites.svg);}.no-svg.cloud{background:url(img/SVG_sprites.png);}.cloud{background-position:0px0px;}.cloud-active{background-position:-64px0px;}/
    • Icon-Fonts/
    • Icon Fonts == Dingbats on dopeVorteil:Farben und Größe der Icons kann leicht mit CSS angepasst werdenzusätzlich können CSS-Effekte wie text-shadow oder animation fürdie Darstellung genutzt werden··/
    • Icon Fontskostenloser Service icomoon.iohttp://icomoon.io//
    • Font CustomCommand Line Tool$brewinstallfontforgettfautohint$geminstallfontcustom$fontcustomwatch/path/to/vectorshttp://fontcustom.com//
    • Data URIHTML<imgsrc="logo-maddesigns.png"alt="Logomaddesigns"><imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhE...">CSS<style>.logo{background-image:url("logo-maddesigns.png")}</style><style>.logo{background-image:url("data:image/png;base64,iVBORw...")}</style>http://en.wikipedia.org/wiki/Data_URI_scheme/
    • Data URIsuper für kleine Grafiken, die nicht für Sprite-Image geeignet sind(Twitter nutzt diese Technik für die Timeline Profilbilder)optimal wenn Grafiken nur 1x vorkommenreduziert die HTTP-RequestsNachteilenicht cachebar (cachebar in externen CSS Dateien)IE8+ (IE8 Data-URI limitation < 24kb)·····/
    • Vorsicht mit großen Bildern – iOS Resource LimitsMax. Größe für GIF, PNG & TIF = 3 Megapixel für Geräte < 256MBRAM, 5 Megapixel ≥ 256 MB RAMwidth * height ≤ 3 * 1024 * 1024.Hinweis: Das dekodierte Bild ist weit aus größer als die enkodierteBild.Mit Hilfe von Subsampling beträgt die maximale Größe von JPEGs 32Megapixel. Das Subsampling dekodiert die JPEG Bilder so, dass sienur noch ein sechzehntel der ursprünglichen Pixel haben. Um denSpeicher zu reduzieren werden alle JPEGs mit mehr als 2 Megapixelgesampelt.···Know iOS Resource Limits/
    • Bilder optimieren/
    • Bildoptimierung kann Kosten sparenBeispiel:Amazon Web Service (AWS) – jedes gesparte Byte kann helfen Kostenzu sparenhttps://twitter.com/andmag/status/339987087531057153/
    • Bildformatdas richtige Bildformat je Bildinhalt verwenden!lieber PNG als GIF (besser komprimierbar)PNG8 für einen limitierten FarbraumPNG24 für Bilder mit Alphatransparenz8bit PNG mit Alphatransparenz: http://pngmini.com/zusätzlich PNGs crushen!Bestes Tool: http://imageoptim.com/ (Mac)RIOT http://luci.criosweb.ro/riot/ (Win)······Alpha Transparency in PNG-8 Images Without Using Fireworks/
    • JPG für Photos verwenden! -› JPEGminiOnline-Toolhttp://www.jpegmini.com//
    • kleinere Bilddaten bei vergleichbarer Qualitätneues Bildformat durch Google entwickelt (Ursprung in der WebM-Videokompression)komprimiert verlustbehaftet oder verlustfreistatische oder animierte Bilderunterstützt Alphatransparenzenkann also PNG und JPG ersetzennur Chrome (und Opera)Problematisch: Facebook testete WebP-Bilder, User waren unzufrieden·····Video und Slides zum WebP-Status/
    • Weitere Online-Tools zur BildkomprimierungPunyPNGSmush.itTinyPNGhttp://img2webp.net····lossless image optimization tools/
    • Mobilnetz Provider Kompression (Vodafone UK)https://twitter.com/kaelig/status/316566775103909888/
    • CachingApache Modul „Expires Header“ zum Caching verwenden<IfModulemod_expires.c>ExpiresActiveOnExpiresByTypetext/css "accessplus1week"ExpiresByTypeapplication/javascript "accessplus1month"ExpiresByTypeapplication/x-javascript"accessplus1month"ExpiresByTypeimage/gif "accessplus1month"ExpiresByTypeimage/jpeg "accessplus1month"ExpiresByTypeimage/png "accessplus1month"</IfModule>/
    • weitere interessante Links8 Guidelines and 1 Rule for Responsive ImagesSensible jumps in responsive image file sizesResponsive Images for Ruby on RailsRiloadr – cross-browser framework-independent responsive imagesloaderSqueezr – Device-aware Adaptive Images and moreAdept JPG Compressor/
    • Danke für die Aufmerksamkeit!Sven Wolfermann | maddesignshttp://maddesigns.de/responsive-images/HTML5 slideshow by Google/