Laadisid oma saidile üles GIF-i ja see on lihtsalt staatiline pilt? Tuttav olukord. WordPress töötleb vaikimisi iga pilti kolmes suuruses ja ühel neist läbimistest eemaldatakse animatsioon lihtsalt ära.

Probleem ei ole failis. Probleem on meediateegi tööpõhimõttes: süsteem loob pisipildi, keskmise ja suure versiooni ning GIF-ide puhul võtab see ainult esimese kaadri. Tulemuseks on liikumise asemel staatiline pilt. Saad selle paari minutiga korda teha, ilma pluginate või koodimuudatusteta.

Allpool on kaks toimivat meetodit animatsiooni taastamiseks. Lisaks tööriistad GIF-ide tihendamiseks enne üleslaadimist ja usaldusväärsed allikad valmis animeeritud failide jaoks.

💡 Kiire ülevaade:

• GIF-i sisestamisel vali manuse seadetes „Täissuurus". WordPress ei loo pisipilte ja säilitab kõik kaadrid.
• Keela üleslaadimise ajaks pildi optimeerimise pluginad. Need sunnivad faili tihendama ja tapavad animatsiooni.
• Tihenda GIF-id enne üleslaadimist, kasutades EZGIF-i või GIF Compressorit. Faili suurus väheneb ilma kvaliteedikaota.

Miks WordPress GIF-animatsiooni „katki teeb"

WordPress on loodud staatiliste piltide töötlemiseks. Iga kord, kui laed midagi meediateeki üles, loob süsteem automaatselt kolm koopiat: pisipilt (vaikimisi 150×150 px), keskmine suurus (kuni 768 px lai) ja suur (kuni 2560 px). Need väärtused on määratud meedia seadetes ja kehtivad kõikidele pilditüüpidele. JPEG ja PNG puhul on see mugav: saad erinevatele seadmetele sobivad versioonid.

GIF-id on teistsugused. Formaat salvestab kaadrite jada, mitte ühte hetktõmmist. Kui WordPress kärbib GIF-i standardsuurustesse, eraldab see füüsiliselt ainult esimese kaadri. Ülejäänud lähevad kaotsi. Tulemuseks on staatiline pilt, mis näeb välja nagu ekraanipilt animatsiooni esimesest kaadrist.

Optimeerimispluginad (ShortPixel, Imagify, Smush) teevad asja hullemaks. Need tihendavad kõike vahet tegemata ega erista staatilisi pilte animatsioonist. Algoritmid on samad mis JPEG puhul. Tulemus on sama: liikumise asemel esimene kaader.

Hea uudis: saad töötlusmehhanismist mööda minna, ilma et peaksid functions.php faili puutuma või pluginaid lisama.

1. Laadi GIF-id üles täissuuruses

Kiireim meetod on öelda WordPressile, et see ei looks konkreetse faili jaoks vähendatud koopiaid. Kaks klõpsu pildi postitusse sisestamisel.

Ava postituse või lehe redaktor. Gutenbergi plokiredaktoris loo „Pilt" plokk ja laadi GIF üles, kasutades nuppu „Laadi üles". Klassikalises redaktoris klõpsa „Lisa meediat" ja lohista fail üleslaadimise aknasse.

Kohe pärast üleslaadimist vaata parempoolset seadete paneeli. Plokis „Manuse kuvamise seaded" leia suurustega rippmenüü. Vaikimisi on selleks seatud Keskmine või Suur. Vali „Täissuurus".

Alles seejärel klõpsa „Lisa postitusse". WordPress jätab pisipiltide loomise vahele ja lisab originaali koos kõigi animatsioonikaadritega. Gutenbergi redaktoris näed kohe eelvaadet: GIF hakkab mängima otse administraatori paneelis.

Miks see toimib. Kui valid täissuuruse, kasutab WordPress lähtefaili ilma töötluseta. Süsteem ei käivita kärpimist, seega jääb kaadrite jada puutumata. GIF säilib muutmata kujul.

2. Keela üleslaadimise ajaks optimeerimispluginad

Tihendamispluginad on tavalise WordPressi töötluse järel teine levinuim „katkiste" GIF-ide põhjus. Need püüavad faili üleslaadimise hetkel kinni ja jooksutavad selle oma algoritmidest läbi. Algoritmid ei tee staatilistel piltidel ja animatsioonil vahet.

Lahendus on lihtne: deaktiveeri enne GIF-i üleslaadimist ajutiselt optimeerimispluginad. Mine Pluginad → Paigaldatud, leia ShortPixel, Imagify, Smush, EWWW Image Optimizer ja klõpsa igaühe puhul „Deaktiveeri". Laadi GIF üles täissuuruses (1. meetod). Seejärel aktiveeri pluginad uuesti.

Pärast deaktiveerimist tühjenda nii serveri kui ka brauseri vahemälu. Vahemälu pluginad (WP Rocket, W3 Total Cache, LiteSpeed Cache) võivad salvestada lehe vana versiooni koos katkise pildiga.

Oluline märkus. Mõned optimeerimispluginad tihendavad pilte taustaprotsessi kaudu, mitte üleslaadimise hetkel, vaid minut või kaks hiljem. Kui GIF lakkas animeerimast mitte kohe, vaid mõne aja pärast, kontrolli plugina seadeid. Peaaegu kõigil neil on valik „Välista GIF töötlusest" või „Jäta animeeritud pildid vahele". Luba see ja sa ei pea iga kord tervet pluginat välja lülitama.

Seotud probleem on HTTP viga piltide üleslaadimisel. Kui näed pärast üleslaadimist staatilise pildi asemel veateadet, leiad lahenduse eraldi artiklist: kuidas parandada WordPressi HTTP viga.

Kuidas tihendada GIF-i enne WordPressi üleslaadimist

Tihendamata GIF võib kaaluda 5, 10 või isegi 20 megabaiti. Sellise faili saidile üleslaadimine tähendab garanteeritud aeglust mobiilseadmetes. Core Web Vitals reageerib rasketele piltidele LCP (Largest Contentful Paint) langusega.

Optimaalne lähenemine: tihenda GIF enne meediateeki üleslaadimist. Tasuta veebitööriistad teevad seda paari klõpsuga.

EZGIF on kõik-ühes tööriist GIF-idega töötamiseks. Lisaks tihendamisele saab see kärpida, lõigata, muuta animatsiooni kiirust ning teisendada GIF-i WebP-ks ja MP4-ks. Laed faili üles või kleebid otselingi, valid tihendusmeetodi (Lossy GIF annab maksimaalse vähenduse) ja laed tulemuse alla. Töötab otse brauseris, registreerimist pole vaja.

GIF Compressor on ühe eesmärgiga tööriist: vähendada GIF-faili suurust. See toetab lohista ja lase ning pakett-üleslaadimist. Algoritm optimeerib värvipaletti ja eemaldab kaadrite vahelt korduvad pikslid, ilma animatsiooni ennast puudutamata.

Mõlemad teenused on tasuta. Ühekordseks kasutuseks on sellest piisavalt. Kui töötad GIF-idega regulaarselt, kaalu töölaua alternatiive: ImageOptim macOS-ile või FileOptimizer Windowsile.

Kust saada oma saidile animeeritud GIF-e

Sa ei pea GIF-e otsima tervest internetist. Kaks usaldusväärset allikat, kus failid on kategooriate kaupa sorteeritud ja saidile lisamiseks valmis.

Giphy on suurim animeeritud piltide andmebaas. Miljonid GIF-id on jagatud kategooriatesse: reaktsioonidest ja meemidest infograafika ja abstraktse animatsioonini. Faile saab otse alla laadida või manustada manustamiskoodi kaudu. Litsents lubab veebisaitidel kasutamist, kui sa faile endid edasi ei müü.

Reaction GIFs on animeeritud reaktsioonide kataloog: aplaus, üllatus, naer, pahakspanu. Mugav, kui on vaja lisada tekstile emotsionaalset rõhku stiili lõhkumata. Failid laaditakse alla ühe klõpsuga, registreerimist pole vaja.

Mõlemad allikad võimaldavad filtreerida GIF-e suuruse ja kestuse järgi, mis on kasulik, kui vajad kerget faili, mis lehte ei aeglusta.

Video: kuidas lisada animeeritud GIF WordPressi

Lühike ingliskeelne videoõpetus, mis näitab kogu protsessi üleslaadimisest avaldamiseni koos ekraanisalvestusega. Kui sul on pärast lugemist redaktori liidese kohta endiselt küsimusi, vastab video neile visuaalselt.

⁉️🤔 Korduma kippuvad küsimused

Kas ma saan panna WordPressi automaatselt GIF-idele pisipilte mitte looma?

Jah, läbi wp_handle_upload_prefilter konksu oma alamteema functions.php failis. Konks püüab faili enne töötlemist kinni ja kontrollib MIME tüüpi: kui see on image/gif, jätab süsteem pisipiltide loomise vahele. Aga kui peateema uueneb, läheb functions.php kood kaotsi. Seega tööta kas alamteema kaudu või liiguta kood Code Snippets pluginasse, mis jääb alles igasuguste uuenduste korral.

Miks GIF ei animeeri minu saidi mobiiliversioonis?

Kõige sagedamini on probleem adaptiivses laisas laadimises. Mõned vahemälu pluginad (WP Rocket, LiteSpeed Cache) asendavad GIF-id mobiilseadmetes ribalaiuse säästmiseks staatilise eelvaatega. Kontrolli plugina seadeid: leia valik „Laisk laadimine iframe'ide ja videote jaoks" või „Asenda GIF kohatäitega" ja keela see. Kui see ei aita, testi GIF-i Chrome'i arendajatööriistade abil mobiilseadme emulatsiooni režiimis.

Mis on WordPressi jaoks lubatud maksimaalne GIF-i suurus?

Formaalset piirangut pole. WordPress võtab vastu kuni 100-200 MB faile; ülempiir sõltub serveri PHP seadetest (upload_max_filesize, post_max_size). Kuid jõudluse seisukohast hoia GIF-id 1-2 MB piires. Kõik raskem aeglustab laadimist märgatavalt. Pikemate kui 5-sekundiliste animatsioonide puhul on parem kasutada MP4-t läbi „Video" ploki: see kaalub sama kvaliteedi juures 5-10 korda vähem.

Kas ma saan WordPressi jaoks GIF-i MP4-ks teisendada?

Jah, ja pikkade animatsioonide puhul on see isegi soovitatav. EZGIF teenus teisendab GIF-i MP4-ks ühe klõpsuga. Seejärel laadi MP4 meediateeki üles ja lisa see Gutenbergis „Video" ploki kaudu. Eelis: MP4 kasutab kaadritevahelist tihendust, nii et sama visuaalse kvaliteediga fail kaalub palju vähem. Erinevus on eriti märgatav mobiilseadmetes.

Kas animatsioon taastub, kui laen GIF-i pärast pluginate keelamist uuesti üles?

Jah, kuid ühe nüansiga. Kui laed üles sama nimega faili, loob WordPress koopia sufiksiga -1, -2 ja nii edasi. Vana staatiline versioon jääb meediateeki alles. Soovitame vana faili kustutada läbi Meedia → Teek, seejärel laadida GIF uuesti üles, kui pluginad on keelatud ja täissuurus valitud. Animatsioon taastub täielikult.

Mida teha, kui GIF ikka ei animeeri

Kaks kirjeldatud meetodit (täissuuruse valimine ja optimeerimispluginate keelamine) katavad enamiku juhtumeid. Aga kui GIF ikka ei liigu, mine see lühike kontrollnimekiri läbi.

Kontrolli faili ennast. Laadi GIF saidilt alla ja ava see lokaalselt brauseris. Kui ka seal animatsiooni pole, on probleem lähtefailis, mitte WordPressis. Seda juhtub halvasti MP4-st teisendatud GIF-idega: teisendamise käigus läheb kaduma kordamise lipp või animatsiooni metaandmed.

Kontrolli teema seadeid. Mõned teemad, eriti vanemad premium-teemad, millel on oma tihendusraamistikud, püüavad piltide üleslaadimise sisseehitatud skriptide kaudu kinni. Lülitu ajutiselt vaiketeemale, näiteks Twenty Twenty-Five, ja laadi GIF sinna üles. Kui see töötab, võta ühendust teema toega.

Kontrolli serveri pildivahemälu. CDN teenused (Cloudflare, BunnyCDN, StackPath) võivad vahemällu salvestada faili vana staatilise versiooni. Pärast GIF-i uuesti üleslaadimist tühjenda CDN-i vahemälu teenuse juhtpaneelil.

Vaheta formaati. Kui miski animatsiooni ei taasta, teisenda GIF EZGIF-i konverteriga MP4-ks ja lisa see videona. Kasutaja jaoks pole vahet: animatsioon mängib ja fail kaalub vähem.