Background

Pixelz Blog

Krijg meer inzicht in productfotografie, nabewerking en best practices voor fotografie voor e-commerce.

Resultaat

De zoekopdracht leverde geen resultaten op, probeer het nog een keer.

Productfoto’s optimaliseren voor mobiel met Responsive Design


Main Image
Ben je ook wel eens gefrustreerd geraakt wanneer je op je mobiel een webpagina bezocht waarbij je continue moest in- en uitzoomen om de tekst te kunnen lezen, een plaatje te bekijken of een formulier in te vullen?

Voorbeeld van een niet-geoptimaliseerde website.=

Voorbeeld van een niet-geoptimaliseerde website..

Browsen op een website die niet geoptimaliseerd is voor mobiel is een waardeloze ervaring. Als je het na een aantal seconden hebt opgegeven, dan ben je niet de enige. Copter Labs reporteert een 28% hogere bounce rate voor mobiele bezoekers op website die alleen gebouwd zijn voor desktops.

Voorbeeld van een geoptimaliseerd en responsive design=

Voorbeeld van een geoptimaliseerd en responsive design.

Er is een eenvoudige oplossing om allerlei soorten bezoekers te ontvangen in je online webshop: het responsive design. Een responsive website controleert de afmetingen van je beeldscherm en past de website daarop aan, door lettertype, opbouw en foto’s daarop aan te passen. Al je bezoekers krijgen dezelfde content te zien, maar op een beter navigeerbare manier.

Zonder twijfel zou iedere webwinkelier een responsive design moeten hebben. Ik zal uitleggen waarom:

1. Er zijn meer mobiele gebruikers, dan desktop gebruikers.

In augustus 2014 plaatste Shopify: “We zijn het omslagpunt voorbij. Deze week, voor het eerst in de geschiedenis, hebben meer mobiele gebruikers (met telefoons en tablets) online gewinkeld dan desktop gebruikers. 50,3% van alle bezoekers was afkomstig van mobiel, waarvan 10% tablets, en maar 49,7% van desktops.”

Responsive shopify

Grote merken weten het al langer.

In maart 2015 gaf Nike aan meer mobiele dan desktop bezoekers te krijgen op hun sites. Een analyst zei: “Nike.com heeft 42% meer omzet gemaakt in de drie maanden voor Februari, door een toenemend verkeer en conversies vanuit mobiele gebruikers.”

2. Google geeft responsive websites voorrang

Verbeter je ranking

Al sinds 2012 heeft Google verklaard dat zei responsive website prefereren boven desktop-only sites. Door gebruik te maken van een responsive design verbetert direct je Google Ranking, omdat dergelijke websites een veel betere klantervaring bieden dan de traditionele websites.

Bied je je producten aan via Google Shopping? Leer dan hier hoe je je productfoto’s optimaliseert.

Wat betekent dit voor productfoto’s op responsive websites?

Laten we eerst een kijken wat er gebeurt. Wanneer je een responsive webdesign gebruikt, wordt dezelde site gebruikt voor desktop en mobiel. Het uiterlijk wordt alleen aangepast. De afmetingen van je foto’s worden aangepast naar je beeldscherm, maar het blijven dezelfde foto’s, dezelfde inhoud, dezelfde resolutie en dezelfde bestandsgrootte. Een hoge resolutie foto van 20MB is misschien mooi op een desktop met breedband data-verbinding, voor mobiel is het echt veel te groot en jaag je je klanten op onnodige datakosten om jouw foto’s te kunnen laden. Hier maak je geen vrienden mee.

Mobile optimization and responsive websites infographic

Wat je wel wil is je klanten bedienen met de hoogste mogelijke kwaliteit foto’s voor hun klantervaring, maar niet hoger dan noodzakelijk.

Dit kun je op een aantal manieren doen.

1. Beelden resizen met “Adaptive Images”

Een eenvoudige oplossing is Adaptive Images. Dat wil zeggen dat de beelden zich aanpassen door een kleine aanpassing in je PHP script, dat het beeldscherm van de gebruiker meet, en daarvoor het juiste formaat beeld aanbiedt. Daar hoef je zelf niets voor te doen, dat doet het programmaatje voor je. Het werkt zelfs met hoge resolutie Retina displays. Je hoeft er ook niet je website opnieuw voor in te richten, je kunt het vandaag implementeren, en het pakt al je foto’s aan die al in je website staan. En het is nog gratis ook!

Je kunt het eenvoudig installeren wanneer je zelf je website host, Gebruik je WordPress, dan is er een plugin genaamd ImageMagick die hetzelfde doet.

Tot zover het positieve aan Adaptive Images, wat is de keerzijde?

Allereerst, wanneer je een Content Delivery Network hebt, daar werkt Adaptive Images niet mee samen. Dat is geen probleem voor een kleine webwinkelier, maar wel voor grote aanbieders. Ten tweede, wanneer je een PHP script moet uploaden, en dat ben je niet gewend, dan kan het wat ingewikkeld overkomen. Als laatste, soms kan het resizen van je beelden wat lang duren en je laadtijd kosten. Er zijn nog andere manieren:

2. Meerdere beelden aanbieden met Picturefill.

Picturefill is een effectieve oplossing als mobiele productfoto oplossing voor je responsive website. Het kan zijn dat als een foto wordt verkleind, dat je design van die foto naar de Filistijnen is. Misschien wil je dan liever een gecropte foto, een andere vorm of een compleet andere foto laten zien. Met de nieuwe HTML web standards kun je zelf aangeven of je een kleine, medium of grote foto wil laten zien, afhankelijk van de grootte van het beeldscherm van je bezoeker. Niet iedere browser laat dit echter toe, dus Picturefill zorgt ervoor dat je bezoekers het beeld krijgt te zien, zoals jij dat wilt.

Workflow of responsive websites

Leer jezelf hoe je een efficiente productfoto workflow creëert,zodat je rekening kunt houden met bepaalde Actions in je nabwerking. Picturefill geeft je veel touwtjes in handen, maar het vraagt wel om de juiste implementaties in je nabewerking. Je foto’s dienen verschillend opgemaakt te worden, en je moet de HTML aanpassen in je website. Dit moet gedaan worden door je webdeveloper, en dat kan weer geld kosten.

Je kunt je beelden zelf aanpassen, maar dit kun je ook laten door een professionele partij, zoals Pixelz. Binnen 24 uur heb je je bestanden aangepast retour, in verschillende outputs. Gebruik onze handige Quality Inspector om je beelden te inspecteren en goed te keuren voor downloading.

You may be able to handle the image resizing yourself, but it can save you time and hassle to outsource it for a convenient 24 hour turnaround. Pixelz lets you specify the image sizes you want, and use our convenient Quality Inspector to review image size and other details in one click before downloading.

De toenamen van smartphones en tablets hebben de internetwereld enorm veranderd, en met verandering, veranderen ook je kansen! Grijp nu de kans aan om meer klanten aan te trekken en hun winkelervaring in jouw shop te verbeteren. Optimliseer nu je productfoto’s voor Responsive Design.

Heb je nog geen productfoto’s? Laat deze dan nu maken door Uw-Productfotograaf!

Succes!