Responsive bilder

Kontext att förhålla sig till när man skapar responsive bilder:

  1. Bandbredd
  2. Dimensioner i spalter beroende på brytpunkter
  3. Upplösning
  4. Interaktion: Touch, mouse, keybord

Olika lösningar:

?? skriver om olika metoder att välja bland för att skapa responsive bilder.
http://dev.opera.com/articles/view/responsive-images-problem/

Adaptive images – kräver Apache, php och javascript

http://adaptive-images.com/

Bygger på extra .htc fil och php fil där man skriver in vilka media queries man efterfrågar. Kräver Apache, php och GD-lib (vanligtvis default med php). Och javascript naturligtvis…

Hur det funkar tekniskt:

  1. När användaren kommer in på sajten för första gången, så skapas en session och en javascript cookie sparas med besökarens screen resolution.
  2. Browsern letar igenom html sidan efter img taggar och skickar en request till servern för varje bild, tillsammans med info från cookien.
  3. Apache servern kikar i sin tur i htc filen för att se om det finns speciella instruktioner för img taggen.
  4. Htc filen talar i sin tur om att apache servern ska skicka iväg requesten till images-php filen för att formatera om bilden.
  5. Php filen tittar på vilken screen resolution som användaren har och kollar sedan vilka brytpunkter som har definierats för att ta den som passar bäst.
  6. Om bilden behöver skalas om, så kollar den först om en lämplig bild redan finns cachad. Annars så skalar den om bilden och cachar den.

Dessutom så fixar den också biffen om ingen cookie finns. Den skalar om ändå. Plus att man kan välja att servera bilden som en high DPI image för de devices som har Retina Display (enligt apple så många pixlar/inch så att människans öga inte kan uppfatta dem)

<picture> – element finns ej. förslag från commitee…

Finns en Responsive Image Group från W3C som rekommenderar använding av picture-taggen.


<picture alt="a picture of something">
<!-- Matches by default: -->
<source src="mobile.jpg" />
<source src="medium.jpg" media="min-width: 600px" />
<source src="fullsize.jpg" media="min-width: 900px" />
<img src="mobile.jpg" />
<!-- fallback for non-supporting browsers -->
</picture>

Nackdelar med <picture> är att det är mycket kod, kan inte kolla av bandbredd, inte framåtkompatibelt eftersom det krävs mycket vid en redesign. Du kan inte göra om bilderna ”automatiskt” utan måste göra handpålägg.

<meta> – ingen support ännu

<head>
<meta name='case' data='breakpoint1' media='min-width:350px' />
<meta name='case' data='breakpoint2' media='min-width:1000px' />
</head>
<body>
<img src='/content/images/{case}/photo.jpg' alt='' />
</body>

Fördelar med meta:
Inte så mkt kod, ingen css direkt i koden, head laddas innan body, lätt vid redesign,

Nackdelar med meta:

Kan inte användas vid minor breakpoint, eftersom tänkt vid major, svårt för browser företagen att implementera enligt artikel…

max-width:100%; – Flexibel bild


.content img{
max-width:100%;
}

Fördel att det alltid tar rätt bredd och skalar automatiskt vid fluid layot. Men tar inte hänsyn till bandbredd eller till att innehållet i bilden kanske hade behövts skäras om för minsta formatet.

data-src; – Flexibel bild

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

<img src="image.jpg" alt="" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" />
And the related CSS:</code>

@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);
}
}

Nackdel med metoden är att man inte kikar efter pixel densitet, man laddar in flera bilder, tvingar användaren att skapa flera bilder – men det kanske är positivt…

jQuery

Formatera om bildsliders så att de blir responsive med jQuery plugins.

http://www.catswhocode.com/blog/tips-and-best-practices-to-develop-responsible-websites

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s


%d bloggare gillar detta: