Onscherpe png’s op je website? Zo voorkom je wazige logo’s en iconen!

Heb je last onscherpe logo’s of iconen (png bestanden) op je (WordPress) website? Of soms wel en soms dan weer niet? Weten waarom dit ontstaat, maar belangrijker nog hoe je dit kunt oplossen? Lees gauw verder!

Waarom je logo of illustratie vaag of blurry is

Voor het gebruik van een logo op je website wordt er gangbaar gebruik gemaakt van bijvoorbeeld een PNG (met transparante achtergrond). Het nadeel van een bestand als een PNG is dat het een vaste afmeting heeft, en daardoor op verschillende formaten niet altijd even goed werkt en zelfs wazig oogt. En omdat er tegenwoordig met veel verschillende schermformaten rekening moet worden gehouden (een responsive design), is er een grote kans dat een van je websitebezoekers gebruik maakt van een formaat scherm waarbij die PNG net niet mooi weergegeven wordt. Je design schaalt mooi mee, maar het logo is daar niet voor gemaakt vanwege zijn vaste afmeting.

De beste tip voor het gebruik van logo’s & iconen met transparante achtergrond op jouw WordPress website.

Van PNG naar SVG

De oplossing hiervoor is het gebruik van SVG (Scalable Vector Graphics) bestanden als logo! Dit is een schaalbaar bestand bestaande uit puur vector lijnen. Dit soort bestand kan zich moeiteloos aanpassen aan het scherm waarop de website bezichtigd wordt en gaat niet in kwaliteit achteruit. Daarnaast is het bestand ook nog eens erg licht in gewicht, dus fijn voor de (laad)snelheid van je website.

Een PNG weegt al snel een stuk zwaarder dan een SVG, en is doorgaans ook zwaarder dan een JPEG. Maar dit hoeft niet het geval te zijn. Daarom is het aan te raden er altijd op te letten hoe en met welke afmetingen je een bestand exporteert.

Help! Wanneer ik een SVG bestand upload bij media in WordPress geeft hij een melding, wat nu? No problemos: zo opgelost!

WordPress ondersteund SVG bestanden vooralsnog niet zelf, maar er zijn wel plugins hiervoor zoals SVG support. Zoek onder plugins > nieuwe plugins > naar SVG Support > installeren > activeren > uploaden maar! Heel simpel!

Hoe krijg je een SVG bestand van jouw logo?

Heb jij geen SVG bestand van jouw logo? Indien je je logo hebt laten ontwerpen door een grafisch vormgever of illustrator kun je aan hen vragen je logo om te laten zetten naar SVG. Indien de originele bewerkingsbestanden (mits opgemaakt in vectoren) aanwezig zijn is dit alleen een kwestie van opnieuw exporteren en vrij vlot realiseerbaar. Heb je alleen je logo in een JPEG of PNG, dan zou hij wellicht opnieuw moeten worden opgemaakt. Hoe snel dit gedaan is hangt af van de complexiteit van je logo. Heb je de bewerkingsbestanden in illustrator (.ai) wel tot je beschikking? Open je bestand in Illustrator > Save As > SVG (svg) in plaats van de standaard ‘Adobe illustrator (ai)’.

Let op: zorg in dit geval dat alle tekst ook is omgezet naar vector lijnen via Type > Create Outlines. Omdat er een grote kans is dat jouw lettertype niet op elk systeem is geïnstalleerd zal het in dat geval met een default lettertype worden weergegeven, waardoor je logo ineens anders eruit kan zien op de website. Dus om dit te voorkomen, vergeet deze stap niet!

Kom je er niet uit? Neem gerust contact op; samen hebben we het vast zo gepiept!

Meer blogs lezen?

Op de blogpagina vind je meer interessante artikelen. Loop je ergens tegen aan waar je graag een artikel over zou willen lezen? Stuur me gerust een bericht en wie weet kun je jouw onderwerp binnenkort teruglezen op de blog!