Lazy load är en teknik som gör att webbläsaren inte hämtar bilder innan de syns på skärmen. Tekniken är perfekt när man sitter på ett mobilt nätverk och inte har så mycket bandbredd. Men nu har webbläsarna ställt till det för oss, bilder laddas även om man tar bort src-attributet.

En förklaring av tekniken så som den var

För ett tag sedan var det enkelt. Man hade ett javascript som tog bort src-attributet från bilder och därmed laddades de inte in av webbläsaren. Detta gjorde att man kunde lägga in ett javascript och så fungerade det utan att man behövde göra ändringar i html. Så är inte fallet längre.

Tekniken som den är nu

För att man ska få lazy load att fungera måste man på något sätt ange bildens sökväg på annat vis. Detta görs med fördel med html5 dataattribut. Så istället för att ange bildens sökväg i src-attributet anger vi den i data-src-attributet.

Efter det fungerar det på samma sätt som förut. När användare skrollar på sidan laddas bilderna i takt med att de blir synliga på skärmen genom att man flyttar sökvägen från data-src till src.

Exempel med nya och gamla tekniken.

Här är ett exempel på hur enkelt det var innan. Det fungerade med alla webbplatser.

<img src="image.png" alt="Den bästa bilden som finns på internet" width="200px" height="200px">

Nu får man istället skriva så här:

<img src="blank.png" data-src="image.png" alt="Den bästa bilden som finns på internet" width="200px" height="200px">

Där blank.png är en transparent bild som fungerar som en platshållare för den bilden som kommer laddas in senare. Inte så praktiskt som man hade hoppats.

Varför kan bli mer jobb än nytta

Låt oss säga att du har ett CMS. EPiServer, WordPress eller några av de andra. Då har du en redigerare som genererar html enligt en viss modell. Det betyder att man måste ändra på detta beteende om man vill få det att fungera. Det kanske är enkelt att ändra på detta genom lite kod men nästa problem kommer när användaren anländer till webbplatsen.

Ett litet fel på webbplatsen, och så visas inga bilder för besökarna. Problemet här ligger i att om ett javascript inte kan köras avbryts alla script som väntar. Det kanske inte är ett så stort problem idag när vi har bättre webbläsare både i datorer och mobila enheter.  Men du bör ha det i åtanke innan du bestämmer dig för att använda det.

Lite länkar där du kan hitta mer info:

Lazy load jQuery plugin: http://www.appelsiini.net/projects/lazyload

Mootools lazy load: http://davidwalsh.name/lazyload-plugin 

Lazy load images på css-tricks: http://css-tricks.com/snippets/javascript/lazy-loading-images/

Titta gärna lite på pluggen ”Scissors” som utökar WordPress funktionalitet ännu mer när det gäller bildhanteringen kring beskärning, ändra storlek & rotera. I denna plugg har man även lagt till möjligheten ”vattenmärkning” i bilder. WordPress gör att man inte behöver program som Photoshop eller liknande för hantering av bilder på det här sättet.

En bra plugg för det dagliga redaktionella arbetet med WordPress helt enkelt!

4 hyperstjärnor av 5.

Läs mer om pluggen Scissors Continued här

En bra bild kan lyfta en hel webbplats och med EPiServerbaserade ”ImageVault” behöver redaktören endast välja bild, ImageVault tar hand om det krångliga. Bilden konverteras automatiskt till rätt format och storlek utifrån det som bestämts i sidmallen i EPiServer.

Att hitta en bra bild blir också enklare med ImageVault eftersom man kan organisera alla mediafiler på ett och samma ställe. Med hjälp av album, kategorier och metadata så kan man snabbt hitta den bild man letar efter. Rättigheterna i ImageVault ser till att användare bara kommer åt de bilder som de har rätt att använda.

Med bildredigeringsfunktionen kan redaktören förändra bilden innan den publiceras på en sida. Det sparar tid och kraft eftersom man slipper ladda ner bilden för att ändra den och sedan ladda upp den igen.

Hypernode hjälper gärna till att installera ImageVault i er befintliga EPiServermiljö. Kontakta oss för mer information.

Läs mer om ImageVault som vår samarbetspartner Meridium har tagit fram.