Viktige WordPress-plugins for å jobbe med animerte GIF-er

En gang begrenset til klebrige, blinkende bannere med neonfarger og tegneserier som fløt gjennom popup-vinduer og e-posthoder, har GIF-er endret seg til det bedre. Med denne endringen er de kommet for å bli, spesielt for WordPress-brukere og utviklere. Designet spesielt for nettet, er GIF-filer vanligvis små i størrelse, noe som gjør dem perfekte for å legge til et snev av bevegelse til et innlegg. Faktisk kan animerte GIF-er gi en forfriskende følelse av liv til en ellers statisk artikkel eller emne.

Imidlertid kommer animerte GIF-er med sin del av problemer og frustrasjoner. Siden animerte GIF-er består av mange rammer, kan de raskt gå fra å være små, diskrete filer til å være noe av det mest uhåndterlige grafikken på serveren din. GIF-er er kjent for å senke nedlastingstiden på sider der de brukes, noe som gjør dem til en barriere for gjentatt trafikk og et problempunkt for webmastere som forstår viktigheten av hastighet i en tid med utålmodighet.

Så er det alle WordPress-spesifikke problemer. WordPress ble ikke laget med animerte GIF-er i tankene, og deres gjenoppblomstring har gitt utviklere litt hodepine. Mens WordPress vanligvis endrer størrelse på bilder automatisk, bryter denne prosessen animasjoner ved å bare vise den første rammen. Dessuten kan animerte GIF-er være vanskelige å bruke som utvalgte bilder på WordPress. De kan forstyrre RSS-feeds, e-postkampanjer, forsidevisninger og miniatyrbilder.

I de fleste tilfeller oppveier fordelene fortsatt de negative. Men for å gjøre GIF-er til en vellykket del av WordPress-publiseringen din, må du kanskje prøve ut noen nye teknikker. Sjekk ut noen må-ha plugins og teknikker for å jobbe med animerte GIF-er nedenfor.

Grunnleggende: Gjør WordPress-nettstedet ditt raskere

Et av hovedproblemene ved å bruke animerte GIF-er i WordPress er lastetidsproblemet. Å holde lastetidene så raske som mulig er avgjørende for å holde de besøkende fornøyde og gjøre nettstedet ditt så effektivt som mulig.

I følge KISSmetrics er lastetid en viktig medvirkende årsak til at siden forlates. Med en innlastingstid på bare 4 sekunder, hopper sideavbruddsfrekvensen til 25 % og nærmere 50 % når den tiden nærmer seg 10 sekunder. I tillegg kan en forsinkelse på 1 sekund i sidesvar resultere i en reduksjon på 7 % i konverteringer.

Dette betyr at hvis et nettsted bringer inn $100 000 per dag – et e-handelssted eller annen nettforhandler – kan en sideforsinkelse på 1 sekund utgjøre $2,5 millioner i tapt salg hvert eneste år. Det påvirker også kundetilfredsheten direkte. En forsinkelse på 1 sekund reduserer kundetilfredsheten med 16 %. Kundene dine vil at nettstedet ditt skal fungere med liten eller ingen forsinkelse.

Fordi GIF-er kan brukes til å øke brukertilfredsheten, blir dette enda mer problematisk. Kanskje du bruker en animert GIF for å illustrere hvordan et produkt fungerer, slik tilfellet er med denne dyrefellen nedenfor. GIF-en er ganske enkelt den raskeste og enkleste måten å forklare innstillings- og utløsningsmekanismen til fellen.

Selv utenfor e-handelssider kan GIF-er brukes til å illustrere spesifikke poeng, legge til humor til et ellers tørt emne, eller øke følelsen av brukerinteraksjon. De kan være en fin måte å knytte et ukjent konsept til et kjent, ved å bruke popkultur som en forbindelse. For eksempel blogger WebpageFX for et publikum av bedriftseiere, som kanskje er kjent med termer som "metasøkeord" og "søkeordstopping". Disse fremgangsmåtene er utdaterte og fullstendig ineffektive – men i stedet for å si dette, viste de hvor (in)effektivt det ville være med en animert GIF.

Åpenbart er GIF-er gode for å øke forståelsen eller bare bringe et smil frem til leserens ansikt – men dette skaper et direkte dilemma. Til tross for deres iboende positive egenskaper, kan disse filene være ganske store, og langsomme lastetider kan føre til tap av fortjeneste og lavere trafikknivåer over tid. Hvis GIF-er er viktige for deg og bloggen din, er det avgjørende å eliminere problemer som fører til forsinkelser og langsomme lastetider. Pluginene nedenfor kan bidra til å gjøre filstørrelser mindre og lasteopplevelser bedre, uten å ofre animasjonene eller kvaliteten på dem.

WP Smush.it

WP Smush.it er mye brukt og tilgjengelig for utviklere på alle ferdighetsnivåer, og kommer med funksjonene som er nødvendige for å optimalisere bilder på en måte som reduserer lastetiden og holder sluttbrukerne fornøyde. Programtillegget er laget for å:

• Optimaliser JPEG-komprimering
• Konverter noen statiske GIF-er til indekserte PNG-er
• Fjern ubrukte farger fra indekserte bilder
• Fjern unødvendige metadata fra bilder
• Gjør animerte GIF-er mer effektive ved å fjerne piksler som forblir de samme på tvers av rammer

I motsetning til noen andre bildekomprimeringsplugins, som bryter animerte GIF-er på samme måte som WordPress selv gjør, inkluderer WP Smush.it spesifikt optimaliseringsteknikker for animerte GIF-er.

Bilder som legges til sider av både backend-brukere og administratorer kjøres automatisk gjennom plugin-en ved opplasting. Hva dette betyr er at du ikke trenger å endre prosessen i det hele tatt for å få en forbedret brukeropplevelse. Det blir ikke mye bedre enn det! Brukere som er bekymret for hvordan eksisterende bilder påvirker lastetidene, kan også bruke plugin-en til å skanne eksisterende innhold. WP Smush.it er enkel å installere og grei å bruke.

Enhver plugin for Lazy Loading

Et annet alternativ for å optimalisere lastetidene mens du inkorporerer GIF-er, er å bruke en plugin for lazy loading. Disse pluginene er designet med brukere i tankene. I stedet for å vente på at en hel side skal lastes – noe som senker tider og fører til frustrasjon – laster plugins for lat lasting kun innholdet som for øyeblikket er synlig på besøkendes skjerm. Lat lasting øker hastigheten på bildetunge nettsteder og kan være en effektiv måte å holde de besøkende fornøyde.

Det finnes mange gratis alternativer som gjør lat lasting enkelt. De inkluderer – men er ikke begrenset til:

• Lazy Load – Lazy Load bruker jQUery.sonar for å laste kun synlige bilder. Den ble skrevet av WordPress VIP-teamet og mottar konsekvent høye rangeringer fra brukere.
• Image Lazy Load – Designet som en lett versjon av den originale Lazy Load, gir Image Lazy Load (Unveil.js) støtte for høyoppløselige bilder på enheter med netthinneskjermer.
• BJ Lazy Load – BJ Lazy Load erstatter innebygde innleggsbilder med plassholdere og laster inn innhold rett før det blir synlig for sluttbrukere under rulling.
• Rocket Lazy Load – Rocket Lazy Load er utformet som et lite (mindre enn 2 kb) skript som viser alle sidebilder – widgets, innebygde bilder, miniatyrbilder, avatarer og mer, mens du ruller. Den er mest kjent for sin lille størrelse.

Middels: Installer noen praktiske animasjonsplugins

Når du har mestret lastetider og hastighet, er det på tide å gå over til noe litt mer avansert, men likevel gjennomførbart for de fleste generelle WordPress-brukere. Disse animasjonspluginene gjør eksisterende GIF-er mer brukervennlige og enda mer synlig attraktive. De praktiske animasjonspluginene som er oppført nedenfor forbedrer WordPresss evne til å vise GIF-er.

Animert GIF Endre størrelse

Animert GIF-endre størrelse fikser WordPress’ funksjon for automatisk endring av størrelse slik at du kan endre størrelse på animerte GIF-er uten å ødelegge animasjonen. Dette eliminerer det ofte oppståtte problemet med WordPress som viser den første rammen av en animert GIF uten noe annet.

Giphypress

Alle som ofte har jobbet med animerte GIF-er er sannsynligvis kjent med Giphy, et animert GIF-arkiv som lar brukere søke etter tag og finne GIF-er som er relevante for omtrent alle emner. Giphypress gjør det enkelt å bygge inn Giphy-filer på nettstedet ditt – bare bruk knappen lagt til av plugin-modulen for å søke etter det perfekte bildet og klikk på «Legg inn i innlegg».

Forhåndsvisning av GIF-animasjon

GIF Animation Preview søker ut og finner ethvert sted du har brukt en animert GIF på WordPress-siden din og erstatter dem med forhåndsvisningsbilder. Uansett hvor GIF-en oppsto (bildekilder på stedet eller utenfor stedet fungerer begge), bruker plugin-en den første animasjonsrammen for å generere en forhåndsvisning. Deretter får besøkende på nettstedet muligheten til å klikke på spill for å se resten av animasjonen eller gå videre uten å se animasjonen.

Dette er en fin måte å redusere lastetidene til sidene på nettstedet ditt, spesielt hvis du har valgt å ikke bruke en plugin for lazy loading – i stedet for å måtte laste inn hver enkelt ramme av hver animerte GIF på siden, trenger besøkende bare å laste den første rammen. Denne typen funksjonalitet brukes av store nettsteder som BuzzFeed, spesielt for mobile besøkende, som har mer grunn til å være selektive med hensyn til hvilke data de velger å laste ned.

Avansert: Gjør kulere ting med animerte GIF-er

Disse pluginene og teknikkene er litt vanskeligere å sette opp, men de er ganske kraftige. Fortsett å lese for å lære hvordan du angir en GIF som ditt fremhevede bilde (noe vi ser på nettsteder som BuzzFeed, Mashable og TechCrunch mer og mer) og hvordan du gjør en serie separate bildefiler til en animert sekvens rett på nettstedet ditt.

Angi en animert GIF som et fremhevet bilde

For det meste har nettdesignere og utviklere vært begrenset – spesielt i WordPress – når de forsøker å sette en animert GIF som et fremhevet bilde. Siden WordPress automatisk lager et miniatyrbilde fra det fremhevede bildet du gir, og bryter animerte GIF-er, kan det være veldig vanskelig å få til. Det betyr imidlertid ikke at det er umulig.

En måte å unngå ventetiden på er å sette inn nettadressen til bildet i den aktuelle bildeboksen, i stedet for å laste ned og laste opp en grafikk fra datamaskinen eller et sted på nettet. Dette er hit eller miss.

Et annet alternativ – kanskje mindre enn ideelt, men likevel brukbart for de som er godt bevandret i WordPress-utvikling – er å endre formatet på det fremhevede bildet fra «fremhevet» til «fullt» inne i temaets indeksfil. Dette lar det fremhevede bildet trekke originale, uforvrengte animerte gifs. Dette krever en vilje til å gjøre litt koding, og kommer med den ulempen at det gjelder alle de fremhevede bildene dine – så du må begynne å justere størrelsen på dem manuelt til riktig bredde og høyde.

Det trenger ikke være komplisert. Faktisk er det også plugins for å lette prosessen. Autosett utvalgt bilde og automatiske utvalgte bildeinnlegg er to plugins (velg én) som automatisk setter det første bildet – uavhengig av formatet – som det fremhevede bildet. Dette betyr at hvis det første bildet ditt som vises i et innlegg er en animert GIF, vil det bli det fremhevede bildet. Denne løsningen har imidlertid andre ulemper – nemlig at du alltid må være kresen når det gjelder bildet du plasserer høyest i innleggene dine!

Auto animerte bilder

Auto Animate Image- pluginet lar brukere legge inn animasjoner laget fra en serie separate filer, i stedet for en standard animert GIF. Den kan brukes til å komme rundt maksimalt 256 farger for animerte GIF-er, noe som gir en mer naturlig, flytende følelse. På minussiden er det enkelt å lage noe som bremser nettstedet ditt enormt, så bruk av denne plugin krever litt finesse.

Programtillegget viser ikke bare flere bilder – ellers ikke-bevegelige bilder – kontinuerlig, som en animasjon, den støtter også vilkårlige filnavn, ingen standard nødvendig. Dette betyr at GIF, PNG, JPEG, JPEG XR – og andre HD Photo-alternativer – BMP, TIFF, WebP og SVG kan alle brukes om hverandre for å skape noe nytt og helt originalt. Animasjoner opprettet med Auto Animate Image kan settes på forsinkelse, gjenta, spole tilbake, pause og til og med blanke, noe som fører til flere alternativer enn en standard GIF. Det eliminerer behovet for å skrive JavaScript, men kan likevel kontrolleres med det om ønskelig. Programtillegget støtter de fleste nettlesere, så du trenger ikke å bekymre deg for forskjellige sluttbrukeropplevelser.

Det handler om å gjøre dine besøkende fornøyde

GIF-er er tilbake. Mange vil hevde at de har kommet tilbake fra de døde. Men i stedet for de gamle, klebrige animasjonene de pleide å være, er de nå integrerte aspekter av rene, solide, effektive webdesign. Men når du jobber i WordPress, kan de være mer enn litt problematiske.

Start på begynnelsen – på det grunnleggende nivået. Ta deg tid til å se på plugins for å øke lastehastigheten, finne det du er komfortabel med og teste hvordan tidene går ned. Derfra kan du jobbe med mer avanserte animasjonsplugins. Så, vær kreativ. Bryt ut av "standard" animerte GIF-spor ved å lage dine egne animasjoner av statiske bilder og sikre at de animerte GIF-ene dine kan angis som fremhevede bilder.

En animert GIF trenger ikke å forårsake frustrasjon, negativitet eller fryktede timer foran dataskjermen, og prøve å få sidene dine til å lastes raskere eller vises akkurat. De er ment å være morsomme, og pluginene og alternativene som er skissert ovenfor, holder dem slik.