Hur man lägger till animerade GIF-filer i WordPress (på RÄTT sätt)

Du hittade den perfekta animerade GIF:en för att ge liv åt ditt blogginlägg. Men när du lägger till den i WordPress, sitter den bara där som en platt, tråkig bild, utan någon av den animation du ville ha.

Det är ett frustrerande vanligt problem. Detta händer eftersom WordPress ibland bara kan spara den första bilden av GIF:en när olika bildstorlekar skapas.

Lyckligtvis finns det ett enkelt trick för att fixa detta. I den här guiden visar vi dig rätt sätt att lägga till animerade GIF-filer så att de alltid fungerar perfekt.

Varför fungerar inte WordPress GIF-filer korrekt?

Ibland blir GIF-animationer statiska bilder i WordPress eftersom det automatiskt genererar flera storlekar av bilden, men bara från den första bildrutan i animationen.

Varför händer det?

När du lägger till någon typ av bild på din WordPress-webbplats med hjälp av medieuppladdaren, skapar WordPress automatiskt flera kopior av den bilden i olika storlekar.

Det finns 3 standardstorlekar för WordPress-bilder som genereras automatiskt: thumbnail, medium och large. WordPress behåller också din ursprungliga uppladdning, som du kan välja genom att välja alternativet ‘Full Size’.

Men när WordPress skapar nya bildstorlekar för animerade GIF-filer, sparar den bara den första bilden i GIF-filen.

Som ett resultat, när du lägger till någon av dessa genererade bildstorlekar i ditt inlägg eller sida, kommer de att vara statiska bilder och resultera i att WordPress GIF inte fungerar.

Nu ska vi titta på det rätta sättet att lägga till animerade GIF-bilder i WordPress så att de behåller sin animation.

Lägg till animerade GIF-filer i WordPress på rätt sätt

Först måste du redigera eller skapa ett nytt WordPress-inlägg eller en sida i WordPress Gutenberg-redigeraren för att lägga till den animerade GIF-filen.

När du är i WordPress innehållsredigerare, klicka på '+' -knappen och lägg till ett Bildblock.

Därefter hittar du flera sätt att ladda upp din animerade GIF i Bildblocket.

För att börja, klicka helt enkelt på knappen 'Ladda upp' och välj din animerade GIF från din dator. Eller så kan du klicka på knappen 'Mediebibliotek' och lägga till mediefiler som redan har laddats upp till ditt mediebibliotek.

Det finns också ett alternativ att ange länken till din GIF genom att klicka på knappen 'Infoga från URL', men vi rekommenderar inte detta eftersom det inte laddar upp bilden till din webbplats.

När du laddar upp din GIF, kommer blockredigeraren att infoga den i ditt innehåll, och du kan anpassa den.

Efter att ha lagt till GIF-filen måste du välja alternativet 'Full storlek' under 'Bildstorlek' från menyn till höger.

Det är viktigt att välja ‘Full Size‘ eftersom detta talar om för WordPress att använda den ursprungliga, orörda animerade GIF-filen du laddade upp. De andra storlekarna (som medium eller thumbnail) är statiska kopior som WordPress skapade från endast den första bildrutan i animationen, vilket är anledningen till att de inte rör sig. Genom att välja ‘Full Size’ säkerställer du att animationen fungerar korrekt. 👍

Du kommer att kunna se animationen direkt i innehållsredigeraren.

Publicera eller uppdatera ditt blogginlägg för att se de animerade GIF-filerna i aktion.

Bonustips för att använda animerade GIF-filer i WordPress

Animerade GIF-bilder är vanligtvis större i filstorlek än andra bildfiler. Det beror på att de innehåller flera komprimerade bilder som används som bildrutor för att skapa animationen.

Att använda stora GIF-filer eller lägga till för många GIF-bilder på en WordPress-sida kan sakta ner din webbplats och skada din sökmotoroptimering (SEO). Se vår ultimata guide om hur du förbättrar WordPress hastighet och prestanda för mer information.

Om du använder Giphy.com för att hitta animerade GIF-filer, kan du tycka att GIF Master-pluginet är mycket användbart. Det låter dig söka i Giphy-databasen från din WordPress-instrumentpanel och lägga till GIF-filer utan att lämna din WordPress-webbplats.

På liknande sätt kan du också använda EmbedPress för att automatiskt lägga till animerade GIF-filer och memes från Gfycat. Ange bara URL:en till din GIF från Gfycat, så bäddar pluginet in den i ditt innehåll.

Vanliga frågor om GIF-filer i WordPress

Här är svar på några av de vanligaste frågorna vi får om att använda animerade GIF-filer i WordPress.

Varför är animerade GIF-filer så stora?

Animerade GIF-filer är i grunden en serie statiska bilder, eller bildrutor, paketerade i en enda fil. Ju fler bildrutor och färger en GIF har, desto större blir dess filstorlek.

Det är därför de ofta är mycket större än vanliga JPG- eller PNG-bilder.

Hur kan jag optimera GIF-filer för att göra dem mindre?

Du kan använda gratis onlineverktyg som EZgif eller GIMP för att optimera dina animerade GIF-filer innan du laddar upp dem till WordPress. Dessa verktyg kan hjälpa dig att minska filstorleken genom att till exempel ta bort extra bildrutor eller minska antalet färger i GIF-filen, ofta utan en märkbar kvalitetsförlust.

Är det dåligt att använda många GIF-bilder på en enda sida?

Ja, att lägga till för många stora GIF-filer på en enda sida kan avsevärt sakta ner din webbplats laddningstid. Detta kan skapa en dålig användarupplevelse och negativt påverka dina SEO-rankningar.

Det är bäst att använda dem sparsamt för att lyfta fram viktiga punkter eller lägga till visuellt intresse där det är viktigast.

Ytterligare resurser för att hantera dina mediefiler

Vi hoppas att den här guiden hjälpte dig att korrekt lägga till animerade GIF-filer på din WordPress-webbplats. Nu när du har bemästrat GIF-filer, kanske du tycker att dessa andra artiklar om mediehantering är användbara.

• Bra WordPress-plugins för att hantera bilder – Upptäck verktyg som kan hjälpa dig att organisera, optimera och visa dina bilder mer effektivt.
• Varför du aldrig ska ladda upp en video till WordPress – Lär dig varför värdskap för dina egna videor kan skada din webbplats prestanda och vad du bör göra istället.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.