Billeder, der passer til skærmen – 6 teknikker

Af

Responsive billeder, responsive images Looking for an English translation?

De fleste websteder er fyldt med billeder. Der vises billeder på den store fladskærm og der vises billeder på den lille mobiltelefon. Det er bare ikke smart at hive store, tunge fladskærmsbilleder ned på den lille mobilskærm over en 3g forbindelse, særligt ikke, hvis man har et dyrt dataabonnement.

Det har nogle kloge hoveder tænkt en del over. Således findes der efterhånden en del løsninger, der forsøger at “lugte” sig frem til skærmstørrelsen, så man kan sende de store, højopløselige men tunge billeder til den store skærm og nøjes med små, lette billeder til den lille skærm.

Her er 6 forskellige teknikker.

1. Picturefill

Forhistorien: I frustration over manglen på standard til opmærkning af adaptive billeder, foreslog Bruce Lawson i november 2011 at genbruge syntaksen fra HTML5’s <video> element i form af et <picture> element. <picture> elementet gør det muligt at definere flere billedkilder. Ved hjælp af media queries kan man så kontrollere, under hvilke omstændigheder et billede skal vises til brugeren.

<picture> elementet er endnu på tegnebrættet, understøttes ikke i nogen browsere og kan derfor ikke bruges.

Scott Jehl syntes dog, det var så god en ide, at han byggede dette polyfill, Picturefill, der får en lignende syntaks til at virke vha. JavaScript:

<div data-picture="" data-alt="">
	<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 -->
	<noscript>
		<img src="small.jpg" alt="">
	</noscript>
</div>

Fordele: Lightweight, nemt at implementere selve script’et.
Ulemper: Kræver en del ekstra markup, svært at implementere retrospektivt, dvs. på eksisterende indhold.
Demo: http://scottjehl.github.io/picturefill/
Download & dokumentation: https://github.com/scottjehl/picturefill

2. HiSRC

HiSRC er et jQuery plugin til adaptive billeder, skrevet af Christopher Schmitt. Det tager både højde for skærmstørrelse og netværkshastighed. Man indsætter sine billeder i HTML dokumentet med et almindeligt <img> tag og definerer sine alternative billedkilder deri vha. data-attributter:

<div class="hisrc">
	<img alt="" src="small.jpg" data-1x="medium.jpg" data-2x="large.jpg" />
</div>

Fordele: Ren og semantisk valid kode, lightweight.
Ulemper: Kræver ekstra markup og data attributter på <img> elementet, dvs. svært at implementere på eksisterende indhold.
Download & dokumentation: https://github.com/teleject/hisrc

3. Responsive-Enhance

Responsive Enhance er et lillebitte JavaScript, der er skrevet af Josh Emerson. Scriptet opererer på <img> elementer sammen med data-attributter:

<img id="demo" src="medium.jpg" alt="" data-fullsrc="large.jpg">
<script>responsiveEnhance(document.getElementById('demo'), 400);</script>

Fordele: Ren og semantisk valid kode, lightweight.
Ulemper: Kræver ekstra data-attributter på <img> elementet, dvs. svært at implementere på eksisterende indhold. Downloader 2 billeder på store skærme.
Download & dokumentation: https://github.com/joshje/Responsive-Enhance

4. Adaptive Images

Adaptive Images er en overvejende server-side teknik, der “sniffer” brugerens skærmstørrelse og automatisk skalerer, cacher og leverer passende versioner af web-stedets billeder. Det gør den vha. .htaccess, en php-fil og en enkelt linie JavaScript, helt uden at rette i eksisterende mark-up. Adaptive Images er lavet af Matt Wilcox.

Fordele: Ren og semantisk valid kode, nem at implementere på eksisterende indhold.
Ulemper: Sætter en cookie i brugerens browser, kræver server-side opsætning; Apache, PHP og .htaccess.
Demo, download & dokumentation: http://adaptive-images.com/

5. Compressive Images (min favorit)

Flere detaljer, færre kilobytes: Denne teknik går ud på kun at levere én version af billedet til brugeren uanset skærmstørrelse, men til gengæld komprimere det helt i bund. Daan Jobsis har lavet forsøg, der viser et ganske beskedent kvalitetstab (nogle gange endda forbedring), når store, hårdt komprimerede billeder presses sammen på bare halvdelen af deres original-dimensioner. Se også Filament Group’s indlæg om samme emne.

Eks.: En .jpg med dimensionerne 1280 × 1024 klemmes ned i størrelse 640 × 512 eller mindre.

I praksis vil man sætte billedstørrelserne i CSS med max-width: 100%; (Fluid Images teknikken).

Lav opløsning 301 × 200 pixels,
jpeg kvalitet 80%, 34kb.		Høj opløsning 602 × 400 pixels,
jpeg kvalitet 25%, 27kb.
Asger - Lav opløsning, non responsive imagesAsger - Høj opløsning, responsive images

Man kan med andre ord simpelthen ikke se komprimeringen. Denne metode er indtil videre min favorit, fordi den er så ufatteligt simpel.

Fordele: Meget simpelt. I nogle tilfælde bedre resultater. Perfekt til retina-displays. Små filstørrelser.
Ulemper: Implementering i CMS kræver opsætning af jpg komprimering på serveren.
Demo & dokumentation: http://blog.netvlies.nl/design-interactie/retina-revolution/

6. Responsive Images Clown Car (SVG embedding)

Temmelig eksperimentel: Clown Car teknikken er udviklet af Estelle Weyl og går ud på at udnytte mulighederne i SVG formatet. Henvisning til SVG filen indsættes i et <img> element på simpel og sædvanlig vis:

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

Det er i SVG filen, vi finder magien. Teknikken bygger nemlig på, at SVG i forvejen understøtter både rastergrafik og media queries:

<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>

Fordele: Media queries er indbygget i SVG, SVG understøtter rastergrafik. Kun det nødvendige billede downloades. Al logikken ligger i selve SVG billedet.
Ulemper: SVG understøttes ikke i IE8. Import af eksterne rasterbilleder blokeres af de fleste browseres Content Security Policy.
Demo: http://estelle.github.io/clowncar/bgonly.html
Dokumentation: http://www.standardista.com/responsive-images-clown-car-technique/

Skriv en kommentar