VisionEars wordt Mulberries Agency

Wij gaan vanaf 1 september verder onder de naam Mulberries Agency. Naast de vertrouwde service die je van ons gewend bent hebben we ons ook gespecialiseerd op het gebied van Marketing Automation en Experiment Marketing.

Bekijk hier de website van Mulberries Agency Sluit popup

Download je gratis ebook: Marketing automation - 6 systemen vergeleken

Zoek je naar software om meer leads te converteren? Download onze gratis ebook waarin wij de 6 meest gebruikte softwarepakketten met elkaar vergelijken!

Download je gratis ebook: Infograpic stappenplan

Voor een geslaagde infographic heb je meer nodig dan goede data en een mooi design. Het moet een verhaal vertellen dat aansluit bij de doelgroep. Download ons heldere stappenplan en ga voor die perfecte infographic.

Download je gratis ebook: 10 tips voor een optimale webshop homepagina

De homepagina van je webshop is enorm belangrijk, want het is de first impression die telt. Een geoptimaliseerde homepagina is belangrijk voor het succes van je webshop.

Gratis consult: snelheidsoptimalisatie

Een snelle(re) website draagt bij aan de gebruikerservaring en levert meer conversies en dus omzet op. Wij helpen je graag op weg!

Wie onderstaand formulier invult, ontvangt een uitnodiging van een gratis consult. Tijdens dit gesprek bekijken we de betreffende website(s) en bespreken we samen alle mogelijkheden en valkuilen.

Gratis consult: Webshop optimalisatie

Voor een geslaagde webshop heb je meer nodig dan mooi design. Een goede gebruikerservaring, technisch in orde en zoekmachine geoptimaliseerd. Neem contact op voor een GRATIS consult. Wij nemen je webshop onder de loep zodat jij precies weet waar je kansen liggen en nog meer rendement uit je webshop kan halen.

Download jouw gratis ebook
  • Blog

Responsive images: oplossingen (deel 2)
07
Mei 2014
Web & interaction design

Responsive images: oplossingen (deel 2)

07 mei 2014 | Geert | Web & interaction design

1. Picturefill

Het downloaden en installeren van het script picturefill.js is genoeg om deze oplossing te implementeren. Door het gebruiken van de juiste elementen en attributen (data-media) kunt u deze oplossing toepassen.

Als u overweg kunt met media queries, mag het toepassen van Picturefill geen probleem voor u zijn. Een nadeel hiervan is dat er het werkt op basis van aanpassingen in de broncode. Voor u als webdeveloper zal dat geen probleem moeten zijn. Maar wat doet u met afbeeldingen in nieuwsberichten en andere afbeeldingen die via het CMS geplaatst worden? Een ander nadeel is dat er geen bandbreedte gemeten wordt. Als dat belangrijk is voor uw project is dit dus niet de beste oplossing.

2. HISRC

Voor het toepassen van dit script moet u drie versies maken van uw afbeeldingen: één van lage kwaliteit, één van gemiddelde kwaliteit en één van hoge kwaliteit. HISRC zorgt ervoor dat op basis van Retina-readiness Retina-readinessen de snelheid van het netwerk van de bezoeker de juiste afbeelding wordt getoond.

Om deze oplossing te kunnen toepassen moet u tenminste twee scripts inladen: jQuery en het HiSRC script.

In uw HTML code plaatst u de afbeelding as usual. Als bron (src) geeft u de ‘kleinste’ afbeelding mee. Echter, geeft u ook twee aparte tags (data-src) aan de bron van de afbeeldingen van gemiddelde en hoge kwaliteit mee. Op basis van de internetsnelheid en het scherm van de gebruiker wordt de juiste afbeelding geladen. Deze configuratie doet u via jQuery:

$(document).ready(function(){
$(".hisrc").hisrc();
});

Wat dit script doet is het volgende: de originele source wordt altijd ingeladen. Als de bezoeker gebruik maakt van een mobiele bandbreedte (bijvoorbeeld 3G) worden er geen andere afbeeldingen ingeladen. Echter, als de internetverbinding snel is en de browser is Retina ready, dan wordt de afbeelding ingeladen die is meegegeven aan de tag data-2x. Als de verbinding wel snel genoeg is maar retina afbeeldingen niet ondersteund worden, dan wordt afbeelding data-1x ingeladen.

De kleinste afbeelding wordt dus altijd ingeladen, maar met een snelle internetverbinding mag dat geen problemen zijn. Een nadeel van dit script is wel dat het (net als bij Picturefill het geval is) ook veel aanpassingen vereist in de broncode. Wat doet u dus met afbeeldingen die in het CMS worden meegegeven?

3. Adaptive Images

In tegenstelling tot de twee bovenstaande, is Adaptive Images vooral een server-side oplossing. Hiervoor is een beetje JavaScript nodig, maar vooral een Apache 2 Web server, PHP 5.x en de GD library.

Om het te kunnen installeren, moet u een .htaccess bestand aanmaken, een paar PHP bestanden uploaden op de root van uw website, een beetje JavaScript implementeren en een paar breakpoints in de PHP code plaatsen die overeenkomen met de media queries die u gebruikt. Op de website van de software - onder het kopje Details - vindt u een uitgebreide installatie handleiding.

Het grootste voordeel van deze oplossing is dat u geen aanpassingen hoeft de doen aan de code van uw afbeeldingen. Als de installatie juist is verlopen hoeft u niks meer te doen. Het script zal alle afbeeldingen schalen op basis van de breakpoints. Het werkt dus ook prima in combinatie met afbeeldingen die via het CMS worden geplaatst.

Het heeft echter ook een paar nadelen:

  • Er is een combinatie vereist van Apache en PHP dus het zal niet werken op alle websites.
  • Als de afbeeldingen op een andere server zijn ondergebracht, werkt het script niet.
  • Het detecteert niet de internetsnelheid van de bezoeker.
  • Het art direction probleem wordt hiermee niet opgelost, omdat de afbeeldingen alleen geschaald worden.

4. Sencha.io Src

Sencha.io Src is erg gemakkelijk om te implementeren. Hiervoor is namelijk geen JavaScript of andere configuratie nodig. De afbeeldingen moeten ondergebracht worden op de server van Sencha’s en that’s it! Als de pagina dan bezocht wordt, zal Sencha het verzoek ontvangen en de geschaalde afbeelding terugsturen.

U laadt afbeeldingen hetzelfde in als normaal, maar voor de bron (src) van de afbeelding zet u de link "http://src.sencha.io/". [www.test.nl]/[pad_naar_]/[afbeelding.nl], wordt dus "http://src.sencha.io/[www.test.nl]/[pad_naar_]/[afbeelding.nl]".

Sencha zal dan de afbeelding schalen op basis van het scherm van de bezoeker en die afbeelding zal getoond worden.

Omdat er geen speciale HTML tags nodig zijn is deze oplossing ideaal als u of uw klant veel afbeeldingen plaatst via het CMS. Een nadeel van Sencha is dat u afhankelijk bent van een derde partij. Is de website of server offline dan zal dat gevolgen hebben voor alle afbeeldingen op uw website. Daarnaast wordt hiermee het art direction probleem niet opgelost.

Alternatieven

Bovenstaande oplossingen zijn natuurlijk niet de enige. Sherri Alexander schreef voor Smashing Magazine over Capturing en ReSRC.it, die ook het overwegen meer dan waard zijn.

 

Deel deze blog post:

Geert van Soest | Webdeveloper

Webdeveloper Geert houdt zich bezig met het ontwikkelen van software. Tevens expert op gebied van snelheidsoptimalisatie.

Neem contact met mij op Contact
blog comments powered by Disqus
© 2008-2019 - VisionEars B.V. - Meetbaar online succes