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

Jag hittade en gång den perfekta GIF:en för att göra ett inlägg mer engagerande, men den blev en statisk, icke-rörlig bild omedelbart efter uppladdning. Det var otroligt irriterande att se animationen försvinna precis när jag ville engagera mina läsare.

Detta händer eftersom när WordPress automatiskt skapar mindre bildstorlekar (som miniatyrbilder), använder den bara den första bilden i animationen. Resten av animationsdata inkluderas inte i dessa genererade storlekar.

Lyckligtvis är detta enkelt att fixa när du vet vilken inställning du ska ändra. Jag har använt den här specifika metoden på mina egna webbplatser för att hålla animationer igång smidigt utan någon kod.

Här är hur du lägger till animerade GIF-filer i WordPress på rätt sätt.

Varför fungerar inte WordPress GIF-filer korrekt?

När du laddar upp en bild till mediebiblioteket skapar WordPress automatiskt flera kopior av den bilden i olika storlekar.

Det finns 3 standardstorlekar för WordPress-bilder som genereras automatiskt: miniatyrbild, medium och stor. WordPress behåller också din ursprungliga uppladdning, som kallas 'Full storlek'.

Problemet är att när WordPress skapar dessa nya bildstorlekar för animerade GIF-filer, fångar den bara den första bilden i animationen.

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 storlek' eftersom detta talar om för WordPress att använda den ursprungliga, orörda animerade GIF-filen du laddade upp.

De andra storlekarna (som ‘Miniatyr’, ‘Medium’ eller till och med ‘Stor’) är statiska kopior som WordPress genererade med endast den första bilden. Genom att välja ‘Full storlek’ säkerställer du att animationen spelas upp 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.

Om du har en länk till en GIF från Giphy kan du också helt enkelt klistra in URL:en direkt i WordPress-redigeraren på en egen rad. WordPress kommer automatiskt att bädda in den animerade GIF-filen åt dig, ingen plugin krävs.

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. Dessa verktyg kan minska filstorleken genom att ta bort extra bilder eller sänka antalet färger.

Ä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.