Plugin WordPress essenziali per lavorare con GIF animate

Una volta limitate a banner pacchiani e lampeggianti con colori al neon e cartoni animati che galleggiavano attraverso pop-up e intestazioni di e-mail, le GIF sono cambiate in meglio. Con questo cambiamento, sono qui per restare, soprattutto per gli utenti e gli sviluppatori di WordPress. Progettati appositamente per il Web, i file GIF sono in genere di piccole dimensioni, il che li rende perfetti per aggiungere un tocco di movimento a un post. In effetti, le GIF animate possono dare un rinfrescante senso di vita a un articolo o argomento altrimenti statico.

Tuttavia, le GIF animate arrivano con la loro giusta dose di problemi e frustrazioni. Poiché le GIF animate sono composte da molti fotogrammi, possono passare rapidamente dall’essere file piccoli e discreti all’essere alcune delle grafiche più ingombranti sul tuo server. Le GIF sono note per rallentare i tempi di caricamento sulle pagine in cui vengono utilizzate, rendendole una barriera al traffico ripetuto e un punto problematico per i webmaster che comprendono l’importanza della velocità in un’epoca di impazienza.

Poi ci sono tutti i problemi specifici di WordPress. WordPress non è stato creato pensando alle GIF animate e la loro rinascita ha dato qualche grattacapo agli sviluppatori. Mentre WordPress generalmente ridimensiona automaticamente le immagini, questo processo interrompe le animazioni visualizzando solo il primo fotogramma. Inoltre, le GIF animate possono essere difficili da utilizzare come immagini in primo piano su WordPress. Possono interrompere i feed RSS, le campagne e-mail, le visualizzazioni in prima pagina e le miniature.

Nella maggior parte dei casi, i vantaggi superano ancora gli aspetti negativi. Tuttavia, per rendere le GIF una parte di successo della pubblicazione di WordPress, potrebbe essere necessario provare alcune nuove tecniche. Dai un’occhiata ad alcuni plug-in e tecniche indispensabili per lavorare con le GIF animate di seguito.

Di base: Rendi il tuo sito WordPress più veloce

Uno dei problemi principali nell’utilizzo delle GIF animate in WordPress è il problema del tempo di caricamento. Mantenere i tempi di caricamento il più rapidi possibile è essenziale per mantenere felici i tuoi visitatori e rendere il tuo sito web il più efficace possibile.

Secondo KISSmetrics, il tempo di caricamento è un importante fattore che contribuisce all’abbandono della pagina. Con un tempo di caricamento di soli 4 secondi, il tasso di abbandono della pagina sale al 25% e si avvicina al 50% man mano che il tempo si avvicina ai 10 secondi. Inoltre, un ritardo di 1 secondo nella risposta della pagina può comportare una riduzione del 7% delle conversioni.

Ciò significa che se un sito guadagna $ 100.000 al giorno – un sito di e-commerce o un altro rivenditore online – un ritardo di 1 seconda pagina potrebbe ammontare a $ 2,5 milioni di vendite perse ogni anno. Inoltre influisce direttamente sulla soddisfazione del cliente. Un ritardo di 1 secondo riduce la soddisfazione del cliente del 16%. I tuoi clienti vogliono che il tuo sito funzioni con poco o nessun ritardo.

Poiché le GIF possono essere utilizzate per aumentare la soddisfazione degli utenti, questo diventa ancora più problematico. Forse usi una GIF animata per illustrare come funziona un prodotto, come nel caso di questa trappola per animali qui sotto. La GIF è semplicemente il modo più rapido e semplice per spiegare l’impostazione e il meccanismo di rilascio della trappola.

Anche al di fuori dei siti di e-commerce, le GIF possono essere utilizzate per illustrare punti specifici, aggiungere umorismo a un argomento altrimenti arido o aumentare la sensazione di interazione dell’utente. Possono essere un ottimo modo per legare un concetto sconosciuto a uno familiare, usando la cultura pop come connessione. Ad esempio, i blog di WebpageFX per un pubblico di proprietari di attività commerciali, che possono o meno avere familiarità con termini come "meta parole chiave" e "ripieno di parole chiave". Queste pratiche sono obsolete e completamente inefficaci, ma invece di dirlo, hanno mostrato quanto sarebbe (in)efficace con una GIF animata.

Ovviamente le GIF sono ottime per aumentare la comprensione o semplicemente per far sorridere il lettore, ma questo crea un dilemma diretto. Nonostante i loro vantaggi intrinseci, questi file possono essere piuttosto grandi e i tempi di caricamento lenti possono portare a perdite di profitto e livelli di traffico inferiori nel tempo. Se le GIF sono importanti per te e per il tuo blog, è fondamentale eliminare i problemi che portano a ritardi e tempi di caricamento lenti. I plug-in di seguito possono aiutare a ridurre le dimensioni dei file e migliorare le esperienze di caricamento, senza sacrificare le animazioni o la loro qualità.

WP Smush.it

Ampiamente utilizzato e disponibile per gli sviluppatori a tutti i livelli, WP Smush.it è dotato delle funzionalità necessarie per ottimizzare le immagini in modo da ridurre i tempi di caricamento e soddisfare gli utenti finali. Il plug-in è progettato per:

• Ottimizza la compressione JPEG
• Converti alcune GIF statiche in PNG indicizzati
• Rimuovi i colori inutilizzati dalle immagini indicizzate
• Rimuovi i metadati non necessari dalle immagini
• Rendi le GIF animate più efficienti rimuovendo i pixel che rimangono gli stessi tra i fotogrammi

A differenza di altri plugin per la compressione delle immagini, che rompono le GIF animate allo stesso modo di WordPress stesso, WP Smush.it include specificamente tecniche di ottimizzazione per le GIF animate.

Le immagini che vengono aggiunte alle pagine dagli utenti back-end e dagli amministratori vengono automaticamente eseguite tramite il plug-in al momento del caricamento. Ciò significa che non è necessario modificare affatto il processo per avere un’esperienza utente migliorata. Non c’è niente di meglio di così! Gli utenti preoccupati per il modo in cui le immagini esistenti influiscono sui tempi di caricamento possono anche utilizzare il plug-in per scansionare i contenuti esistenti. WP Smush.it è semplice da installare e semplice da usare.

Qualsiasi plug-in di caricamento pigro

Un’altra opzione per ottimizzare i tempi di caricamento durante l’incorporazione di GIF consiste nell’utilizzare un plug-in di caricamento lento. Questi plugin sono progettati pensando agli utenti. Invece di attendere il caricamento di un’intera pagina, il che rallenta i tempi e porta alla frustrazione, i plug-in di caricamento lento caricano solo il contenuto attualmente visibile sullo schermo del visitatore. Il caricamento lento accelera i siti ricchi di immagini e può essere un modo efficace per mantenere felici i tuoi visitatori.

Esistono molte opzioni gratuite che semplificano il caricamento lento. Includono – ma non sono limitati a:

• Lazy Load – Lazy Load utilizza jQUery.sonar per caricare solo le immagini visibili. È stato scritto dal team VIP di WordPress e riceve costantemente valutazioni elevate dagli utenti.
• Image Lazy Load – Progettato come una versione leggera dell’originale Lazy Load, Image Lazy Load (Unveil.js) fornisce supporto per immagini ad alta risoluzione su dispositivi con display retina.
• BJ Lazy Load – BJ Lazy Load sostituisce le immagini dei post incorporate con segnaposto e carica il contenuto appena prima che diventi visibile agli utenti finali durante lo scorrimento.
• Rocket Lazy Load – Rocket Lazy Load è progettato come un piccolo script (meno di 2kb) che visualizza tutte le immagini della pagina: widget, incorporamenti, miniature, avatar e altro, durante lo scorrimento. È più noto per le sue piccole dimensioni.

Intermedio: installa alcuni comodi plug-in di animazione

Una volta che hai imparato i tempi di caricamento e la velocità, è il momento di passare a qualcosa di un po’ più avanzato, ma comunque fattibile per la maggior parte degli utenti generici di WordPress. Questi plug-in di animazione rendono le GIF esistenti più facili da usare e ancora più visibilmente attraenti. I comodi plug-in di animazione elencati di seguito migliorano la capacità di WordPress di visualizzare GIF.

Ridimensionamento GIF animate

Animated GIF Resize corregge la funzione di ridimensionamento automatico di WordPress in modo da poter ridimensionare le GIF animate senza interrompere l’animazione. Ciò elimina il problema frequente di WordPress che mostra il primo fotogramma di una GIF animata senza nient’altro.

Gifipress

Chiunque abbia lavorato spesso con GIF animate probabilmente conosce Giphy, un archivio di GIF animate che consente agli utenti di cercare per tag e trovare GIF pertinenti praticamente per qualsiasi argomento. Giphypress semplifica l’incorporamento dei file Giphy sul tuo sito: basta utilizzare il pulsante aggiunto dal plug-in per cercare l’immagine perfetta e fare clic su "Incorpora nel post".

Anteprima dell’animazione GIF

L’anteprima dell’animazione GIF cerca e trova qualsiasi punto in cui hai utilizzato una GIF animata sul tuo sito WordPress e li sostituisce con immagini di anteprima. Indipendentemente da dove ha avuto origine la GIF (funzionano entrambe le fonti di immagini in loco o fuori sede), il plug-in utilizza il primo fotogramma dell’animazione per generare un’anteprima. Quindi, ai visitatori del sito viene data la possibilità di fare clic su Riproduci per vedere il resto dell’animazione o di andare avanti senza visualizzare l’animazione.

Questo è un ottimo modo per ridurre i tempi di caricamento delle pagine del tuo sito, soprattutto se hai scelto di non utilizzare un plug-in di caricamento lento: invece di dover caricare ogni singolo fotogramma di ogni GIF animata sulla pagina, i visitatori devono solo caricare il primo fotogramma. Questo tipo di funzionalità viene utilizzato da siti Web di grandi dimensioni come BuzzFeed, in particolare per i visitatori mobili, che hanno più motivi per essere selettivi sui dati che scelgono di scaricare.

Avanzato: fai cose più belle con le GIF animate

Questi plugin e tecniche sono un po’ più difficili da configurare, ma sono piuttosto potenti. Continua a leggere per imparare come impostare una GIF come immagine in primo piano (qualcosa che stiamo vedendo sempre più su siti come BuzzFeed, Mashable e TechCrunch) e come trasformare una serie di file immagine separati in una sequenza animata direttamente sul tuo sito.

Impostazione di una GIF animata come immagine in primo piano

Per la maggior parte, i web designer e gli sviluppatori sono stati limitati, specialmente in WordPress, quando hanno tentato di impostare una GIF animata come immagine in primo piano. Poiché WordPress crea automaticamente un’immagine in miniatura dall’immagine in primo piano che fornisci, rompendo le GIF animate, può essere davvero difficile da realizzare. Ciò non significa che sia impossibile, tuttavia.

Un modo per aggirare il ritardo è inserire l’URL dell’immagine nella casella dell’immagine in primo piano, invece di scaricare e caricare un grafico dal tuo computer o da qualche parte sul web. Questo è incostante.

Un’altra opzione – forse meno che ideale, ma comunque praticabile per chi è esperto nello sviluppo di WordPress – è cambiare il formato dell’immagine in primo piano da "in primo piano" a "completo" all’interno del file di indice del tema. Ciò consente all’immagine in primo piano di estrarre gif animate originali e non distorte. Ciò richiede la volontà di eseguire un po’ di codifica e ha lo svantaggio che si applica a tutte le immagini in primo piano, quindi dovrai iniziare a ridimensionarle manualmente alla larghezza e all’altezza corrette.

Non deve essere complicato. Esistono infatti anche dei plugin per facilitare il processo. Autoset Featured Image e Automatic Featured Image Posts sono due plugin (scegline uno) che impostano automaticamente la prima immagine, indipendentemente dal suo formato, come immagine in primo piano. Ciò significa che se la tua prima immagine visualizzata all’interno di un post è una GIF animata, diventerà l’immagine in primo piano. Tuttavia, questa soluzione presenta altri aspetti negativi, vale a dire che dovrai sempre essere selettivo sull’immagine che metti più in alto nei tuoi post!

Immagini animate automaticamente

Il plug-in Auto Animate Image consente agli utenti di incorporare animazioni create da una serie di file separati, invece di una GIF animata standard. Può essere utilizzato per aggirare il massimo di 256 colori delle GIF animate, consentendo una sensazione più naturale e fluida. L’aspetto negativo è che è facile creare qualcosa che rallenti immensamente il tuo sito, quindi l’utilizzo di questo plug-in richiede un po’ di delicatezza.

Il plug-in non solo visualizza più immagini, altrimenti immagini non in movimento, in modo continuo, come un’animazione, ma supporta anche nomi di file arbitrari, senza standard richiesti. Ciò significa che GIF, PNG, JPEG, JPEG XR – e altre opzioni per foto HD – BMP, TIFF, WebP e SVG possono essere utilizzate in modo intercambiabile per creare qualcosa di nuovo e completamente originale. Le animazioni create con Auto Animate Image possono essere impostate su ritardo, ripetizione, riavvolgimento, pausa e persino vuoto, portando a più opzioni rispetto a una GIF standard. Elimina la necessità di scrivere JavaScript, ma può essere controllato con esso se lo si desidera. Il plug-in supporta la maggior parte dei browser, quindi non devi preoccuparti delle diverse esperienze dell’utente finale.

Si tratta di rendere felici i tuoi visitatori

Le GIF sono tornate. Molti sosterrebbero che sono tornati dalla morte. Tuttavia, invece delle vecchie animazioni pacchiane che erano, ora sono aspetti integrali di progetti web puliti, solidi ed efficaci. Tuttavia, quando si lavora in WordPress, possono essere più che problematici.

Inizia dall’inizio – al livello base. Prenditi il ​​tempo per esaminare i plug-in per aumentare la velocità di caricamento, trovare ciò con cui ti senti a tuo agio e testare come i tempi diminuiscono. Da lì, lavora su plug-in di animazione più avanzati. Quindi, diventa creativo. Rompi la routine delle GIF animate "standard" creando le tue animazioni da immagini statiche e assicurandoti che le tue GIF animate possano essere impostate come immagini in primo piano.

Una GIF animata non deve causare frustrazione, negatività o temute ore davanti allo schermo del computer, cercando di velocizzare il caricamento delle pagine o di visualizzarle correttamente. Sono pensati per essere divertenti e i plug-in e le opzioni descritti sopra li mantengono tali.