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: introductie (deel 1)
14
Apr 2014
Web development

Responsive images: introductie (deel 1)

14 apr 2014 | Geert | Web development

Maximale breedte met CSS

Via een simpel CSS statement (max-width: 100%) is het erg eenvoudig om ervoor te zorgen dat een afbeelding niet buiten zijn ‘container’ raakt en nooit buiten het scherm valt. Zorg ervoor dat u niet ‘width’ gebruikt, want dan bestaat de kans dat de afbeelding flink uitgerekt wordt (als de container veel groter is dan de afbeelding) en dat komt de kwaliteit niet ten goede.

Opgelost, zult u denken. Dat is echter niet het geval. Aan deze oplossing kleven namelijk twee grote nadelen.

De laadtijd

Op de desktop versie van uw website zult u misschien foto’s gebruiken die 900 pixels breed en 300 pixels hoog zijn. Op een Wifi netwerk of vaste internetverbinding zal dat geen problemen opleveren en zullen deze afbeeldingen in een oogwenk geladen worden.

Echter, als de bezoeker van uw website niet over Wifi beschikt en op zijn/haar smartphone snel informatie wilt opzoeken is het niet wenselijk dat zulke grote afbeeldingen ingeladen moeten worden (en uiteindelijk erg klein getoond worden). Dit kost erg veel data en tijd.

Browser preloading

Een oplossing waar u misschien aan denkt zijn CSS media queries. Daarmee kunt u – afhankelijk van de afmetingen van het scherm – de afbeelding in de gewenste afmetingen laten zien. Op grote schermen laat u de grote versie van de afbeelding zien en op kleine schermen de kleine versie. Echter, worden door de browser eerst alle afbeeldingen ingeladen, en dan pas CSS en jQuery. Hiermee wordt de verbinding van de bezoeker dus extra belast. Ook al is alleen de kleine versie nodig, ook dan zal de grote afbeelding geladen worden.

Bandbreedte meten

Welke afbeelding getoond moet worden is in de ideale wereld niet alleen afhankelijk van de grootte van het scherm. Ook de bandbreedte (snelheid) van de verbinding is van belang.

Als die gebruik maakt van een snelle internetverbinding, is het ook op een smartphone (bijvoorbeeld via Wifi) geen probleem als grote afbeeldingen ingeladen moeten worden. Maakt deze echter gebruik van een langzame internet verbinding, dan is het wenselijk dat kleine afbeelding geladen worden.

W3C heeft een API ontwikkeld, waarmee de informatie van de betreffende verbinding opgehaald kan worden. Het is al geïmplementeerd in enkele oplossingen voor het toepassen van responsive afbeeldingen, maar wordt nog niet door veel apparaten ondersteund.

Een andere oplossing om de internetsnelheid van de bezoeker te meten is Foresight.js. Dit script zorgt ervoor dat een afbeelding van 50KB ingeladen wordt en afhankelijk van de laadsnelheid daarvan wordt beslist hoe snel de internetverbinding is. Een nadeel van dit script is dat er 50KB extra geladen moet worden en andere afbeeldingen mogelijk niet geladen worden, totdat die download voltooid is. Deze oplossing en varianten erop worden door veel oplossingen voor responsive images gebruikt.

Wat wilt u laten zien?

Een ander probleem is dat het simpelweg verkleinen van een afbeelding op een kleiner scherm niet altijd het gewenste resultaat oplevert. In onderstaand voorbeeld is op de PC duidelijk een familie te zien onder een boom. Echter, op een smartphone is van de familie weinig over en ziet u bijna alleen de boom.

Responsive image (schalen)

Uit dit voorbeeld blijkt dat het schalen van afbeeldingen op een smartphone niet voor alle foto´s het gewenste effect oplevert. Om de essentie van de foto niet te verliezen, had in dit geval een uitsnede van de familie gemaakt moeten worden voor de smartphone.

Daarom is het wenselijk dat u zelf verschillende versies van een afbeelding kunt maken en uploaden. Tenminste één van het totaalplaatje voor de PC en één uitsnede voor de smartphone. Afhankelijk van het apparaat wordt dan de juiste afbeelding getoond.

Responsive image (uitsnijden)

Oplossingen

Er zijn reeds veel verschillende oplossingen voor het toepassingen van responsive images. De vraag is echter welke het meest voorziet in uw wensen en het beste past bij uw project. Chris Coyier zette een aantal factoren op een rij bij het kiezen van de juiste oplossing.

In de volgende blog zal ik schrijven over enkele oplossingen voor responsive images en deze voor u op een rij zetten.

 

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