Lataa GIF sivustollesi ja se vain seisoo siinä staattisena kuvana? Tuttu tilanne. WordPress ajaa jokaisen kuvan oletuksena kolmen koon läpi, ja yhdellä noista kerroista animaatio yksinkertaisesti katoaa.

Ongelma ei ole tiedostossa. Se johtuu mediakirjaston toimintatavasta: järjestelmä luo pienois-, keski- ja suurikokoiset versiot, ja GIF-tiedostoista se ottaa vain ensimmäisen ruudun. Tuloksena on staattinen kuva liikkeen sijaan. Voit korjata tämän parissa minuutissa ilman lisäosia tai koodimuutoksia.

Alla on kaksi toimivaa tapaa animaation palauttamiseen. Lisäksi työkaluja GIF-tiedostojen pakkaamiseen ennen latausta ja luotettavia lähteitä valmiille animoiduille tiedostoille.

💡 Pikaopas:

• Kun lisäät GIF:n, valitse liitetiedoston asetuksista "Täysi koko". WordPress ei luo pienoiskuvia ja säilyttää kaikki ruudut.
• Poista kuvanoptimointilisäosat käytöstä latauksen ajaksi. Ne pakkaavat tiedoston väkisin ja tuhoavat animaation.
• Pakkaa GIF-tiedostot ennen latausta EZGIF:llä tai GIF Compressorilla. Tiedostokoko pienenee ilman laadun heikkenemistä.

Miksi WordPress "rikkoo" GIF-animaation

WordPress on suunniteltu staattisten kuvien käsittelyyn. Joka kerta kun lataat tiedoston mediakirjastoon, järjestelmä luo automaattisesti kolme kopiota: pienoiskuva (oletuksena 150×150 px), keskikoko (leveys enintään 768 px) ja suuri koko (enintään 2560 px). Nämä arvot asetetaan media-asetuksissa ja ne koskevat kaikkia kuvatyyppejä. JPEG- ja PNG-tiedostoille tämä on kätevää: saat responsiiviset versiot eri laitteille.

GIF-tiedostot ovat erilaisia. Formaatti tallentaa ruutujen sarjan, ei yksittäistä otosta. Kun WordPress rajaa GIF:n vakiokokoihin, se poimii fyysisesti vain ensimmäisen ruudun. Loput katoavat. Tuloksena on staattinen kuva, joka näyttää animaation ensimmäisen ruudun kuvakaappaukselta.

Optimointilisäosat (ShortPixel, Imagify, Smush) pahentavat tilannetta. Ne pakkaavat kaiken summittaisesti eivätkä erota staattisia kuvia animaatiosta. Algoritmit ovat samat kuin JPEG:lle. Tulos on sama: ensimmäinen ruutu liikkeen sijaan.

Hyvä uutinen: voit ohittaa käsittelymekanismin koskematta functions.php-tiedostoon tai lisäämättä lisäosia.

1. Lataa GIF-tiedostot täydessä koossa

Nopein tapa on kertoa WordPressille, ettei se luo pienennettyjä kopioita tietystä tiedostosta. Kaksi klikkausta, kun lisäät kuvan artikkeliin.

Avaa artikkelin tai sivun muokkausnäkymä. Gutenberg-lohkomuokkaimessa luo "Kuva"-lohko ja lataa GIF "Lataa"-painikkeella. Klassisessa muokkaimessa klikkaa "Lisää media" ja vedä tiedosto latausikkunaan.

Katso heti latauksen jälkeen oikeanpuoleista asetuspaneelia. "Liitetiedoston näyttöasetukset" -osiosta löydät pudotusvalikon, jossa on koot. Oletuksena se on asetettu keskikokoon tai suureen kokoon. Valitse "Täysi koko".

Vasta sitten klikkaa "Lisää artikkeliin". WordPress ohittaa pienoiskuvien luomisen ja lisää alkuperäisen tiedoston kaikkine animaatioruutuineen. Gutenberg-muokkaimessa näet heti esikatselun: GIF toistuu suoraan hallintapaneelissa.

Miksi tämä toimii. Kun valitset täyden koon, WordPress käyttää lähdetiedostoa ilman käsittelyä. Järjestelmä ei suorita rajausta, joten ruutusarja säilyy ehjänä. GIF pysyy koskemattomana.

2. Poista optimointilisäosat käytöstä latauksen ajaksi

Pakkaulisäosat ovat toiseksi yleisin syy "rikkinäisiin" GIF-tiedostoihin WordPressin vakiotoiminnan jälkeen. Ne kaappaavat tiedoston lataushetkellä ja ajavat sen algoritmiensa läpi. Algoritmit eivät erota staattisia kuvia animaatiosta.

Ratkaisu on yksinkertainen: ota optimointilisäosat väliaikaisesti pois käytöstä ennen GIF:n lataamista. Mene kohtaan Lisäosat → Asennetut, etsi ShortPixel, Imagify, Smush, EWWW Image Optimizer ja klikkaa "Poista käytöstä" jokaisen kohdalla. Lataa GIF täydessä koossa (tapa 1). Ota sitten lisäosat uudelleen käyttöön.

Käytöstä poistamisen jälkeen tyhjennä sekä palvelimen että selaimen välimuisti. Välimuistilisäosat (WP Rocket, W3 Total Cache, LiteSpeed Cache) saattavat tallentaa vanhan version sivusta, jossa on rikkinäinen kuva.

Tärkeä huomio. Jotkin optimointilisäosat pakkaavat kuvia taustaprosessina, eivät lataushetkellä vaan minuutin tai kaksi myöhemmin. Jos GIF lakkasi liikkumasta ei heti vaan jonkin ajan kuluttua, tarkista lisäosan asetukset. Lähes kaikissa niistä on "Jätä GIF käsittelemättä" tai "Ohita animoidut kuvat" -vaihtoehto. Ota se käyttöön, niin sinun ei tarvitse poistaa koko lisäosaa käytöstä joka kerta.

Tähän liittyvä ongelma on HTTP-virhe kuvia ladattaessa. Jos näet virheilmoituksen latauksen jälkeen staattisen kuvan sijaan, ratkaisu on erillisessä artikkelissa: miten korjata WordPressin HTTP-virhe.

Miten pakata GIF ennen lataamista WordPressiin

Pakkaamaton GIF voi painaa 5, 10 tai jopa 20 megatavua. Tällaisen tiedoston lataaminen sivustollesi tarkoittaa taattua hidastumista mobiililaitteilla. Core Web Vitals reagoi raskaisiin kuviin LCP:n (Largest Contentful Paint) laskulla.

Optimaalinen lähestymistapa: pakkaa GIF ennen lataamista mediakirjastoon. Ilmaiset verkkotyökalut tekevät tämän parilla klikkauksella.

EZGIF on monitoimityökalu GIF-tiedostojen käsittelyyn. Pakkaamisen lisäksi sillä voi rajata, leikata, muuttaa animaation nopeutta ja muuntaa GIF:n WebP- ja MP4-muotoon. Lataat tiedoston tai liität suoran linkin, valitset pakkausmenetelmän (Lossy GIF antaa suurimman pienennysasteen) ja lataat tuloksen. Toimii suoraan selaimessa, ei vaadi rekisteröitymistä.

GIF Compressor on työkalu, jolla on yksi tarkoitus: pienentää GIF-tiedoston kokoa. Se tukee raahausta ja pudotusta sekä erälatauksia. Algoritmi optimoi väripaletin ja poistaa päällekkäiset pikselit ruutujen väliltä koskematta itse animaatioon.

Molemmat palvelut ovat ilmaisia. Kertakäyttöön tämä riittää. Jos työskentelet GIF-tiedostojen kanssa säännöllisesti, harkitse työpöytävaihtoehtoja: ImageOptim macOS:lle tai FileOptimizer Windowsille.

Mistä hankkia animoituja GIF-tiedostoja sivustollesi

Sinun ei tarvitse etsiä GIF-tiedostoja koko internetistä. Kaksi luotettavaa lähdettä, joissa tiedostot on lajiteltu kategorioittain ja valmiina lisättäväksi sivustollesi.

Giphy on suurin animoitujen kuvien tietokanta. Miljoonat GIF:t on jaettu kategorioihin: reaktioista ja meemeistä infografiikkaan ja abstraktiin animaatioon. Tiedostoja voi ladata suoraan tai upottaa upotuskoodilla. Lisenssi sallii käytön verkkosivustoilla, kunhan et myy itse tiedostoja eteenpäin.

Reaction GIFs on animoitujen reaktioiden luettelo: suosionosoituksia, yllätystä, naurua, paheksuntaa. Kätevä, kun haluat lisätä tekstiin emotionaalista painoa rikkomatta tyyliä. Tiedostot latautuvat yhdellä klikkauksella, ei vaadi rekisteröitymistä.

Molemmat lähteet antavat suodattaa GIF-tiedostoja koon ja keston mukaan, mikä on hyödyllistä, kun tarvitset kevyen tiedoston, joka ei hidasta sivua.

Video: miten lisätä animoitu GIF WordPressiin

Lyhyt englanninkielinen video-opas, joka näyttää koko prosessin latauksesta julkaisuun näyttötallenteena. Jos sinulla on vielä kysymyksiä muokkaimen käyttöliittymästä lukemisen jälkeen, video vastaa niihin visuaalisesti.

⁉️🤔 Usein kysytyt kysymykset

Voinko estää WordPressiä luomasta automaattisesti pienoiskuvia GIF-tiedostoista?

Kyllä, käyttämällä wp_handle_upload_prefilter-koukkua lapsiteemasi functions.php-tiedostossa. Koukku kaappaa tiedoston ennen käsittelyä ja tarkistaa MIME-tyypin: jos se on image/gif, järjestelmä ohittaa pienoiskuvan luomisen. Mutta kun pääteema päivittyy, functions.php-koodi katoaa. Joten joko työskentele lapsiteeman kautta tai siirrä koodi Code Snippets -lisäosaan, joka säilyy kaikkien päivitysten yli.

Miksi GIF ei animoidu sivustoni mobiiliversiossa?

Useimmiten ongelma on adaptiivinen lazy loading. Jotkin välimuistilisäosat (WP Rocket, LiteSpeed Cache) korvaavat GIF:t staattisella esikatselukuvalla mobiililaitteissa kaistan säästämiseksi. Tarkista lisäosan asetukset: etsi "Lazy Load for iframes and videos" tai "Replace GIF with placeholder" -vaihtoehto ja poista se käytöstä. Jos tämä ei auta, testaa GIF:ää Chromen kehittäjätyökaluilla mobiililaitteen emulointitilassa.

Mikä on suurin sallittu GIF-koko WordPressille?

Muodollista rajaa ei ole. WordPress hyväksyy jopa 100-200 Mt:n tiedostoja; yläraja riippuu palvelimen PHP-asetuksista (upload_max_filesize, post_max_size). Mutta suorituskyvyn kannalta pidä GIF:t 1-2 Mt:n sisällä. Kaikki tätä raskaampi hidastaa latautumista huomattavasti. Yli 5 sekunnin animaatioihin on parempi käyttää MP4:ää "Video"-lohkon kautta: se painaa 5-10 kertaa vähemmän samalla laadulla.

Voinko muuntaa GIF:n MP4:ksi WordPressiä varten?

Kyllä, ja pitkille animaatioille tämä on jopa suositeltavaa. EZGIF-palvelu muuntaa GIF:n MP4:ksi yhdellä klikkauksella. Lataa sitten MP4 mediakirjastoon ja lisää se "Video"-lohkon kautta Gutenbergissa. Etu: MP4 käyttää ruutujen välistä pakkausta, joten visuaalisesti samanlaatuinen tiedosto painaa paljon vähemmän. Ero on erityisen huomattava mobiililaitteilla.

Palautuuko animaatio, jos lataan GIF:n uudelleen lisäosien poistamisen jälkeen?

Kyllä, mutta pienellä vivahteella. Jos lataat tiedoston samalla nimellä, WordPress luo kopion, jossa on -1, -2-pääte ja niin edelleen. Vanha staattinen versio jää mediakirjastoon. Suosittelemme poistamaan vanhan tiedoston kohdasta Media → Kirjasto ja lataamaan sitten GIF:n uudelleen lisäosat poistettuna ja täysi koko valittuna. Animaatio palautuu täysin.

Mitä tehdä, jos GIF ei vieläkään animoidu

Kaksi kuvattua tapaa (täyden koon valitseminen ja optimointilisäosien poistaminen käytöstä) kattavat useimmat tapaukset. Mutta jos GIF ei vieläkään liiku, käy läpi tämä lyhyt tarkistuslista.

Tarkista itse tiedosto. Lataa GIF sivustolta ja avaa se paikallisesti selaimessa. Jos animaatiota ei näy siinäkään, ongelma on lähdetiedostossa, ei WordPressissä. Näin käy huonosti MP4:stä muunnetuille GIF:ille: muunnoksen aikana toistosilmukan lippu tai animaation metatiedot katoavat.

Tarkista teeman asetukset. Jotkin teemat, erityisesti vanhemmat premium-teemat, joissa on omia pakkauskehyksiä, kaappaavat kuvien lataukset sisäänrakennetuilla skripteillä. Vaihda väliaikaisesti oletusteemaan, kuten Twenty Twenty-Five, ja lataa GIF sinne. Jos se toimii, ota yhteyttä teeman tukeen.

Tarkista palvelimen kuvavälimuisti. CDN-palvelut (Cloudflare, BunnyCDN, StackPath) saattavat tallentaa välimuistiin tiedoston vanhan staattisen version. Kun olet ladannut GIF:n uudelleen, tyhjennä CDN-välimuisti palvelun hallintapaneelissa.

Vaihda formaattia. Jos mikään ei palauta animaatiota, muunna GIF MP4:ksi EZGIF-muuntimella ja lisää se videona. Käyttäjälle ei ole mitään eroa: animaatio toistuu, ja tiedosto painaa vähemmän.