Mijn logo is onscherp op WordPress!

Ze hebben je vast overtuigd. Het systeem WordPress is gemakkelijk, wendbaar, snel en toegankelijk. Je bent begonnen met de bouw van een mooie website in combinatie met een geschikt thema. Een van de eerste dingen die je uit hebt geprobeerd is het uploaden van het logo. Na het uploaden kom je erachter dat dit logo onscherp is en dat je de pixels onderhand met het blote oog kunt tellen. Kortom, je logo in onscherp op WordPress.

Je speelt wat met het formaat, het bestandstype en zaken als margin en padding. Niets blijkt te werken. Het logo ziet er nog steeds korrelig uit en matcht niet met de gehele uitstraling van de website. Gelukkig zijn er enkele oplossingen die je verder kunnen helpen.

1. Upload een .SVG bestand van je logo
Het uploaden van een .SVG (Scalable Vector Graphics) bestand van jouw logo. Ik hoor je denken, dat accepteert WordPress toch helemaal niet? Je hebt gelijk, WordPress accepteert geen .SVG bestandsformaten. Toch zijn er handige plug-ins om dit te omzeilen. Met de juiste .SVG to WordPress plug-in zorg je er voor dat je jouw logo haarscherp naar je afbeeldingenbibliotheek in WordPress kunt uploaden. Een voorbeeld van een dergelijke plugin is SVG Support.

Omdat SVG een schaalbaar vector bestand is kan er middels deze plug-in dus geschaald worden zonder dat het logo er onscherp uit zal zien.

Wil je niet met een plug-in werken en ben je handig met de codetaal PHP? Dan kan je er voor kiezen om het functions.php bestand van de WordPress website aan te passen en deze toegankelijk te maken voor SVG bestanden.

.PNG .JPG .SVG

2. Resolutie voor Retina schermen
Retina whut? Retina is een term die het merk Apple voor het eerst introduceerde bij het scherm van de Ipod Touch. Een Retina-Display is een scherm waarbij pixeldichtheid zo hoog is dat het menselijk oog geen onderscheid meer kan maken tussen losse pixels. Steeds meer (ook niet Apple) apparaten hebben zo’n dergelijk scherm.

Om jouw logo dus scherp te weergeven op een Retina scherm is er dus een hogere pixeldichtheid nodig. Dit betekend simpelweg dat je logo uit meer pixels moet bestaan en dat de resolutie dus hoger moet zijn. De resolutie van je logo is onder andere aan te passen in Adobe Photoshop door het aantal dots per inch (DPI) te verhogen en het formaat te wijzigen.
Sommige WordPress thema’s beschikken over de mogelijkheid om een aparte Retina-display variant van je logo te uploaden. Dit kun je meestal vinden onder de general site settings en door naar logo en favicon te gaan.