Responsive Images15 Techniken in 15 Minuten

Sven Wolfermann | maddesigns Webmontag Karlsruhe, 13.05.2013

Sven Wolfermann (35)

Freelancer für moderne Webentwicklung (HTML5, CSS3, Responsive Webdesign) aus Berlin

CSS3 Adventskalender 2010/2011

schreibt Artikel für das T3N-, PHP- und Webstandards-Magazin (new: Screengui.de)

mobile Geek

Wer ist die Flitzpiepe da überhaupt?

Twitter: @maddesigns

Web: http://maddesigns.de

·

·

·

·

·

·

·

/

Responsive Webdesign

Flexible Spaltenraster, die auf Prozentwerte basieren

Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an

CSS3 um Gerätegröße abzufragen und Inhalte anzupassen

·

·

·

Quelle Bild: http://macrojuice.com/

/

flexible Medieninhalte

keine statische Breitenangaben

img, embed, object, video { max-width: 100%;}

Für Medien muss im CSS eine flexible Breite gesetzt werden, die Höhesoll sich automatisch in Relation anpassen.

img, embed, object, video { max-width: 100%; /* max. original px width */ height: auto;/* width: auto; */}

/

Responsive Images

Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen

Große Bilder werden zwar verkleinert dargestellt, laden aberunnötige Datenmengen

<img>-Tag ist nicht dafür ausgelegt

ein responsives Bildformat gibt es nicht

Polyfills müssen her

·

·

·

·

·

/

Bilder größter Anteil bei Websites

http://httparchive.org/trends.php

/

Größenübersicht deviceoptimierter Bilder

Bild von @grigs

/

Asset Loading

Tests des Ladeverhalten mobiler Browser

Tim Kadlec – Media Query & Asset Downloading Results

/

Lösungsansätze für Bildgrößenproblematik

CSS3-Ansatz von Nicolas Gallagher

<img src="image.jpg" alt="" data-src-600px="image-600px.jpg">

Umsetzung auf CSS-Basis

@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); }}@media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); }}

http://nicolasgallagher.com/responsive-images-using-css3/

/

Responsive Images

Ansatz der Filament Group

<img src="small.jpg?full=large.jpg">

https://github.com/filamentgroup/Responsive-Images

Responsive Media - Blog Post von @drublic

/

Responsive Images

Die aktuell einfachste und beste Lösung meiner Meinung nach ist die<noscript>-Lösung mit HTML5 data-Attributen

<noscript data-large="Koala-large.jpg" data-small="Koala-small.jpg" data-alt="Koala"> <img src="Koala-small.jpg" alt="Koala" /></noscript>

Vorteil: Assets die im <noscript>-Tag eingebunden sind, werden nichtvom Browser in den DOM eingefügt (und geladen), wenn JavaScriptaktiviert ist. Ressourcen werden also nicht doppelt geladen.

http://www.monoliitti.com/images/

/

Responsive Images – <noscript>

jQuery Snippet

$('noscript[data-large][data-small]').each(function(){ var src = screen.width >= 500 ? $(this).data('large') : $(this).data('small'); $('<img src="' + src + '" alt="' + $(this) .data('alt') + '" />') .insertAfter($(this));});

/

<picture> Element

Aktuelle W3C-Diskussion – <picture> Element

Aufbau wie <video> Element + srcset für Retina-Images

<picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> <p>Accessible text</p></picture>

CSS Retina-Support für background-images

/* Safari, Chrome supports background-image: -webkit-image-set(); */background-image: -webkit-image-set( url(cloud-sd.png) 1x, url(cloud-hd.png) 2x);

picture element proposal

/

Picturefill

Polyfill für den <picture> Ansatz

<div data-picture data-alt="Alttext"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="external/imgs/small.jpg" alt="Alt"> </noscript></div>

https://github.com/scottjehl/picturefill

/

Clown Car Technique

Media Queries innerhalb SVG

<img src="file.svg" alt="responsive image">

Nachteil: SVG erst ab Android 4http://www.standardista.com/responsive-images-clown-car-technique/

/

Clown Car Technique

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet" <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(images/huge.png);} } </style></svg>

/

Adaptive Images

http://adaptive-images.com/

/

adaptive-images.com Script einbinden

Cookie-Snippet so früh wie möglich im <head>

<head> <script> document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/'; </script> …</head>

PHP-Script anpassen (global Breakpoints)

$resolutions = array(1382, 992, 768, 480, 320);

/

.htaccess anpassen

<IfModule mod_rewrite.c>#Enable URL rewritingRewriteEngine On

Options +FollowSymlinks#Adaptive Images#don't apply the AI behaviour to images inside AI's cache folder:RewriteCond %{REQUEST_URI} !ai-cache#further directories that shouldn't use AIRewriteCond %{REQUEST_URI} !cssimages#Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directoriesRewriteRule ̂.*\.(jpg|jpeg|png|gif)$ adaptive-images.php [L]. . .

</IfModule>

jQuery Variante – http://responsiveimg.com/

/

Responsive Images Service – ReSRC.it

http://www.resrc.it/

/

Lösungsvarianten für Bildausschnitte – Focal Point

Bildinhalte anders fokussieren

http://www.cdnconnect.com/docs/focal-point-css/pure-html-css-responsive-high-resolution-images-solution

/

Retina – hochauflösende Bilder

CSS abhängig von der Pixeldichte

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { /* Retina-specific stuff here */}

http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/

/

Retina JPGs

left: JPEG, 500x508, quality=60, size=87802right: JPEG, 1000x1015, quality=15, size=83150 (file size -5%)http://retinafy.me/jpgs/

/

Icon Fonts == Dingbats on dope

Vorteil:

Farben und Größe der Icons kann leicht mit CSS angepasst werden

zusätzlich können CSS-Effekte, wie text-shadow für die Darstellunggenutzt werden

·

·

/

Icon Fonts

kostenloser Service icomoon.io

http://icomoon.io/

/

nachgezählt? Es waren nur 10 Techniken in 20min ;)

weitere interessante Links

8 Guidelines and 1 Rule for Responsive Images

Sensible jumps in responsive image file sizes

Responsive Images for Ruby on Rails

Riloadr – cross-browser framework-independent responsive imagesloader

/

Danke für die Aufmerksamkeit!Sven Wolfermann | maddesigns

http://maddesigns.de

HTML5 slideshow by Google

/