Skip to content

Allt om WordPress, webbutveckling — och mer därtill

🎞 Varför GIF i WordPress inte är animerad: 2 sätt att fixa det

🎞 Varför GIF i WordPress inte är animerad: 2 sätt att fixa det

Laddade du upp en GIF till din sajt och den ligger bara där som en statisk bild? En bekant situation. WordPress kör varje bild genom tre storlekar som standard, och vid en av de passen tas animeringen helt enkelt bort.

Problemet är inte filen. Det är hur mediebiblioteket fungerar: systemet skapar miniatyr-, mellan- och stor storlek, och för GIF-filer tar det bara den första bildrutan. Resultatet blir en statisk bild istället för rörelse. Du kan fixa det på ett par minuter, utan tillägg eller kodändringar.

Här är två fungerande metoder för att återställa animeringen. Plus verktyg för att komprimera GIF-filer före uppladdning och pålitliga källor för färdiga animerade filer.

💡 Snabb överblick:

  • När du infogar en GIF, välj "Full storlek" i bilageinställningarna. WordPress skapar då inga miniatyrer och bevarar alla bildrutor.
  • Inaktivera bildoptimeringsplugins medan du laddar upp. De tvångskomprimerar filen och dödar animeringen.
  • Komprimera GIF-filer före uppladdning med EZGIF eller GIF Compressor. Filstorleken minskar utan kvalitetsförlust.

Varför WordPress "förstör" GIF-animering

WordPress är utformat för att bearbeta statiska bilder. Varje gång du laddar upp till mediebiblioteket skapar systemet automatiskt tre kopior: miniatyr (150×150 px som standard), mellanstorlek (upp till 768 px bred) och stor (upp till 2560 px). Dessa värden ställs in i medieinställningarna och gäller för alla bildtyper. För JPEG och PNG är detta praktiskt: du får responsiva versioner för olika enheter.

GIF-filer är annorlunda. Formatet lagrar en sekvens av bildrutor, inte en enda ögonblicksbild. När WordPress beskär en GIF till standardstorlekar extraherar det fysiskt bara den första bildrutan. Resten går förlorade. Resultatet är en statisk bild som ser ut som en skärmdump av animeringens första bildruta.

Optimeringsplugins (ShortPixel, Imagify, Smush) gör saken värre. De komprimerar allt urskillningslöst och skiljer inte på statiska bilder och animering. Algoritmerna är desamma som för JPEG. Resultatet är detsamma: första bildrutan istället för rörelse.

Den goda nyheten: du kan kringgå bearbetningsmekanismen utan att röra functions.php eller lägga till tillägg.

1. Ladda upp GIF-filer i full storlek

Välja full storlek för GIF i WordPress bilageinställningar

Den snabbaste metoden är att tala om för WordPress att inte skapa förminskade kopior för en specifik fil. Två klick när du infogar en bild i ett inlägg.

Öppna inläggs- eller sidredigeraren. I Gutenberg-blockredigeraren skapar du ett "Bild"-block och laddar upp GIF-filen med knappen "Ladda upp". I den klassiska redigeraren klickar du på "Lägg till media" och drar filen till uppladdningsfönstret.

Direkt efter uppladdning tittar du på den högra inställningspanelen. I blocket "Visningsinställningar för bilaga" hittar du rullgardinslistan med storlekar. Som standard är den inställd på Medium eller Stor. Välj "Full storlek".

Klicka först därefter på "Infoga i inlägg". WordPress hoppar över att skapa miniatyrer och infogar originalet med alla animeringsrutor. I Gutenberg-redigeraren ser du omedelbart en förhandsvisning: GIF-filen spelas upp direkt i adminpanelen.

Varför detta fungerar. När du väljer full storlek använder WordPress källfilen utan bearbetning. Systemet kör ingen beskärning, så bildrutesekvensen förblir intakt. GIF-filen förblir orörd.

2. Inaktivera optimeringsplugins under uppladdning

Lista över aktiva bildkomprimeringsplugins i WordPress admin

Komprimeringsplugins är den näst vanligaste orsaken till "trasiga" GIF-filer efter standardbearbetningen i WordPress. De fångar upp filen vid uppladdning och kör den genom sina algoritmer. Algoritmerna skiljer inte på statiska bilder och animering.

Lösningen är enkel: inaktivera optimeringsplugins tillfälligt innan du laddar upp en GIF. Gå till Tillägg → Installerade, hitta ShortPixel, Imagify, Smush, EWWW Image Optimizer och klicka på "Inaktivera" för var och en. Ladda upp GIF-filen i full storlek (metod 1). Återaktivera sedan tilläggen.

Efter inaktivering rensar du både server- och webbläsarcache. Caching-plugins (WP Rocket, W3 Total Cache, LiteSpeed Cache) kan lagra en gammal version av sidan med den trasiga bilden.

En viktig notering. Vissa optimeringsplugins komprimerar bilder genom en bakgrundsprocess, inte vid uppladdningstillfället utan en minut eller två senare. Om GIF-filen slutade animeras inte omedelbart utan efter en tid, kontrollera plugin-inställningarna. Nästan alla har ett alternativ för "Exkludera GIF från bearbetning" eller "Hoppa över animerade bilder". Aktivera det så slipper du inaktivera hela tillägget varje gång.

Ett relaterat problem är HTTP-felet vid bilduppladdning. Om du ser ett felmeddelande efter uppladdning istället för en statisk bild finns lösningen i en separat artikel: hur man fixar WordPress HTTP-fel.

Hur man komprimerar en GIF före uppladdning till WordPress

En okomprimerad GIF kan väga 5, 10 eller till och med 20 megabyte. Att ladda upp en sådan fil till din sajt innebär garanterad långsamhet på mobila enheter. Core Web Vitals svarar på tunga bilder med ett sänkt LCP (Largest Contentful Paint).

Det optimala tillvägagångssättet: komprimera GIF-filen innan du laddar upp den till mediebiblioteket. Gratis onlineverktyg gör detta med ett par klick.

EZGIF är ett allt-i-ett-verktyg för att arbeta med GIF-filer. Förutom komprimering kan det beskära, trimma, ändra animeringshastighet och konvertera GIF till WebP och MP4. Du laddar upp en fil eller klistrar in en direktlänk, väljer en komprimeringsmetod (Lossy GIF ger maximal reducering) och laddar ner resultatet. Fungerar direkt i webbläsaren, ingen registrering krävs.

GIF Compressor är ett verktyg med ett enda syfte: minska GIF-filstorlek. Det stöder dra-och-släpp och batch-uppladdningar. Algoritmen optimerar färgpaletten och tar bort dubblettpixlar mellan bildrutor utan att röra själva animeringen.

Båda tjänsterna är gratis. För engångsanvändning räcker detta. Om du arbetar med GIF-filer regelbundet, överväg skrivbordsalternativ: ImageOptim för macOS eller FileOptimizer för Windows.

Var man får tag på animerade GIF-filer till din sajt

Du behöver inte söka efter GIF-filer över hela internet. Två pålitliga källor där filer är sorterade efter kategori och redo att infogas på din sajt.

Giphy är den största databasen med animerade bilder. Miljontals GIF-filer är indelade i kategorier: från reaktioner och memes till infografik och abstrakt animering. Filer kan laddas ner direkt eller bäddas in via inbäddningskod. Licensen tillåter användning på webbplatser så länge du inte säljer själva filerna vidare.

Reaction GIFs är en katalog med animerade reaktioner: applåder, förvåning, skratt, ogillande. Praktiskt när du behöver lägga till känslomässig betoning i text utan att störa stilen. Filer laddas ner med ett klick, ingen registrering krävs.

Båda källorna låter dig filtrera GIF-filer efter storlek och varaktighet, vilket är användbart när du behöver en lätt fil som inte saktar ner sidan.

Video: hur man lägger till en animerad GIF i WordPress

En kort videohandledning på engelska som visar hela processen från uppladdning till publicering med skärminspelning. Om du fortfarande har frågor om redigeringsgränssnittet efter att ha läst, besvarar videon dem visuellt.

⁉️🤔 Vanliga frågor

Kan jag få WordPress att sluta skapa miniatyrer för GIF-filer automatiskt?

Ja, genom wp_handle_upload_prefilter-hooken i ditt barntemas functions.php. Hooken fångar upp filen före bearbetning och kontrollerar MIME-typen: om den är image/gif hoppar systemet över att skapa miniatyrer. Men när föräldratemat uppdateras går koden i functions.php förlorad. Så arbeta antingen genom ett barntema eller flytta koden till tillägget Code Snippets, som överlever alla uppdateringar.

Varför animeras inte GIF-filen på den mobila versionen av min sajt?

Oftast är problemet adaptiv lazy loading. Vissa caching-plugins (WP Rocket, LiteSpeed Cache) ersätter GIF-filer med en statisk förhandsvisning på mobila enheter för att spara bandbredd. Kontrollera plugin-inställningarna: hitta alternativet "Lazy Load för iframes och videor" eller "Ersätt GIF med platshållare" och inaktivera det. Om det inte hjälper, testa GIF-filen med Chrome-utvecklarverktygen i emuleringsläge för mobila enheter.

Vad är den maximala GIF-storleken som tillåts för WordPress?

Det finns ingen formell gräns. WordPress tar emot filer upp till 100-200 MB; den övre gränsen beror på serverns PHP-inställningar (upload_max_filesize, post_max_size). Men ur prestandasynpunkt bör du hålla GIF-filer inom 1-2 MB. Allt tyngre saktar märkbart ner laddningen. För animeringar längre än 5 sekunder är det bättre att använda MP4 via "Video"-blocket: det väger 5-10 gånger mindre vid samma kvalitet.

Kan jag konvertera en GIF till MP4 för WordPress?

Ja, och för långa animeringar är detta till och med rekommenderat. Tjänsten EZGIF konverterar GIF till MP4 med ett klick. Ladda sedan upp MP4-filen till mediebiblioteket och infoga den via "Video"-blocket i Gutenberg. Fördelen: MP4 använder komprimering mellan bildrutor, så en fil med samma visuella kvalitet väger mycket mindre. Skillnaden är särskilt märkbar på mobila enheter.

Kommer animeringen att återställas om jag laddar upp GIF-filen igen efter att ha inaktiverat plugins?

Ja, men med en nyans. Om du laddar upp en fil med samma namn skapar WordPress en kopia med suffixet -1, -2 och så vidare. Den gamla statiska versionen finns kvar i mediebiblioteket. Vi rekommenderar att du tar bort den gamla filen via Media → Bibliotek och sedan laddar upp GIF-filen igen med plugins inaktiverade och full storlek vald. Animeringen kommer att återställas helt.

Vad du ska göra om GIF-filen fortfarande inte animeras

De två beskrivna metoderna (välja full storlek och inaktivera optimeringsplugins) täcker de flesta fall. Men om GIF-filen fortfarande inte rör sig, gå igenom denna korta checklista.

Kontrollera själva filen. Ladda ner GIF-filen från sajten och öppna den lokalt i en webbläsare. Om det inte finns någon animering där heller ligger problemet i källfilen, inte WordPress. Detta händer med dåligt konverterade GIF-filer från MP4: under konverteringen försvinner loop-flaggan eller animeringsmetadata.

Kontrollera temainställningar. Vissa teman, särskilt äldre premiumteman med egna komprimeringsramverk, fångar upp bilduppladdningar genom inbyggda skript. Byt tillfälligt till ett standardtema, som Twenty Twenty-Five, och ladda upp GIF-filen där. Om det fungerar, kontakta temats support.

Kontrollera serverns bildcache. CDN-tjänster (Cloudflare, BunnyCDN, StackPath) kan cacha den gamla statiska versionen av filen. Efter att du har laddat upp GIF-filen igen, rensa CDN-cachen i tjänstens kontrollpanel.

Byt format. Om ingenting återställer animeringen, konvertera GIF-filen till MP4 med EZGIF-konverteraren och infoga den som video. För användaren är det ingen skillnad: animeringen spelas upp och filen väger mindre.