Stel uzelf eens voor. U ontwerpt een prachtige website die volledig responsive en klaar voor de toekomst is, maar waarvan soms alle afbeeldingen en logo’s onscherp op de website getoond worden. Eeuwig zonde! Sinds de opkomst van de hoge resolutie schermen is dit helaas realiteit. Maar er is een oplossing!

Collega Stefan besprak in een eerder artikel de mogelijkheid om één website op verschillende apparaten en schermgroottes optimaal te kunnen tonen door middel van Responsive webdesign.
Deze week geef ik antwoord op de vraag hoe de door u ontworpen website maximaal scherp getoond kan worden op hoge resolutie schermen.

Dubbele pixels, dubbele groottes

Schermen krijgen een steeds hogere resolutie en daar moet zowel qua ontwerp als qua ontwikkeling rekening mee gehouden worden. De hoge resolutie schermen hebben zowel in de hoogte als de breedte 4 keer zo veel pixels als een “normaal” scherm, dit betekend dus 2 keer zo scherp!

Alle elementen binnen de website worden op deze schermen dus met het dubbele aantal pixels (uitgerekt) weergegeven. Bepaalde elementen zoals tekst kunnen hier goed mee omgaan en passen zich vanzelf aan, maar afbeeldingen en logo’s worden door de uitvergroting al snel onscherp.

Hou het scherp

De rekensom is makkelijk: krijgt het scherm viermaal zoveel pixels, dan moet een afbeelding of logo die ook krijgen. Hoe doen we dat? Of in andere woorden, hoe zorgen we ervoor dat alle elementen scherp worden getoond op hoge resolutie schermen? Hiervoor zijn 2 verschillende oplossingen voorhanden, namelijk;

1. Werken met schaalbare vector afbeeldingen
2. Verhogen van de DPI van een afbeelding

Werken met schaalbare vector afbeeldingen

Vector afbeeldingen zijn niet gebaseerd op pixels, maar op vormen en worden daarom in de website pas omgezet naar pixels.
Het voordeel van vectoren is dat ze moeiteloos schalen naar de gewenste grootte en nooit zullen inleveren qua details. Ideaal dus voor zo veel mogelijk scherpte op de website, ongeacht de schermresolutie. Een nadeel kan zijn dat zeer gedetailleerde vector bestanden relatief groot worden, de regel luidt dan ook:

"Simpele vormen, logo’s en knopjes lenen zich uitstekend voor vectoren. De rest van de afbeeldingen en foto’s zeker niet"

Foto 1. Het verschil tussen zonder en met gebruik van vectoren voor logo’s en iconen.

Het aanleveren van vector afbeeldingen in Illustrator of Photoshop (als smart object) zorgt er voor dat alle simpele vormen altijd scherp worden getoond op uw website. Door gebruik te maken van de SVG techniek kan Vuursteen uw vectoren in de website verwerken.

Verhogen van DPI

Vectoren werken dus niet voor foto’s, dus hoe lossen we dit op? Dit kan door het verhogen van het DPI (aantal pixels per inch) van een foto.
Voor normale schermen is een DPI van 72 vereist voor een scherpe weergave van afbeeldingen. Voor hoge resolutie schermen is dit 150 DPI. Het verhogen van de DPI zorgt dus voor meer detail cq scherpte in de afbeelding waardoor deze ook op hoge resolutie schermen scherp getoond worden. Hiervoor geldt dan ook:

"Uw beeldscherm kan niet méér pixels creëren, dus moet de afbeelding dat doen"

Foto 2. Verschil tussen foto’s op hoge resolutie schermen met 72 en 150 DPI.

Waarom niet standaard alles op 150 DPI zult u zich afvragen? De reden is de snelheid van uw website. Foto’s met een dubbel zo hoge resolutie zijn 4 keer groter en zorgen dus voor een langere laadtijd van uw website.

De website kan voor u bepalen of een scherm een hogere resolutie heeft of niet.
Gekoppeld aan de techniek die onze responsive websites aandrijft hebben we ondersteuning ingebouwd voor verschillende DPI versies van dezelfde afbeelding.

"U heeft dus altijd de scherpste afbeelding op het juiste scherm,terwijl de snelheid van uw website optimaal blijft"

Aanlevering van ontwerpen

Het enige wat we u vragen is een mooi ontwerp met vectoren en verschillende versies van de gewenste afbeeldingen, wij zorgen vervolgens dat het werkt.
Altijd, overal en bij iedere resolutie en haarscherp zoals u het graag ziet.

Wilt u hier ook gebruik van maken in websites voor uw klanten?
Neem dan contact met ons op via info@vuursteen.nl of bel voor meer informatie 076-571 8770.

 

Deel dit artikel

Plaats een reactie