Olulised WordPressi pistikprogrammid animeeritud GIF-idega töötamiseks

Kunagi piirduti kleepuvate, vilkuvate neoonvärvidega bänneritega ning hüpikakende ja meilipäistes hõljuvate koomiksitega, on GIF-id muutunud paremaks. Selle muudatusega on nad siin, et jääda, eriti WordPressi kasutajate ja arendajate jaoks. Spetsiaalselt veebi jaoks loodud GIF-failid on tavaliselt väikese suurusega, mistõttu on need ideaalsed postitusele liikumise lisamiseks. Tegelikult võivad animeeritud GIF-id tuua värskendava elutunde muidu staatilisele artiklile või teemale.

Animeeritud GIF-idega kaasneb aga omajagu probleeme ja pettumusi. Kuna animeeritud GIF-id koosnevad paljudest kaadritest, võivad need kiiresti muutuda väikestest märkamatutest failidest teie serveri kõige kohmakamateks graafikateks. GIF-id on tuntud selle poolest, et aeglustavad laadimisaega lehtedel, kus neid kasutatakse, muutes need takistuseks korduvale liiklusele ja probleemipunktiks veebimeistritele, kes mõistavad kiiruse tähtsust kannatamatuse ajastul.

Siis on kõik WordPressiga seotud probleemid. WordPressi loomisel ei peetud silmas animeeritud GIF-e ja nende taassünd on tekitanud arendajatele peavalu. Kui WordPress muudab tavaliselt piltide suurust automaatselt, siis see protsess katkestab animatsioonid, kuvades ainult esimese kaadri. Lisaks võib animeeritud GIF-ide kasutamine WordPressis esiletoodud piltidena olla keeruline. Need võivad häirida RSS-vooge, meilikampaaniaid, esilehe kuvasid ja pisipilte.

Enamikul juhtudel kaaluvad eelised ikkagi üles negatiivsed. Kuid selleks, et muuta GIF-id oma WordPressi avaldamise edukaks osaks, peate võib-olla proovima mõnda uut tehnikat. Vaadake allpool mõningaid animeeritud GIF-idega töötamiseks vajalikke pistikprogramme ja tehnikaid.

Põhiline: muutke oma WordPressi sait kiiremaks

Üks peamisi probleeme animeeritud GIF-ide kasutamisel WordPressis on laadimisaja probleem. Laadimisaegade võimalikult kiire hoidmine on oluline, et teie külastajad oleksid rahul ja teie veebisait oleks võimalikult tõhus.

KISSmetricsi andmetel on laadimisaeg lehe hülgamise peamine tegur. Vaid 4-sekundilise laadimisajaga hüppab lehe hülgamise määr 25%-ni ja 50%-le lähemale, kui see aeg läheneb 10 sekundile. Lisaks võib 1-sekundiline viivitus lehe vastuses põhjustada konversioonide arvu vähenemist 7%.

See tähendab, et kui sait toob sisse 100 000 dollarit päevas – e-kaubanduse sait või muu võrgujaemüüja – võib 1-sekundiline lehe viivitus ulatuda igal aastal 2,5 miljoni dollarini müügikaotuseni. See mõjutab otseselt ka klientide rahulolu. 1-sekundiline viivitus vähendab klientide rahulolu 16%. Teie kliendid soovivad, et teie sait töötaks väikese või ilma viivituseta.

Kuna GIF-e saab kasutada kasutajate rahulolu suurendamiseks, muutub see veelgi problemaatilisemaks. Võib-olla kasutate toote toimimise illustreerimiseks animeeritud GIF-i, nagu see on alloleva loomalõksu puhul. GIF on lihtsalt kiireim ja lihtsaim viis lõksu seadistamise ja vabastamise mehhanismi selgitamiseks.

Isegi väljaspool e-kaubanduse saite saab GIF-e kasutada konkreetsete punktide illustreerimiseks, muidu kuivale teemale huumori lisamiseks või kasutaja suhtluse tunde suurendamiseks. Need võivad olla suurepärane viis siduda tundmatu kontseptsioon tuttavaga, kasutades seosena popkultuuri. Näiteks WebpageFX ajaveebid ettevõtete omanike vaatajaskonnale, kes ei pruugi olla tuttav selliste terminitega nagu "meta märksõnad" ja "märksõnade täitmine". Need tavad on aegunud ja täiesti ebatõhusad, kuid selle asemel, et seda öelda, näitasid nad, kui (eba)tõhus see animeeritud GIF-iga oleks.

Ilmselgelt on GIF-id suurepärased arusaamise suurendamiseks või lihtsalt naeratuse toomiseks lugeja näole, kuid see tekitab otsese dilemma. Vaatamata nende loomupärasele positiivsele küljele võivad need failid olla üsna suured ning aeglane laadimisaeg võib aja jooksul kaasa tuua kasumikahju ja madalama liiklustaseme. Kui GIF-id on teie ja teie ajaveebi jaoks olulised, on oluline kõrvaldada probleemid, mis põhjustavad viivitusi ja aeglaseid laadimisaegu. Allolevad pistikprogrammid võivad aidata failide suurust väiksemaks muuta ja laadimiskogemust paremaks muuta, ilma animatsioone või nende kvaliteeti ohverdamata.

WP Smush.it

Laialdaselt kasutatav ja kõigil oskustasemetel arendajatele kättesaadav WP Smush.it sisaldab funktsioone, mis on vajalikud piltide optimeerimiseks viisil, mis lühendab laadimisaega ja jätab lõppkasutajad rahule. Pistikprogramm on loodud selleks, et:

• Optimeerige JPEG-tihendust
• Teisendage mõned staatilised GIF-id indekseeritud PNG-deks
• Eemaldage indekseeritud piltidelt kasutamata värvid
• Eemaldage piltidelt mittevajalikud metaandmed
• Muutke animeeritud GIF-id tõhusamaks, eemaldades pikslid, mis jäävad kaadrites samaks

Erinevalt mõnest teisest pildi tihendamise pistikprogrammist, mis purustab animeeritud GIF-e samamoodi nagu WordPress ise, sisaldab WP Smush.it spetsiaalselt animeeritud GIF-ide optimeerimistehnikaid.

Pilte, mille lisavad lehtedele nii taustakasutajad kui ka administraatorid, käivitatakse üleslaadimisel automaatselt pistikprogrammi kaudu. See tähendab, et parema kasutuskogemuse saamiseks ei pea te oma protsessi üldse muutma. Sellest palju paremaks ei lähe! Kasutajad, kes on mures selle pärast, kuidas olemasolevad pildid laadimisaegu mõjutavad, saavad pistikprogrammi kasutada ka olemasoleva sisu skannimiseks. WP Smush.it on lihtne paigaldada ja seda on lihtne kasutada.

Iga laisa laadimise pistikprogramm

Teine võimalus laadimisaegade optimeerimiseks GIF-ide kaasamisel on kasutada laiska laadimise pistikprogrammi. Need pistikprogrammid on loodud kasutajaid silmas pidades. Selle asemel, et oodata terve lehe laadimist – mis aeglustab aega ja põhjustab frustratsiooni – laadivad laisk laadimise pistikprogrammid ainult selle sisu, mis on hetkel külastaja ekraanil nähtav. Laisk laadimine kiirendab suure kujutisega saite ja võib olla tõhus viis külastajate rõõmustamiseks.

On palju tasuta valikuid, mis muudavad laiska laadimise lihtsaks. Nende hulka kuuluvad, kuid mitte ainult:

• Lazy Load – Lazy Load kasutab jQUery.sonari ainult nähtavate piltide laadimiseks. Selle kirjutas WordPressi VIP-meeskond ja see saab kasutajatelt pidevalt kõrgeid reitinguid.
• Image Lazy Load – algse Lazy Loadi kerge versioonina loodud Image Lazy Load (Unveil.js) toetab kõrglahutusega kujutisi võrkkesta kuvariga seadmetes.
• BJ Lazy Load – BJ Lazy Load asendab manustatud postituse pildid kohahoidjatega ja laadib sisu vahetult enne, kui see kerimise ajal lõppkasutajatele nähtavaks muutub.
• Rocket Lazy Load – Rocket Lazy Load on loodud väikese (alla 2kb) skriptina, mis kuvab kerimise ajal kõik lehepildid – vidinad, manused, pisipildid, avatarid ja palju muud. See on enim tuntud oma väiksuse poolest.

Keskmine: installige mõned mugavad animatsioonipluginad

Kui olete laadimisaegade ja -kiiruse selgeks saanud, on aeg liikuda edasi millegi pisut arenenuma, kuid siiski enamiku tavaliste WordPressi kasutajate jaoks tehtava juurde. Need animatsioonipluginad muudavad olemasolevad GIF-id kasutajasõbralikumaks ja veelgi nähtavamalt atraktiivsemaks. Allpool loetletud mugavad animatsioonipluginad suurendavad WordPressi GIF-ide kuvamise võimalust.

Animeeritud GIF-i suuruse muutmine

Animeeritud GIF-i suuruse muutmine parandab WordPressi automaatse suuruse muutmise funktsiooni, nii et saate animeeritud GIF-ide suurust muuta ilma animatsiooni rikkumata. See kõrvaldab sageli ettetuleva probleemi, mille kohaselt WordPress kuvab animeeritud GIF-i esimest kaadrit ilma millegi muuta.

Giphypress

Kõik, kes on sageli animeeritud GIF-idega töötanud, tunnevad tõenäoliselt Giphyt, animeeritud GIF-arhiivi, mis võimaldab kasutajatel otsida sildi järgi ja leida peaaegu iga teema jaoks asjakohaseid GIF-e. Giphypress muudab Giphy-failide saidile manustamise lihtsaks – lihtsalt kasutage ideaalse pildi otsimiseks pistikprogrammi lisatud nuppu ja klõpsake nuppu Manusta postitusse.

GIF-animatsiooni eelvaade

GIF-animatsiooni eelvaade otsib ja leiab kõik kohad, kus olete oma WordPressi saidil animeeritud GIF-i kasutanud, ning asendab need eelvaatepiltidega. Olenemata sellest, kust GIF pärineb (töötavad nii kohapealsed kui ka välised pildiallikad), kasutab pistikprogramm eelvaate loomiseks animatsiooni esimest kaadrit. Seejärel antakse saidi külastajatele võimalus klõpsata Esita, et näha ülejäänud animatsiooni või liikuda edasi ilma animatsiooni vaatamata.

See on suurepärane viis saidi lehtede laadimisaegade lühendamiseks, eriti kui olete otsustanud mitte kasutada laiska laadimise pistikprogrammi – selle asemel, et laadida iga lehe animeeritud GIF-i iga kaader, peavad külastajad laadima ainult esimene kaader. Seda tüüpi funktsioonid kasutavad suured veebisaidid, nagu BuzzFeed, eriti mobiilikülastajate jaoks, kellel on rohkem põhjust valida, milliseid andmeid nad alla laadida.

Täpsemalt: tehke animeeritud GIF-idega lahedamaid asju

Neid pistikprogramme ja tehnikaid on pisut keerulisem seadistada, kuid need on üsna võimsad. Jätkake lugemist, et saada teada, kuidas määrata GIF-i esiletoodud pildiks (mida näeme üha enam sellistel saitidel nagu BuzzFeed, Mashable ja TechCrunch) ja kuidas muuta rida eraldi pildifaile animeeritud jadaks otse oma saidil.

Animeeritud GIF-i määramine esiletoodud pildiks

Enamasti on veebidisainerid ja arendajad olnud piiratud – eriti WordPressis –, kui nad üritavad määrata animeeritud GIF-i esiletoodud pildina. Kuna WordPress loob teie esitatud esiletõstetud pildist automaatselt pisipildi, purustades animeeritud GIF-id, võib selle väljavõtmine olla väga raske. See aga ei tähenda, et see võimatu oleks.

Üks võimalus ootel hoidmisest on sisestada pildi URL esiletoodud pildikasti, selle asemel, et arvutist või kusagilt veebist graafikat alla laadida ja üles laadida. See on tabanud või mööda.

Teine võimalus – võib-olla vähem kui ideaalne, kuid siiski toimiv neile, kes on hästi kursis WordPressi arendusega – on muuta esiletõstetud pildi vormingut teema registrifailis esitletud pildi vormingust täielikuks. See võimaldab esiletoodud pildil tõmmata originaalseid, moonutamata animeeritud GIF-e. See nõuab valmisolekut veidi kodeerida ja sellega kaasneb negatiivne külg, et see kehtib kõigi teie esiletoodud piltide kohta – nii et peate alustama nende suurust käsitsi õige laiuse ja kõrgusega.

See ei pea olema keeruline. Tegelikult on protsessi hõlbustamiseks ka pluginaid. Esiletõstetud pildi automaatne määramine ja Automaatsed esiletõstetud pildipostitused on kaks pistikprogrammi (valige üks), mis seavad esiletõstetud pildiks automaatselt esimese pildi – olenemata selle vormingust. See tähendab, et kui teie esimene postituses kuvatav pilt on animeeritud GIF, muutub see esiletoodud kujutiseks. Sellel lahendusel on aga ka teisi varjukülgi – nimelt peate alati olema valiv pildi suhtes, mille oma postitustes kõige kõrgemale asetate!

Automaatsed animeeritud pildid

Pildi automaatse animeerimise pistikprogramm võimaldab kasutajatel manustada standardse animeeritud GIF-i asemel animatsioone, mis on loodud mitmest eraldi failist. Seda saab kasutada animeeritud GIF-ide maksimaalsest 256 värvist mööda pääsemiseks, mis annab loomulikuma ja voolavama tunde. Negatiivne külg on see, et on lihtne luua midagi, mis teie saiti tohutult aeglustab, nii et selle pistikprogrammi kasutamine nõuab pisut peenust.

Pistikprogramm ei kuva mitte ainult mitut pilti – muidu mitteliikuvaid pilte – nagu animatsioon, vaid toetab ka suvalisi failinimesid, standardeid pole vaja. See tähendab, et GIF-i, PNG-i, JPEG-i, JPEG XR-i ja teisi HD-foto valikuid – BMP, TIFF, WebP ja SVG saab kasutada vaheldumisi, et luua midagi uut ja täiesti originaalset. Funktsiooni Auto Animate Image abil loodud animatsioone saab seadistada viivitamisele, kordusele, tagasikerimisele, pausile ja isegi tühjaks, mis annab rohkem valikuid kui tavaline GIF. See välistab vajaduse JavaScripti kirjutamise järele, kuid soovi korral saab sellega juhtida. Pistikprogramm toetab enamikku brausereid, nii et te ei pea muretsema erinevate lõppkasutajate kogemuste pärast.

Peame oma külastajatele rõõmu valmistama

GIF-id on tagasi. Paljud väidavad, et nad on surnuist tagasi tulnud. Kuid vanade, kleepuvate animatsioonide asemel on need nüüd puhta, kindla ja tõhusa veebikujunduse lahutamatu osa. Kuid WordPressis töötades võivad need olla rohkem kui pisut problemaatilised.

Alusta algusest – algtasemelt. Võtke aega, et uurida laadimiskiiruse suurendamiseks mõeldud pistikprogramme, leida endale sobiv ja testida, kuidas aeg väheneb. Sealt edasi töötage täpsemate animatsioonipluginatega. Seejärel olge loominguline. Väljuge "standardsest" animeeritud GIF-i rulast, luues staatilistest piltidest oma animatsioonid ja tagades, et teie animeeritud GIF-e saab määrata esiletoodud piltidena.

Animeeritud GIF ei pea tekitama frustratsiooni, negatiivsust ega hirmutavaid tunde arvutiekraani ees, püüdes muuta teie lehtede kiiremaks laadimiseks või õigeks kuvamiseks. Need on mõeldud lõbusaks ning ülaltoodud pistikprogrammid ja valikud hoiavad neid sellisena.