Av
Redan när iphone 4 släpptes började webbdesigners inse att de hade fått ett nytt problem att tackla: retinaskärmen. Efter att Nya iPad och Macbook Pro med retinaskärm släpptes har problemet nått en kritisk punkt och det är nu läge även för oss vanliga hemmapulare att se till att våra hemsidor är anpassade för de nya, högupplösta skärmarna.
Det är som tur är inte särskilt krångligt att koda om en sajt för retinastöd. Huvudsakligen rör det sig i koden om att lägga till lite javascript och något som kallas media queries för att göra att rätt bild laddas för rätt skärm. Här visar vi det enklaste och smidigaste sättet att ”retinera” din sajt.
Gör stora bilder
Det första du måste göra är så klart att göra om alla bilder på sajten med dubbel upplösning. Om du har byggt upp en större sajt och har många bilder kan det vara riktigt problematiskt, men för mindre material eller om originalbilderna finns att tillgå och är större än hur de ska visas blir det lättare. Spara sedan två olika versioner och namnge den med dubbel upplösning som den mindre men med @2x precis före .jpg/.png.
Bekanta dig med media queries
Media queries är en del av css3-standarden och ligger bakom den våg av flexiblare, mobilanpassade sajter där samma sajt kan visas på olika sätt beroende på enheten du använder för att besöka den, utan att man bygger flera helt olika versioner av sajten. En av dessa ”frågor” du kan ställa till besökarens webbläsare är om den har hidpi-läge (det vill säga retinaskärm), men det finns många andra fördelar med att använda dem.
Bakgrundsbilder
Bakgrundsbilder, det vill säga sådana som inte läggs till via <img>-taggar utan via en <div>, fixar du genom att helt enkelt välja rätt filnamn i css-koden för den klassen. En logotyp längst upp på sajten kanske har klassen logo och då har css:en både en normal beskrivning av klassen, där background-image sätts till den lågupplösta bilden, och en alternativ variant som används i stället för retinaskärmar med ovanstående kod.
Inline-bilder
Vanliga bilder som läggs till med html-taggen <img> fungerar lite annorlunda än de som bakas fram med css. I stället för media queries måste du använda javascript-kod. För att detta ska fungera måste besökaren så klart ha javascript aktiverat, annars blir det bara de lågupplösta varianterna av bilderna som visas lite suddigt. Om du är mer ambitiös, se rutan här intill för en alternativ lösning som dessutom sparar bandbredd.
<script type=”text/javascript”>
$(function () {
if (window.devicePixelRatio == 2) {
var images = $(“img.hires”); // loop through the images and make them hi-res
for(var i = 0; i < images.length; i++) { // create new image name
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += “@2x” + imageType; //rename image
images[i].src = imageName;
}
}
});
</script>
<img src=”kaffepaus.png” class=”hires” width=”200” height=”100” />
Så byter du ut en bild mot dess stora dubblett
Koden ovan är ett enkelt Jquery-javascript som på enheter med retinaskärmar först kollar om en högupplöst bild finns på servern (du markerar dessa genom att ge dem klassen ”hires”) och sedan byter ut koden som laddar bilden mot en som laddar den högupplösta. Bilder i html måste ha höjd och bredd utsatta, annars kommer de retinaanpassade bilderna att visas dubbelt så stora och precis lika suddiga som tidigare.
Alternativa metoder
Har du en Wordpressblogg finns det färdiga pluginer som hjälper till med ”retineringen”. Kolla till exempel på http://mw24.se/1gz. Denna kan till och med på egen hand göra retinaversioner av bilder du lagt upp som är lagom högupplösta till att börja med (foton till exempel).
Riktigt stora sajter med många <img>-bilder som vill skona både sig själva och användarna från ökad bandbredd gör bäst i att lägga valet mellan hög- och lågupplöst på servern. Projektet adaptive-images.com har färdig php-kod som tillsammans med ändringar i .htaccess-filerna på din server gör att rätt bildfil alltid laddas.
Det är som tur är inte särskilt krångligt att koda om en sajt för retinastöd. Huvudsakligen rör det sig i koden om att lägga till lite javascript och något som kallas media queries för att göra att rätt bild laddas för rätt skärm. Här visar vi det enklaste och smidigaste sättet att ”retinera” din sajt.
Gör stora bilderDet första du måste göra är så klart att göra om alla bilder på sajten med dubbel upplösning. Om du har byggt upp en större sajt och har många bilder kan det vara riktigt problematiskt, men för mindre material eller om originalbilderna finns att tillgå och är större än hur de ska visas blir det lättare. Spara sedan två olika versioner och namnge den med dubbel upplösning som den mindre men med @2x precis före .jpg/.png.
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .logo { background-image: image-url(‘logo@2x.png’); background-size: 300px 300px; } } Bekanta dig med media queriesMedia queries är en del av css3-standarden och ligger bakom den våg av flexiblare, mobilanpassade sajter där samma sajt kan visas på olika sätt beroende på enheten du använder för att besöka den, utan att man bygger flera helt olika versioner av sajten. En av dessa ”frågor” du kan ställa till besökarens webbläsare är om den har hidpi-läge (det vill säga retinaskärm), men det finns många andra fördelar med att använda dem.
BakgrundsbilderBakgrundsbilder, det vill säga sådana som inte läggs till via <img>-taggar utan via en <div>, fixar du genom att helt enkelt välja rätt filnamn i css-koden för den klassen. En logotyp längst upp på sajten kanske har klassen logo och då har css:en både en normal beskrivning av klassen, där background-image sätts till den lågupplösta bilden, och en alternativ variant som används i stället för retinaskärmar med ovanstående kod.
Inline-bilderVanliga bilder som läggs till med html-taggen <img> fungerar lite annorlunda än de som bakas fram med css. I stället för media queries måste du använda javascript-kod. För att detta ska fungera måste besökaren så klart ha javascript aktiverat, annars blir det bara de lågupplösta varianterna av bilderna som visas lite suddigt. Om du är mer ambitiös, se rutan här intill för en alternativ lösning som dessutom sparar bandbredd.
<script type=”text/javascript”>
$(function () {
if (window.devicePixelRatio == 2) {
var images = $(“img.hires”); // loop through the images and make them hi-res
for(var i = 0; i < images.length; i++) { // create new image name
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += “@2x” + imageType; //rename image
images[i].src = imageName;
}
}
});
</script>
<img src=”kaffepaus.png” class=”hires” width=”200” height=”100” />
Så byter du ut en bild mot dess stora dubblettKoden ovan är ett enkelt Jquery-javascript som på enheter med retinaskärmar först kollar om en högupplöst bild finns på servern (du markerar dessa genom att ge dem klassen ”hires”) och sedan byter ut koden som laddar bilden mot en som laddar den högupplösta. Bilder i html måste ha höjd och bredd utsatta, annars kommer de retinaanpassade bilderna att visas dubbelt så stora och precis lika suddiga som tidigare.
Alternativa metoder
Har du en Wordpressblogg finns det färdiga pluginer som hjälper till med ”retineringen”. Kolla till exempel på http://mw24.se/1gz. Denna kan till och med på egen hand göra retinaversioner av bilder du lagt upp som är lagom högupplösta till att börja med (foton till exempel).
Riktigt stora sajter med många <img>-bilder som vill skona både sig själva och användarna från ökad bandbredd gör bäst i att lägga valet mellan hög- och lågupplöst på servern. Projektet adaptive-images.com har färdig php-kod som tillsammans med ändringar i .htaccess-filerna på din server gör att rätt bildfil alltid laddas.
