JPG vs PNG

JPG vs. PNG. Welke extensie is beter voor het uploaden van foto’s naar je website vanuit SEO oogpunt?

Mooie afbeelding gemaakt voor op je website?

Maar weet je niet of je ‘m nu als .png of .jpg moet opslaan?

Gebruik je ook altijd dezelfde extensie, omdat je eigenlijk niet weet welk formaat wanneer het beste is?

De bestandextensie heeft invloed op je SEO prestaties.

Hoog tijd om duidelijkheid te scheppen dus!

PNG vs. JPG

Wat is een JPG bestand en wat betekent JPG?

Om even heel eerlijk te zijn …

ook ik heb dit moeten googelen.

De afkorting JPG staat voor Joint Photographic Experts Group.

Leuk, maar wat is dat dan precies?

Een JPG formaat is een bestandindeling of bestandformaat voor foto’s.

Het is veruit de meest bekendste en meest gebruikte formaat.

En een JPG bestand is een gecomprimeerd bestand.

Dit houdt in dat de afbeelding is samengeperst om de bestandsgrootte kleiner te maken.

Het kleiner maken heeft als nadeel dat er een beetje kwaliteitsverlies is, maar dat is vaak met het blote oog niet te zien.

Maar aan de andere kant worden .jpg afbeeldingen daardoor wel sneller geladen.

Nu op naar PNG!

gif vs png vs jpg

Bron: flashxml.net

Wat is een PNG bestand en wat betekent PNG?

Het gekke is, is dat PNG ook een gecomprimeerd bestand is.

En ook, net als JPG, is samengeperst om het bestand kleiner te maken.

De manier van compressie is alleen wel anders dan bij JPG.

Het verschil zit hem vooral in dat de PNG compressie geen beeldkwaliteit verlies heeft, maaaaar… een PNG bestand kan niet zoveel kleuren bevatten als een JPG bestand.

En daarom is een PNG bestand niet per se beter.

Tijd voor wat extra ‘interessante’ informatie:

PNG is in 1995 in het leven geroepen omdat het toen populaire GIF formaat geoctrooieerd was en de afkorting staat voor Portable Network Graphics.

(Ook dat heb ik uit Google gevist)

Wanneer gebruik je een JPG?

Nu komen we aan het bij interessante onderdeel.

Wanneer gebruik je nou precies een JPG bestand?

Daar kan ik veel woorden aan vuil maken maar eigenlijk kun je het best onderstaand schema volgen dat ik gevonden heb op Marketingtribune:

Extensie keuze schemaBron: https://www.marketingtribune.nl/b2b/weblog/2015/04/png-jpg-of-gif-welk-bestandstype-gebruik-je-wanneer/index.xml

Tijd voor een toelichting:

Een JPG bestand gebruik je vooral wanneer een afbeelding veel kleuren bevat, oftewel de standaard kleurenfoto’s, afbeeldingen met veel verschillende kleuren en afbeeldingen met veel licht en donker.

Ook gebruik je JPG wanneer het om grote bestanden gaat, omdat het downloaden van JPG-afbeeldingen gemiddeld sneller gaat.

Tijd om te kijken of bovenstaande informatie goed hebt begrepen.

Tip: gebruik bovenstaand schema.

Onderstaande afbeelding laat 2 dezelfde foto’s zien.

1 in JPG en 1 in PNG.

Weet jij welke JPG is en welke PNG?

JPG en PNG quiz

Je weet het niet hè?

Dat klopt omdat het met het blote oog niet te zien is.

Het verschil zit hem namelijk in het aantal KB’s.

De JPG afbeelding van de vrouw is 78 KB, de PNG afbeelding van de vrouw is maar liefst 401 KB!

Deze afbeelding in PNG is dus bijna 4 keer groot.

Een echte laadtijd killer dus.

… en logischerwijs slecht voor je SEO.

Wanneer gebruik je een PNG?

Eigenlijk gebruik je een PNG precies op de momenten wanneer bovengenoemde argumenten zich niet voordoen.

Oftewel je gebruikt PNG bij een afbeelding met veel wit, met veel transparantie of wanneer de bestandsgrootte er niet toe doet.

Maar dat laatste mag je vergeten.

We willen dat je website zo snel mogelijk is, dat is namelijk goed voor je SEO.

Daarom doet de bestandsgrootte er altijd toe.

Ja, altijd.

Nogmaals tijd om te kijken of jij hebt opgelet.

Welke bestand is denk je kleiner in formaat in onderstaande afbeelding?

De PNG of JPG?

JPG en PNG vraagJUIST!

De PNG.

Het overgrote deel van afbeelding is transparant (De achtergrond is namelijk wit, niet de afbeelding zelf).

In dit geval kun je dus beter de afbeelding in PNG uploaden.

Hoe zet je een JPG om naar een PNG (en vice versa)?

Het omzetten van een JPG naar PNG en andersom is een piece of cake.

Er zijn een tal van online tools te vinden die dit voor je kunnen doen.

Google maar eens op JPG to PNG, van JPG naar PNG of iets in die richting.

Pas wel goed op welke programma’s je gebruikt.

Bepaalde programma’s kunnen namelijk slechte bedoelingen hebben en je dus een virus opleveren.

Als je wat handiger bent met computers dan kan je ook het formaat van een afbeelding omzetten met bijvoorbeeld Photoshop of een andere foto bewerkingsprogramma.

Hoe optimaliseer en verklein je een JPG en een PNG foto?

Een afbeelding kan je altijd op 2 manieren optimaliseren: kwaliteit en formaat.

Eerst ga ik je de logische manier van optimaliseren uitleggen.

Namelijk formaat.

Wanneer een foto op je website in 100 bij 100 pixels te zien is, dan is het niet nodig dat hij is geüpload in 1000 bij 1000 pixels.

Dat is namelijk zonde van de ruimte die de pixels innemen.

Als je dit bij meerdere afbeeldingen doet kan dat op het gebied van laadtijd een grote impact hebben op je SEO.

En voor als je het was vergeten: de laadtijd van je website is een grote ranking factor binnen Google.

Vooral op mobiel!

Op naar de andere manier van optimaliseren: kwaliteit

De kwaliteit van een foto is voor bijvoorbeeld een fotograaf heel belangrijk.

Maar ik ga je eens wat laten zien.

Zie jij een verschil in onderstaande foto’s?

Verschil tinypng

Waarschijnlijk niet.

Jij mag mij nu vertellen welke afbeelding maar liefst 30% minder KB’s bevat :).

Foto’s kan je altijd optimaliseren op het gebied van kwaliteit omdat dit verschil niet voor het menselijk oog te zien is.

Wat er gebeurt is namelijk dat het aantal kleuren verminderd wordt.

Dikke win-win situatie dus!

De kwaliteit van de foto wordt niet minder en je website wordt sneller.

Het optimaliseren van de kwaliteit van je foto zou ik altijd met TinyPNG doen.

Ik ben gek van die tool, want hij werkt vlot, fijn en doet ontzettend goed zijn werk.

Je weet nu hoe je de foto het best kan uploaden vanuit SEO oogpunt.

Als je het vergeet, raad ik je aan om het schema uit te printen en naast je computer te houden.

Dan maak je de fout nooit meer!

Recente blogs

13 juli 2020
Zoekwoordenonderzoek- zo kun je de beste zoekwoorden bepalen

Zoekwoordenonderzoek: zo kun je de beste zoekwoorden bepalen

In al het online marketinggeweld van tegenwoordig sneeuwt het nog wel eens onder: het zoekwoordenonderzoek. En dat is op z’n minst opmerkelijk, want het vormt de basis van in ieder geval je SEO strategie. Met zo’n onderzoek ontdek je namelijk welke zoektermen mensen gebruiken om bedrijven zoals de jouwe te vinden. Op welke termen je gevonden wilt worden, dus. Maar hoe vind je nu precies die zoekwoorden? En hoe kun je voor jezelf de beste zoekwoorden bepalen?
13 juli 2020
Handleiding- Van een persoonlijk profiel naar een zakelijk Instagram account

Handleiding: Van een persoonlijk profiel naar een zakelijk Instagram account

Een zakelijk Instagram account zorgt ervoor dat je meer inzichten, meer functionaliteiten en meer advertentiemogelijkheden krijgt. Wil je zien hoe vaak je profiel is bekeken? Wil je advertenties in de Stories kunnen plaatsen? En wil je ook een contactknop in je Instagramprofiel? Dan ga ik je nu laten zien hoe je dat voor elkaar krijgt door van je persoonlijke profiel een zakelijk Instagram account te maken!
13 juli 2020
Wie, wat, waar en hoe? Alles over de contentkalender

Wie, wat, waar en hoe? Alles over de contentkalender

De contentkalender. Als je voor je bedrijf ook maar iets met social media, bloggen of e-mail marketing doet, heb je er vast wel eens van gehoord. Dat is ook niet gek, want de contentkalender is hartstikke handig. Althans, dat vinden wij. En jij ook, als je dit blog gelezen hebt.
13 juli 2020
8 Tips voor het schrijven van een goede over ons pagina

8 Tips voor het schrijven van een goede ‘over ons’ pagina

De bekende ‘over ons’ pagina. We hebben ‘m allemaal en vaak wordt ‘ie nog goed bezocht ook. Het is de plek waar je meer over jezelf of over je bedrijf kwijt kunt, waar je je bedrijf een gezicht geeft, waar je een verhaal vertelt en … waar je conversies mee kunt behalen. Veel conversies. Maar wat moet je dan bij ‘over ons’ (of ‘over mij’ in het geval van freelancers) vertellen? Hoe beïnvloed je je bezoekers op een positieve manier? Lastige vragen, maar met deze 8 tips voor het schrijven van een goede ‘over ons’ pagina ben je al snel op de goede weg!

Laat je e-mailadres achter en ik zorg ervoor dat jij zelf meer omzet en bezoekers gaat genereren !

Daniel Kuipers
Daniel Kuipers
Ik ben een online marketeer. Eentje met passie. Ik ben gek op social media, SEO en SEA. Kortom, het internet stroomt door mijn aderen.

1 Comment

  1. Wesley schreef:

    Erg handig, wist niet dat er zon groot verschil was tussen jpg en png, zelf gebruikte standaard png, in vervolg zal ik png gebruiken

    Bedank, erg nuttig en handige tips

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

[Inclusief kortingscode]
[Inclusief kortingscode]