Upload
sven-wolfermann
View
108
Download
0
Embed Size (px)
DESCRIPTION
Kurzüberblick über Responsive Image Techniken beim Webmontag Karksruhe
Citation preview
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
/
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.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/
/
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
·
·
/
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
/