Wat is een SVG bestand?

Een SVG-bestand is een grafisch bestand dat gebruik maakt van een tweedimensionaal vectorgrafisch formaat dat is gecreëerd door het World Wide Web Consortium (W3C). Het beschrijft afbeeldingen met een tekstformaat gebaseerd op XML. SVG-bestanden worden ontwikkeld als een standaardformaat voor de weergave van vectorafbeeldingen op het internet.

Het SVG-formaat is een open standaard, ontwikkeld onder het W3C (World Wide Web Consortium), waarbij Adobe een belangrijke rol speelt. SVG-afbeeldingen kunnen worden gemaakt en geëxporteerd vanuit Adobe Creative Suite-programma’s, zoals Illustrator en GoLive.

Het SVG-formaat wordt niet standaard ondersteund door Adobe Photoshop, Photoshop Elements en InDesign. U kunt echter SVG-bestanden in deze programma’s openen met behulp van de SVG Kit voor Adobe CS plug-in.

SVG WordPress Vectorafbeeldingen en logo’s

Scalable Vector Graphics (SVG) is een technologie die tweedimensionale tekeningen weergeeft met behulp van XML. Ze zijn anders dan de algemeen gebruikte afbeeldingsformaten zoals PNG, GIF of JPEG.

Als u een png- of jpeg-afbeeldingsbestand neemt en inzoomt, zult u merken dat het beeld begint te vervagen en pixelachtig wordt.

Vectorafbeeldingen gebruiken geen pixels. In plaats daarvan gebruiken ze een tweedimensionale kaart die de afbeelding definieert. Als u inzoomt, wordt de afbeelding niet pixelachtig.
Hierdoor kunt u vectorafbeeldingen vergroten zonder kwaliteitsverlies. Het belangrijkste is dat SVG-afbeeldingen veel kleiner kunnen zijn dan jpg’s of png’s.

Vectorafbeeldingen worden vaak gebruikt voor iconen, icoonlettertypen, websitelogo’s en brandingafbeeldingen. Je kunt SVG-bestanden in WordPress toevoegen voor je bedrijfslogo, iconen of andere afbeeldingen.

Hoe cool ze ook klinken, SVG-bestanden zijn nog steeds een beetje onveilig. Daarom ondersteunt WordPress het uploaden van SVG-bestanden standaard niet.

Beveiligingsproblemen met SVG in WordPress

SVG bestanden bevatten code in de XML markup taal die vergelijkbaar is met HTML. Uw browser of SVG-bewerkingssoftware verwerkt de XML-opmaaktaal om de uitvoer op het scherm weer te geven.

Dit stelt uw website echter open voor mogelijke kwetsbaarheden in XML. Het kan worden gebruikt om ongeoorloofde toegang te krijgen tot gebruikersgegevens, brute force attacks uit te voeren of cross-site scripting attacks uit te voeren.

De methoden die we in dit artikel zullen delen, proberen SVG-bestanden te zuiveren om hun veiligheid te verbeteren. Deze plugins kunnen echter niet volledig voorkomen dat kwaadaardige code wordt geüpload of geïnjecteerd.

De beste oplossing is om alleen SVG-bestanden te gebruiken die zijn gemaakt door betrouwbare bronnen en om SVG-uploads te beperken tot vertrouwde gebruikers.

Het eerste wat je moet doen is de Safe SVG plugin installeren en activeren.

De plugin werkt out of the box, en er zijn geen instellingen die je moet configureren. Je kunt gewoon beginnen met het uploaden van SVG-bestanden.

Het nadeel is dat deze plugin SVG uploads toestaat door alle gebruikers die berichten kunnen schrijven op je WordPress site.

Wat is een WebP bestand?

Een WebP afbeelding is een bestandsformaat ontwikkeld door Google met als doel de grootte van afbeeldingen te verkleinen met behoud van de beeldkwaliteit. WebP-afbeeldingen zijn ontworpen om het web sneller en beter te maken door kleinere afbeeldingen van hogere kwaliteit te bieden die ontwikkelaars kunnen gebruiken.

Kortom, WebP is een modern afbeeldingsformaat voor het web. Het biedt een betere compressie voor afbeeldingen dan traditionele formaten zoals JPG, PNG en GIF afbeeldingen. De reductie in bestandsgrootte vergeleken met een normaal JPG bestand is normaal gesproken ongeveer 30%.

Voordelen WebP bestand

Zoals u wellicht hebt opgemerkt bij het surfen op het web, kunnen afbeeldingen worden weergegeven als een WebP-bestand. WebP is een bestandsextensie die wordt gebruikt ter vervanging van het verliesloze JPEG-formaat en wordt gebruikt in het JPEG 2000-beeldformaat.

WebP wordt ook voor een specifiek doel gebruikt omdat het een nieuw geoptimaliseerd afbeeldingsformaat is zonder kwaliteitsverlies. De besparing op het beeldformaat is ongeveer 30% vergeleken met het oudere formaat. Dit is een handig hulpmiddel om webpagina’s sneller te laten laden.

Hoe sla ik een WebP bestand op?

WebP is ontwikkeld door Google en is royalty-vrij. Veel apps hebben al geïntegreerde ondersteuning voor WebP.

WebP is bijna niet te onderscheiden van PNG en JPEG, en je kunt het opslaan zoals je elke andere afbeelding van het internet opslaat.

WebP is al geïntegreerd in veel webbrowsers, en bijna alle browsers hebben de vereiste plugin om met het formaat om te gaan. U kunt een WebP-afbeelding op uw computer opslaan op dezelfde manier als een normale afbeelding van het Internet, door met de rechtermuisknop op de afbeelding te klikken en te klikken op “Afbeelding opslaan als”.

Voorbeeld SVG afbeelding, kleur en CSS

Je kan heel mooi aan een SVG kleur toevoegen met CSS. Bijvoorbeeld:

Voeg een class toe aan een SVG afbeelding. Dit is dan de CSS.

.voorbeeld-svg img {
background: rgba(232,240,254,.6);
}

WebP bestand en snelheid WordPress website

Afbeeldingen zijn meestal niet het eerste wat je op een pagina zet, vooral niet boven tekst of extra frames, maar het is mogelijk dat het aanzienlijk verkleinen van de bestandsgrootte van belangrijke/prominente afbeeldingen (zoals het logo van je site) kan helpen bij FCP.

Hoewel .gif, .jpg en .png de meest gebruikte afbeeldingsbestanden zijn, kunt u veel tijd besparen als u die omwisselt voor .webp- of .svg-bestanden. Met bestandsgroottes in de bytes range soms in plaats van kilobytes, zullen uw afbeeldingen in een oogwenk laden. Als u een WordPress gebruiker bent, versie 5.8 heeft ingebouwde .webp ondersteuning, en we hebben een overzicht van hoe SVG afbeeldingen te gebruiken in ons archief.

Waarschijnlijk zal deze methode meer invloed hebben op uw Largest Contentful Paint (LCP) dan op FCP, maar een SVG-logo dat klein genoeg is, kan zeker het eerste zijn wat uw gebruikers zien.

Meer tips naast SVG en WebP om website sneller te maken

Meer tips, handleidingen en tools naast SVG en WebP-afbeeldingen om website sneller te maken:

Daarnaast is deze handleiding handig om de snelheid van je website te verbeteren:
Snelheid meten en analyseren WordPress website
Succes met SVG en WebP afbeeldingen!