Retina afbeeldingen

Wanneer uw website een betere kwaliteit afbeeldingen weergeeft, zal deze hoger gewaardeerd worden door bezoekers. Echter vaak zorgt het weergeven van een hoge kwaliteit afbeelding voor een verlaging van de snelheid van de website, wat vervolgens weer een negatieve invloed heeft op de score in zoekmachines. Hoe gaan we hiermee om...

Retina afbeeldingen, wat is dat?

Een retina afbeelding is een mooie marketingterm geïntroduceerd door Apple. Het betekend feitelijk niets anders dan een afbeelding in hogere resolutie (en dus hogere kwaliteit).

Tegenwoordig worden niet enkel de beeldschermen die we gebruiken op een normale computer steeds groter, maar ze worden ook kwalitatief steeds beter, net zo`n hoge kwaliteit als de moderne mobiele apparaten en de beste televisies van het moment. De kwaliteit zit onder andere in het aantal beeldpunten op een scherm en de daarbij behorende schermresolutie. Zo`n 20 jaar geleden was het heel normaal om een computer beeldscherm te hebben met 800 pixels breed en 600 pixels hoog. Een dergelijk beeldscherm bestaat dus uit 800x600 = 480.000 beeldpuntjes, die elk een kleur kunnen weergeven. Wanneer we daarop een foto weergaven van 400 x 300 pixels werd deze dus uitvergroot, en werden effectief voor elke pixel in de foto 4 pixels van het beeldscherm gebruikt. Wanneer we een foto van 1600 x 1200 pixels weergaven op een scherm van 800 x 600 pixels, werden de helft van de pixels zowel horizontaal als verticaal dus overgeslagen.

Ondanks dat we tegenwoordig schermen hebben van wel 3.000 pixels breed, hebben we inmiddels ook foto`s van 6.000 pixels breed. De oplossing hiervoor zijn retina beeldschermen. Deze beeldschermen zijn dan bijvoorbeeld 3.000 pixels breed, maar hebben eigenlijk op elke plek van die 3.000 pixels niet één maar twee lichtpuntjes beschikbaar. Effectief zijn deze schermen dus 6.000 pixels breed, maar ze gedragen zich als 3.000 pixels breed. Hierdoor wordt een foto van 6.000 pixels superscherp weergegeven op een dergelijk beeldscherm.

Hierbij een voorbeeld van het kwaliteitsverschil tussen hetzelfde icoontje op een normaal scherm en een retina scherm (in dit geval een iPhone 4, de generatie telefoons vanaf wanneer retina gebruikt werd):

Gebruik op een website

Om retina afbeeldingen op een website te gebruiken moeten we dus een afbeelding gebruiken die een grote resolutie heeft. De meest gebruikte iPads en iPhones hebben een schermresolutie weergave van ongeveer 1000 pixels breed, en daarbij 2 lichtpuntjes per pixel zoals hierboven omschreven. De daadwerkelijk gebruikte fotoresolutie kan dus ongeveer 2000 pixels zijn voor de meest scherpe afbeeldingen. Voor meer schermresoluties zie ook https://en.wikipedia.org/wiki/Retina_display.

Om een foto in "retina" weer te geven op een website kunnen we dus een afbeelding van 2000 pixels breed (of meer) invoegen. Om rekening te houden met toekomstige ontwikkelingen adviseren we zelfs om een afbeelding van 3200 pixels breed in te voegen, indien deze foto in de volledige breedte van de website wordt weergegeven.

Snelheid van de website

In normale gevallen zal de snelheid van de website hieronder lijden. In websites die BigBase maakt zorgen we tegenwoordig voor een correcte oplossing hiervoor, waardoor de afbeelding die gebruikt wordt, past bij het scherm en de internetverbinding van de gebruiker. Wat betekend dit concreet?

• Wanneer iemand met een telefoon de website bezoekt, zal de afbeelding automatisch verkleind worden naar het kleinere formaat van deze telefoon;
• Wanneer iemand met een retina scherm de website bezoekt, zal de afbeelding automatisch op de hoogste kwaliteit, passende bij het formaat van dat scherm, worden weergegeven;
• Wanneer iemand met een heel groot (retina) scherm de website bezoekt, zal de originele grote afbeelding weergegeven worden;
• Wanneer iemand met een heel groot (retina) scherm en een heel trage internet verbinding (bijvoorbeeld in een buitengebied, of op een vliegveld met slechte WiFi) de website bezoekt, zal deze automatisch een kleinere variant van de afbeelding te zien krijgen, die past bij de actuele internetsnelheid, zodat de website in zijn geheel toch heel snel zichtbaar is.
• Wanneer een zoekmachine de website gaat indexeren, dan worden alle afbeeldingen aangeleverd zodat de zoekmachine begrijpt dat de pagina heel snel kan zijn (met de kleine afbeeldingen) maar ook hoge kwaliteit biedt, waardoor zoekmachines de website positiever beoordelen dan andere websites.

Hoe in te stellen?

Om deze instellingen te activeren neem contact met ons op, aangezien we dan het beste kunnen beoordelen of het voor uw website zinvol is. Om deze instelling optimaal te benutten kunt u alvast alle afbeeldingen (opnieuw) invoegen met een hoge(re) resolutie. Denk daarbij wel aan het gebruik van schijfruimte op uw webserver, deze dient mogelijk uitgebreid te worden als u vele afbeeldingen gebruikt.

Let op: Deze functionaliteit is beschikbaar vanaf versie 4.3.13 van Base4. Support hierop is in veel gevallen bij uw abonnement inbegrepen. Neem contact met ons op voor hulp en verdere uitleg.