SlideShare ist ein Scribd-Unternehmen logo
Responsive Images
15 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öhe
soll sich automatisch in Relation anpassen.
img,embed,object,video{
max-width:100%;/*max.originalpxwidth*/
height:auto;
/*width:auto;*/
}
/
Responsive Images
Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen
Große Bilder werden zwar verkleinert dargestellt, laden aber
unnö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
<imgsrc="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
<imgsrc="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
<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 nicht
vom Browser in den DOM eingefügt (und geladen), wenn JavaScript
aktiviert ist. Ressourcen werden also nicht doppelt geladen.
http://www.monoliitti.com/images/
/
Responsive Images – <noscript>
jQuery Snippet
$('noscript[data-large][data-small]').each(function(){
varsrc=screen.width>=500?
$(this).data('large'):
$(this).data('small');
$('<imgsrc="'+src+'"alt="'+$(this)
.data('alt')+'"/>')
.insertAfter($(this));
});
/
<picture> Element
Aktuelle W3C-Diskussion – <picture> Element
Aufbau wie <video> Element + srcset für Retina-Images
<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>
CSS Retina-Support für background-images
/*Safari,Chromesupportsbackground-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
<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="extralarge.jpg"data-media="(min-width:1000px)"></div>
<!--Fallbackcontentfornon-JSbrowsers.Sameimgsrcastheinitial,unqualifiedsou
<noscript>
<imgsrc="external/imgs/small.jpg"alt="Alt">
</noscript>
</div>
https://github.com/scottjehl/picturefill
/
Clown Car Technique
Media Queries innerhalb SVG
<imgsrc="file.svg"alt="responsiveimage">
Nachteil: SVG erst ab Android 4
http://www.standardista.com/responsive-images-clown-car-technique/
/
Clown Car Technique
<svgxmlns="http://www.w3.org/2000/svg"viewBox="00300329"preserveAspectRatio="xMidYM
<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 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
<IfModulemod_rewrite.c>
#EnableURLrewriting
RewriteEngineOn
Options+FollowSymlinks
#AdaptiveImages
#don'tapplytheAIbehaviourtoimagesinsideAI'scachefolder:
RewriteCond%{REQUEST_URI}!ai-cache
#furtherdirectoriesthatshouldn'tuseAI
RewriteCond%{REQUEST_URI}!cssimages
#SendanyGIF,JPG,orPNGrequestthatISNOTstoredinsideoneoftheabovedirectories
RewriteRule^.*.(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
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),
onlyscreenand(min-resolution:192dpi){
/*Retina-specificstuffhere*/
}
http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
/
Retina JPGs
left: JPEG, 500x508, quality=60, size=87802
right: 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 Darstellung
genutzt 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 images
loader
/
Danke für die Aufmerksamkeit!
Sven Wolfermann | maddesigns
http://maddesigns.de
HTML5 slideshow by Google
/

Weitere ähnliche Inhalte

Ähnlich wie Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)

Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
fabianmoritz
 

Ähnlich wie Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann) (20)

Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web ComponentsFocus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
Web-Technologien: Überblick und Empfehlungen
Web-Technologien: Überblick und EmpfehlungenWeb-Technologien: Überblick und Empfehlungen
Web-Technologien: Überblick und Empfehlungen
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
[German] Ab mit dem Kopf!
[German] Ab mit dem Kopf![German] Ab mit dem Kopf!
[German] Ab mit dem Kopf!
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 

Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)