Tips en tutorials

Geanimeerde GIF afbeeldingen gebruiken in WordPress? Het kan!

Geplaatst op: - Laatste aanpassing:

Geanimeerde GIF afbeeldingen helpen de aandacht van de bezoeker te trekken en kunnen helpen bij het verduidelijken van de content van je website. Maar wanneer je een GIF afbeelding toevoegt in WordPress loop je misschien tegen het probleem aan dat de afbeelding geen animatie meer heeft. Hieronder lees je hoe je een geanimeerde GIF afbeelding toevoegt in WordPress en ervoor zorgt dat de animatie blijft werken.


Waarom heeft de GIF afbeelding geen animatie meer?

Zodra je een afbeelding upload naar de mediabibliotheek – genereert WordPress een aantal formaten van deze afbeelding. Standaard zijn dit er 4 (thumbnail, medium, large en full size) maar dit kan naar eigensmaak zijn aangepast en daardoor per thema verschillen.

Bij het genereren van de nieuwe formaten worden de nieuwe afbeeldingen statisch omdat bij het opslaan enkel het eerste frame gebruikt wordt. Dit betekent dus dat deze afbeeldingen geen animatie meer hebben. Toch is het mogelijk om geanimeerde GIF afbeeldingen te gebruiken, hieronder vertellen we hoe.


Geanimeerde GIF afbeeldingen gebruiken in WordPress

Screenshot het afbeelding Gutenberg blok selecteren in WordPress

Maak (of bewerk) een bericht of pagina en typ in de teksteditor ‘/a’ om naar het afbeelding blokje te zoeken of klik op de blauwe ‘+’ knop linksboven in het scherm. Selecteer het ‘afbeelding’ blok.

Screenshot van het afbeelding Gutenberg blok in WordPress

Het blokje om afbeelding uit te zoeken verschijnt nu, klik op ‘Uploaden’ om een afbeelding van je computer uit te zoeken of selecteer de ‘Mediabibliotheek’ als je al een afbeelding hebt geüpload.

Screenshot formaat afbeelding selecteren

Afhankelijk van hoe groot de door jou gekozen afbeelding is heb je nu kans dat de afbeelding statisch is geworden en dus geen animatie meer heeft. Dit komt omdat WordPress nu automatisch een kleiner formaat heeft gekozen en er zo voor probeert te zorgen dat je niet onnodig een te grote afbeelding gebruikt. Je kunt dit oplossen door de afbeelding te selecteren en bij de blok instellingen ‘Volledige grootte’ te selecteren. Je gebruikt dan het origineel in plaats van de automatisch de gegenereerde formaten.

Gif afbeelding van een gif afbeelding in de WordPress editor

De afbeelding heeft nu weer een animatie en dit zie je direct terug in de editor.

GIF afbeeldingen zijn zwaarder dan gewone afbeeldingen

Wees je ervan bewust dat GIF afbeeldingen een stuk zwaarder zijn dan gewone afbeeldingen en hierdoor meer ruimte op je hostingpakket innemen en de laadtijd van je website langer kunnen maken. Er zijn ook online diensten waar je GIF afbeeldingen kunt zoeken en een embed code kunt opvragen waardoor dit niet ten kosten gaat van je schijfruimte. Zo heb ik de onderstaande GIF bijvoorbeeld als embed van Giphy.

Geef een reactie

Reacties zullen eerst worden gemodereerd, we publiceren je e-mailadres niet.