Tärkeät WordPress-laajennukset animoitujen GIF-tiedostojen kanssa työskentelemiseen

Kun GIF-kuvat rajoittuivat tahmeisiin, vilkkuviin neonväreisiin bannereihin ja ponnahdusikkunoissa ja sähköpostien otsikoissa leijuviin sarjakuviin, ne ovat muuttuneet parempaan suuntaan. Tämän muutoksen myötä ne ovat tulleet jäädäkseen, erityisesti WordPress-käyttäjille ja -kehittäjille. Erityisesti verkkoa varten suunnitellut GIF-tiedostot ovat tyypillisesti pieniä, joten ne ovat täydellisiä lisäämään ripaus liikettä viestiin. Itse asiassa animoidut GIF-kuvat voivat tuoda virkistävän elämäntunteen muuten staattiseen artikkeliin tai aiheeseen.

Animoidut GIF-kuvat sisältävät kuitenkin kohtuullisen osan ongelmista ja turhautumisesta. Koska animoidut GIF-tiedostot koostuvat useista kehyksistä, ne voivat nopeasti muuttua pienistä, huomaamattomista tiedostoista palvelimesi raskaimpiin grafiikoihin. GIF-tiedostot tunnetaan hidastavista latausaikoja sivuilla, joilla niitä käytetään, mikä tekee niistä esteen toistuvalle liikenteelle ja ongelmakohdan verkkovastaaville, jotka ymmärtävät nopeuden merkityksen kärsimättömyyden aikakaudella.

Sitten on kaikki WordPress-kohtaiset ongelmat. WordPressiä ei luotu animoituja GIF-tiedostoja ajatellen, ja niiden uusiutuminen on aiheuttanut kehittäjille päänsärkyä. Vaikka WordPress yleensä muuttaa kuvien kokoa automaattisesti, tämä prosessi katkaisee animaatiot näyttämällä vain ensimmäisen kehyksen. Lisäksi animoituja GIF-kuvia voi olla vaikea käyttää suositeltuina kuvina WordPressissä. Ne voivat häiritä RSS-syötteitä, sähköpostikampanjoita, etusivun näyttöjä ja pikkukuvia.

Useimmissa tapauksissa hyödyt ovat edelleen negatiivisia. Jotta GIF-tiedostoista tulisi onnistunut osa WordPress-julkaisuasi, saatat joutua kokeilemaan uusia tekniikoita. Katso alta joitain välttämättömiä laajennuksia ja tekniikoita animoitujen GIF-tiedostojen kanssa työskentelyyn.

Perus: Tee WordPress-sivustostasi nopeampi

Yksi suurimmista ongelmista animoitujen GIF-tiedostojen käytössä WordPressissä on latausaikaongelma. Latausaikojen pitäminen mahdollisimman nopeina on välttämätöntä, jotta kävijät ovat tyytyväisiä ja sivustosi tulee mahdollisimman tehokkaaksi.

KISSmetricsin mukaan latausaika on merkittävä tekijä sivun hylkäämiseen. Vain 4 sekunnin latausajalla sivun poistumisprosentti hyppää 25 prosenttiin ja lähemmäs 50 prosenttiin, kun aika lähestyy 10 sekuntia. Lisäksi yhden sekunnin viive sivun vastauksessa voi vähentää tuloksia 7 %.

Tämä tarkoittaa, että jos sivusto tuo 100 000 dollaria päivässä – verkkokauppasivusto tai muu online-jälleenmyyjä – yhden sekunnin sivun viive voi olla 2,5 miljoonan dollarin menetetty myynti joka vuosi. Se vaikuttaa myös suoraan asiakastyytyväisyyteen. Yhden sekunnin viive vähentää asiakastyytyväisyyttä 16 %. Asiakkaasi haluavat sivustosi toimivan nopeasti tai ilman viivettä.

Koska GIF-tiedostoja voidaan käyttää käyttäjien tyytyväisyyden lisäämiseen, tästä tulee vieläkin ongelmallisempaa. Ehkä käytät animoitua GIF-tiedostoa havainnollistamaan tuotteen toimintaa, kuten alla olevassa eläinansassa. GIF on yksinkertaisesti nopein ja helpoin tapa selittää ansan asetus- ja vapautusmekanismi.

GIF-kuvia voidaan käyttää myös verkkokauppasivustojen ulkopuolella havainnollistamaan tiettyjä kohtia, lisäämään huumoria muuten kuivaan aiheeseen tai lisäämään käyttäjän vuorovaikutuksen tunnetta. Ne voivat olla loistava tapa yhdistää tuntematon käsite tuttuun käyttämällä popkulttuuria yhteytenä. Esimerkiksi WebpageFX-blogeja yritysten omistajille, jotka eivät ehkä tunne termejä, kuten "meta-avainsanat" ja "avainsanojen täyttäminen". Nämä käytännöt ovat vanhentuneita ja täysin tehottomia – mutta sen sijaan, että sanoisivat tämän, ne osoittivat, kuinka (epä)tehokasta se olisi animoidulla GIF:llä.

On selvää, että GIF-tiedostot ovat hyviä lisäämään ymmärtämistä tai yksinkertaisesti tuomaan hymyn lukijan kasvoille – mutta tämä luo suoran pulman. Huolimatta niiden luontaisista myönteisistä puolista, nämä tiedostot voivat olla melko suuria, ja hitaat latausajat voivat johtaa voiton menetyksiin ja liikenteen vähenemiseen ajan myötä. Jos GIF-tiedostot ovat tärkeitä sinulle ja blogillesi, on tärkeää poistaa ongelmat, jotka johtavat viiveisiin ja hitaisiin latausaikoihin. Alla olevat laajennukset voivat auttaa pienentämään tiedostokokoja ja parantamaan latauskokemusta animaatioistasi tai niiden laadusta tinkimättä.

WP Smush.it

Laajalti käytetty ja kaikkien taitotasojen kehittäjien saatavilla oleva WP Smush.it sisältää ominaisuuksia, jotka ovat tarpeen kuvien optimoimiseksi tavalla, joka lyhentää latausaikoja ja pitää loppukäyttäjät tyytyväisinä. Plugin on suunniteltu:

• Optimoi JPEG-pakkaus
• Muunna jotkin staattiset GIF-tiedostot indeksoiduiksi PNG-tiedostoiksi
• Poista käyttämättömät värit indeksoiduista kuvista
• Poista tarpeettomat metatiedot kuvista
• Tee animoiduista GIF-kuvista tehokkaampia poistamalla pikseleitä, jotka pysyvät samoina kaikissa kehyksissä

Toisin kuin jotkut muut kuvanpakkauslaajennukset, jotka rikkovat animoituja GIF-tiedostoja samalla tavalla kuin WordPress itse, WP Smush.it sisältää erityisesti optimointitekniikoita animoituja GIF-tiedostoja varten.

Sekä taustakäyttäjien että järjestelmänvalvojien sivuille lisäämät kuvat ajetaan automaattisesti laajennuksen kautta latauksen yhteydessä. Tämä tarkoittaa, että sinun ei tarvitse muuttaa prosessiasi ollenkaan saadaksesi paremman käyttökokemuksen. Siitä ei paljoa parempaa tule! Käyttäjät, jotka ovat huolissaan siitä, miten olemassa olevat kuvat vaikuttavat latausaikoihin, voivat myös käyttää laajennusta olemassa olevan sisällön skannaamiseen. WP Smush.it on helppo asentaa ja helppokäyttöinen.

Mikä tahansa Lazy Loading Plugin

Toinen vaihtoehto latausaikojen optimointiin GIF-tiedostojen sisällyttämisessä on käyttää laiskalatauslaajennusta. Nämä laajennukset on suunniteltu käyttäjiä ajatellen. Sen sijaan, että odottaisivat koko sivun latautumista – mikä hidastaa aikaa ja johtaa turhautumiseen – laiskoja latausliitännäisiä ladataan vain vierailijan näytöllä tällä hetkellä näkyvän sisällön. Laiska lataus nopeuttaa paljon kuvia sisältäviä sivustoja ja voi olla tehokas tapa pitää kävijät tyytyväisinä.

On olemassa monia ilmaisia ​​vaihtoehtoja, jotka tekevät laiskasta lataamisesta helppoa. Niihin kuuluvat – mutta ei rajoittuen:

• Lazy Load – Lazy Load käyttää jQUery.sonaria vain näkyvien kuvien lataamiseen. Sen on kirjoittanut WordPress VIP -tiimi, ja se saa jatkuvasti korkeat sijoitukset käyttäjiltä.
• Image Lazy Load – Alkuperäisen Lazy Loadin kevyeksi versioksi suunniteltu Image Lazy Load (Unveil.js) tukee korkearesoluutioisia kuvia laitteissa, joissa on verkkokalvonäyttö.
• BJ Lazy Load – BJ Lazy Load korvaa upotetut viestikuvat paikkamerkeillä ja lataa sisällön juuri ennen kuin se näkyy loppukäyttäjille vierityksen aikana.
• Rocket Lazy Load – Rocket Lazy Load on suunniteltu pieneksi (alle 2 kt) skriptiksi, joka näyttää kaikki sivukuvat – widgetit, upotukset, pikkukuvat, avatarit ja paljon muuta vierityksen aikana. Se tunnetaan parhaiten pienestä koostaan.

Keskitaso: Asenna joitain käteviä animaatiolaajennuksia

Kun olet oppinut latausajat ja -nopeuden, on aika siirtyä johonkin hieman edistyneempään, mutta silti useimmille tavallisille WordPress-käyttäjille toteutettavissa olevaan. Nämä animaatiolaajennukset tekevät olemassa olevista GIF-tiedostoista käyttäjäystävällisempiä ja entistä näkyvämmin houkuttelevampia. Alla luetellut kätevät animaatiolaajennukset parantavat WordPressin kykyä näyttää GIF-tiedostoja.

Animoitu GIF-koon muuttaminen

Animated GIF Resize korjaa WordPressin automaattisen koonmuutosominaisuuden, jotta voit muuttaa animoitujen GIF-tiedostojen kokoa animaatiota rikkomatta. Tämä poistaa usein kohtaaman ongelman, jossa WordPress näyttää animoidun GIF-kuvan ensimmäisen kehyksen ilman mitään muuta.

Giphypress

Jokainen, joka on usein työskennellyt animoitujen GIF-tiedostojen kanssa, tuntee todennäköisesti Giphyn, animoidun GIF-arkiston, jonka avulla käyttäjät voivat etsiä tunnisteen perusteella ja löytää GIF-tiedostoja, jotka liittyvät melkein mihin tahansa aiheeseen. Giphypress tekee Giphy-tiedostojen upottamisesta sivustollesi helppoa – käytä vain laajennuksen lisäämää painiketta etsiäksesi täydellisen kuvan ja napsauta "Upota viestiin".

GIF-animaatio esikatselu

GIF-animaatioesikatselu etsii ja löytää paikat, joissa olet käyttänyt animoitua GIF-tiedostoa WordPress-sivustollasi, ja korvaa ne esikatselukuvilla. Riippumatta siitä, mistä GIF on peräisin (sekä paikan päällä että ulkopuoliset kuvalähteet toimivat), laajennus käyttää animaation ensimmäistä kehystä esikatselun luomiseen. Tämän jälkeen sivuston vierailijoille annetaan mahdollisuus napsauttaa toistoa nähdäkseen animaation loppuosan tai siirtyä eteenpäin katsomatta animaatiota.

Tämä on loistava tapa lyhentää sivustosi sivujen latausaikoja, varsinkin jos olet päättänyt olla käyttämättä laiskalatauslaajennusta – sen sijaan, että joutuisi lataamaan jokaista sivun animoitua GIF-tiedostoa, vierailijoiden tarvitsee vain ladata ensimmäinen kehys. Tällaisia ​​toimintoja käyttävät suuret verkkosivustot, kuten BuzzFeed, erityisesti mobiilikävijöille, joilla on enemmän syytä olla valikoiva sen suhteen, mitä tietoja he haluavat ladata.

Edistynyt: Tee siistimpiä asioita animoiduilla GIF-kuvilla

Näitä laajennuksia ja tekniikoita on hieman vaikeampi asentaa, mutta ne ovat melko tehokkaita. Jatka lukemista, jotta opit asettamaan GIF-kuvan esittelykuvaksi (jota näemme BuzzFeedissä, Mashablessa ja TechCrunchin kaltaisissa sivustoissa yhä enemmän) ja kuinka voit muuttaa sarjan erillisiä kuvatiedostoja animoiduksi sekvenssiksi suoraan sivustollasi.

Animoidun GIF:n asettaminen suositeltavaksi kuvaksi

Suurimmaksi osaksi web-suunnittelijat ja -kehittäjät ovat olleet rajoitettuja – erityisesti WordPressissä – yrittäessään asettaa animoitua GIF:ää esittelykuvaksi. Koska WordPress luo automaattisesti pikkukuvan antamastasi esittelykuvasta ja rikkoo animoituja GIF-tiedostoja, sen saaminen voi olla todella vaikeaa. Se ei kuitenkaan tarkoita, että se olisi mahdotonta.

Yksi tapa kiertää lykkäys on lisätä kuvan URL-osoite suositeltuun kuvaruutuun sen sijaan, että lataat ja lähetät grafiikkaa tietokoneeltasi tai jostain verkosta. Tämä on osuma tai miss.

Toinen – ehkä vähemmän kuin ihanteellinen, mutta silti toimiva WordPress-kehityksen perehtyneille – vaihtoehto on muuttaa esitellyn kuvan muoto "suositetusta" muotoon "täysi" teeman hakemistotiedoston sisällä. Näin esitelty kuva voi vetää alkuperäisiä, vääristymättömiä animoituja gifiä. Tämä vaatii halukkuutta hieman koodata, ja sen haittapuolena on, että se koskee kaikkia esiteltyjä kuviasi – joten sinun on aloitettava niiden manuaalinen kokoaminen oikeaan leveyteen ja korkeuteen.

Sen ei tarvitse olla monimutkaista. Itse asiassa on olemassa myös laajennuksia prosessin helpottamiseksi. Autoset Featured Image ja Automatic Featured Image Posts ovat kaksi laajennusta (valitse yksi), jotka asettavat ensimmäisen kuvan automaattisesti – sen muodosta riippumatta – esittelykuvaksi. Tämä tarkoittaa, että jos ensimmäinen viestissä näkyvä kuvasi on animoitu GIF, siitä tulee suositeltu kuva. Tällä ratkaisulla on kuitenkin muita haittoja – nimittäin, että sinun on aina oltava valinnainen sen kuvan suhteen, jonka asetat viesteissäsi korkeimmalle!

Automaattiset animoidut kuvat

Auto Animate Image -laajennuksen avulla käyttäjät voivat upottaa animaatioita, jotka on luotu sarjasta erillisistä tiedostoista tavallisen animoidun GIF-muodon sijaan. Sitä voidaan käyttää animoitujen GIF-kuvien 256 värien enimmäismäärän kiertämiseen, mikä mahdollistaa luonnollisemman ja virtaavan tunnelman. Haittapuolena on, että on helppo luoda jotain, joka hidastaa sivustoasi valtavasti, joten tämän laajennuksen käyttäminen vaatii hienostuneisuutta.

Laajennus ei ainoastaan ​​näytä useita kuvia – muuten ei-liikkuvia kuvia – jatkuvasti, kuten animaatio, se tukee myös mielivaltaisia ​​tiedostonimiä, standardia ei vaadita. Tämä tarkoittaa, että GIF-, PNG-, JPEG-, JPEG XR- ja muita HD Photo -vaihtoehtoja – BMP, TIFF, WebP ja SVG voidaan käyttää vaihtokelpoisesti luomaan jotain uutta ja täysin omaperäistä. Automaattisen animoidun kuvan avulla luodut animaatiot voidaan asettaa viiveelle, toistolle, kelaukselle taaksepäin, taukotilaan ja jopa tyhjäksi, mikä tarjoaa enemmän vaihtoehtoja kuin tavallinen GIF. Se eliminoi JavaScriptin kirjoittamisen tarpeen, mutta sitä voidaan haluttaessa ohjata sillä. Laajennus tukee useimpia selaimia, joten sinun ei tarvitse huolehtia erilaisista loppukäyttäjien kokemuksista.

Kyse on vierailijoidesi ilahduttamisesta

GIFit ovat palanneet. Monet väittävät, että he ovat palanneet kuolleista. Kuitenkin vanhojen, tahmeiden animaatioiden sijaan ne ovat nyt olennainen osa puhdasta, vankkaa ja tehokasta verkkosuunnittelua. WordPressissä työskennellessä ne voivat kuitenkin olla enemmän kuin vähän ongelmallisia.

Aloita alusta – perustasolta. Käytä aikaa tarkastellaksesi latausnopeutta lisääviä laajennuksia, löydä itsellesi sopiva ja testaa, kuinka ajat lyhenevät. Sen jälkeen voit työstää edistyneempiä animaatiolaajennuksia. Ole sitten luova. Päästä eroon "normaalista" animoidusta GIF-rutiinista luomalla omia animaatioita staattisista kuvista ja varmistamalla, että animoidut GIF-kuvasi voidaan asettaa esittelykuviksi.

Animoidun GIF:n ei tarvitse aiheuttaa turhautumista, negatiivisuutta tai pelättyjä tunteja tietokoneen näytön edessä yrittäessään saada sivusi latautumaan nopeammin tai näyttämään oikein. Niiden on tarkoitus olla hauskoja, ja yllä kuvatut laajennukset ja vaihtoehdot pitävät ne sellaisina.