Come migliorare le immagini in WordPress

Come migliorare le immagini in WordPress

È passato molto tempo da quando le immagini erano qualcosa di troppo grande per essere caricate su Internet. Oggi i siti Web non possono esistere senza di loro. Anche se la velocità di Internet è notevolmente aumentata nel corso degli anni, è fondamentale che tu ti prenda cura delle immagini sul tuo blog.

Solo perché è facile caricare immagini sul tuo sito, ciò non significa che dovresti farlo senza alcuna preparazione. Le immagini non ottimizzate, infatti, possono danneggiare il tuo sito in molti modi; dall’influenzare il modo in cui i visitatori ti pensano alla velocità del tuo sito web e alle classifiche SEO. Se ancora non ci hai pensato, siamo qui per mostrarti diversi modi per migliorare le immagini in WordPress.

In questa guida, stiamo per mostrarti:

  • Come ottimizzare le immagini per WordPress per velocizzare il tuo sito e migliorare la SEO
  • Cambia il modo in cui WordPress comprime le immagini JPEG
  • I plugin di ottimizzazione delle immagini più popolari per WordPress
  • Aggiungi un caricamento lento per i tuoi video e immagini
  • Visualizza immagini prima e dopo in modo attraente
  • Come creare immagini interattive: disegnare, aggiungere descrizioni e collegamenti
  • Come rigenerare dimensioni dell’immagine aggiuntive
  • Rimuovi gli attributi dell’immagine larghezza e altezza con jQuery
  • Come creare dimensioni di immagine personalizzate in Media Uploader
  • Crea uno screenshot automatico di qualsiasi sito Web e pubblicalo come immagine nel tuo post

Come ottimizzare le immagini per WordPress in modo da velocizzare il tuo sito e migliorare la SEO

Perché dovresti ottimizzare le immagini per WordPress? Se fai uno sforzo, puoi aspettarti quanto segue:

  • Sito più veloce
  • SEO migliore
  • Backup più piccoli
  • Minore utilizzo della larghezza di banda
  • Utenti più felici

Dovresti anche sapere che ci sono diverse fasi in cui puoi ottimizzare le immagini. Puoi occuparti delle immagini anche prima di caricarle su un blog o puoi farlo dopo il caricamento.

Prova rapidamente le immagini sul tuo sito

Prima di iniziare a lavorare sull’ottimizzazione, puoi verificare rapidamente la velocità e le prestazioni del tuo sito. Utilizzando uno qualsiasi degli strumenti dell’elenco, imparerai rapidamente in che forma sono le immagini sul tuo sito.

Ci piace usare  GTmetrix  che ti mostrerà anche le immagini esatte che causano un caricamento più lento del tuo sito.

Ottimizza le immagini per WordPress prima del caricamento

Durante il blog, la maggior parte delle persone non prende tutte le misure necessarie per ottimizzare le proprie immagini. Di solito, le persone scattavano semplicemente una foto dalla fotocamera o dallo smartphone, ne scaricavano una da Internet o ne creavano una utilizzando il software del computer.

Non pensano ai formati, alle dimensioni dell’immagine né ai nomi dei file. Se l’immagine sembra buona, presumono solo che sia pronta per Internet. Se non controlli le tue immagini, stai costruendo un disastro.

Ridimensiona le immagini

Ridimensiona le immagini

Non caricare immagini sul tuo sito Web WordPress prima di controllare la larghezza e l’altezza di ogni immagine. Se ad esempio visualizzi immagini a un massimo di 700 px, non è davvero necessario caricare un’immagine più ampia. Se lo fai, avrai un file più grande che renderà il tuo sito più lento, mentre l’output sarà lo stesso. WordPress creerà dimensioni aggiuntive, ma questa non è la scusa per non preparare le immagini prima del caricamento.

Il ridimensionamento delle immagini è semplice e veloce. Ci sono molti strumenti gratuiti come Microsoft Paint che ti aiuteranno in questo. Puoi persino trovare strumenti online gratuiti per ridimensionare le immagini come  Easy Resize .

Le dimensioni dell’immagine varieranno da tema a tema. Se non sei sicuro di quale dovresti usare, dai un’occhiata più da vicino al tuo tema WordPress e ispeziona le immagini, cerca la documentazione o chiedi supporto.

Cambia la qualità

Dopo aver cambiato le dimensioni, dovresti considerare di cambiare la qualità delle immagini. A seconda del software, esistono diversi modi per modificare la qualità delle immagini. Ad esempio, Photoshop sempre popolare ti consente di salvare immagini per il web. Questa opzione ti permetterà di salvare le immagini con una qualità inferiore, ma saranno ottimizzate per il tuo sito.

Inoltre, se scegli di salvare un’immagine come JPEG, Photoshop ti chiederà di scegliere il livello di qualità. In questo caso, abbassare la qualità da 12 a solo 8 ridurrà drasticamente le dimensioni di un’immagine, mentre la differenza di qualità non sarà così grande.

Se non stai ancora utilizzando alcun software per modificare la qualità delle tue immagini, puoi provare gratuitamente il piccolo PNG online   . Carica una foto e vedi che differenza può fare.

Scegli il formato giusto

Anche dopo i cambiamenti di dimensioni e qualità, dovresti considerare di cambiare il formato. Per cominciare, semplicemente selezionando il formato giusto, puoi togliere qualche chilobyte da un’immagine, se non di più.

Formati di immagine

La regola generale è molto semplice. Se hai una fotografia, rendila JPEG. Se hai un logo , un’immagine vettoriale o una grafica generata da computer molto semplice, scegli PNG. Se hai un’immagine davvero piccola senza sfumature o vuoi mostrare una semplice animazione come quella mostrata sopra, puoi usare GIF. In genere, le immagini PNG saranno piuttosto più grandi di quelle JPEG e puoi trarre vantaggio dalla modifica del formato.

In molti casi, riformare le immagini non farà significative differenze di qualità, mentre ci si può aspettare la differenza di dimensioni. La prossima volta prima di caricare una foto PNG, provala e prova a salvarla come JPEG per vedere la differenza. Per una spiegazione più dettagliata, controlla la  differenza tra PNG, JPEG, GIF e SVG .

Abbi cura dei nomi dei file

Mentre il nome del file può sembrare poco importante, in realtà è qualcosa di cui dovresti essere molto consapevole. Il nome del tuo file immagine contiene informazioni preziose per il SEO. Se vuoi che altri possano trovare la tua immagine su Google e altri motori di ricerca, dovresti dargli un nome proprio.

Ti consigliamo di nominare le immagini senza usare spazi. Non dimenticare di includere parole chiave se desideri che la pagina e l’immagine siano classificate. Ad esempio, se stai caricando una foto di Ferrari California, il nome del file dovrebbe essere “ferrari-california.jpg”. Se usi un plug-in SEO per WordPress, sai già che controlla i tag alt per le parole chiave. Sì, è davvero così importante avere il nome dell’immagine corretto.

Ottimizza le immagini per WordPress dopo il caricamento

Dopo aver preparato le immagini sul tuo computer, puoi procedere con il caricamento. Speriamo che le tue immagini siano della giusta dimensione e qualità. Ti sei assicurato che il formato e il nome file siano corretti. Dopo il caricamento, WordPress ti chiederà ulteriori informazioni. Non saltare le meta informazioni; inserisci i dettagli delle tue immagini in modo da poterle organizzare facilmente e prepararti al SEO.

Titolo, descrizione, testo alternativo e didascalia

Mentre ti occupi dei tecnicismi, non dovresti dimenticare il SEO. Aggiungi sempre il titolo e la descrizione ai tuoi contenuti multimediali. Questo ti aiuterà con la gestione dei media di WordPress e funzionerà anche per una migliore SEO. Inoltre, non dimenticare il tag alt che verrà visualizzato per i visitatori che non riescono a vedere correttamente la tua immagine. Non solo questo sarà utile per i tuoi utenti, ma ti aiuterà anche con SEO. La tua pagina si posizionerà meglio e gli utenti saranno in grado di trovare più facilmente le tue nuove immagini.

Sebbene non siano sempre necessari i sottotitoli, assicurati di aggiungerne uno per le immagini che richiedono ulteriori spiegazioni (ad esempio schermate).

Modifica le immagini con WordPress

Se ti rendi conto che un’immagine necessita ancora di ulteriori modifiche, dovresti sapere che WordPress ti consente di farlo anche dopo aver caricato il file. Modifica la rotazione, ritaglia e ridimensiona le immagini che hai già caricato. Puoi persino modificare solo una miniatura o tutte le altre dimensioni. L’editor nativo di WordPress è molto semplice, ma puoi risparmiare di tanto in tanto.

Rigenera tutte le anteprime

La maggior parte delle tecniche precedenti ti aiuterà con i nuovi file di immagine che stai ancora caricando. Ma cosa succede se hai centinaia se non migliaia di file già caricati sul tuo sito WordPress? Non ti preoccupare; puoi comunque ottimizzare quelle immagini e modificarne le dimensioni.

Per una soluzione rapida, potresti essere interessato a un plug-in Rigenerate Miniature gratuito che è stato utilizzato da oltre un milione di utenti. Se vuoi un maggiore controllo sulle immagini, dovresti dare un’occhiata ad alcuni dei migliori plugin di WordPress per l’ottimizzazione delle immagini che ti mostreremo nelle seguenti righe di questo articolo.

Come rigenerare dimensioni dell'immagine aggiuntive

Usa i plugin di WordPress

Naturalmente, ci sono dozzine di plugin di WordPress che possono aiutarti a ottimizzare le immagini sul tuo sito. Scorri verso il basso per vedere i migliori plugin di WordPress per l’ottimizzazione delle immagini.

Carica immagini quando necessario

A volte, la qualità delle immagini sarà molto più importante della loro dimensione. Questo è vero soprattutto per i fotografi che vogliono che le loro foto siano di prim’ordine. Non possono rischiare di ridurre le dimensioni né la qualità dei file. Tuttavia, ciò non significa che dovresti dimenticare l’ottimizzazione. Per ottimizzare le immagini per WordPress in questo caso, dovresti considerare il caricamento lento.

Il caricamento lento è una tecnica che carica le immagini solo quando gli utenti ne hanno bisogno (scorrere fino a esse). Ad esempio, se hai caricato venti fotografie di alta qualità in un articolo, rallenterebbero enormemente il tuo sito. Ma se carichi le immagini in modo pigro, l’articolo sarebbe velocissimo e le foto verranno caricate solo quando necessario, nel momento in cui un utente arriva da loro.

Avere immagini reattive

Sebbene la maggior parte dei temi WordPress sia reattiva, ciò non significa necessariamente che anche le tue immagini siano reattive. Poiché non desideri caricare un’immagine di grandi dimensioni su uno schermo piccolo, dovrai  registrare dimensioni dell’immagine aggiuntive  per il tuo sito. Se il tuo tema non utilizza immagini reattive, prendi in considerazione l’assunzione di un professionista per il lavoro: non è così facile come potrebbe sembrare.

Ottimizza le immagini per i social media

Se vuoi assicurarti che le tue immagini appaiano bene sui social media, dovrai fare un passo in più e ottimizzare i meta tag e il markup dello schema.

Se stai utilizzando un plug-in SEO come Yoast, non dimenticare di controllare le impostazioni. Ad esempio, Yoast ti consentirà di impostare alcune cose relative ai social media. Quindi, vai a SEO -> Social e inserisci le informazioni su Facebook, Twitter, Google+ e Pinterest.

Se vuoi di più e vuoi ottimizzare le immagini per altri siti web di social media, dai un’occhiata a  WPSSO – Meta tag accurati + Schema Markup per l’ottimizzazione della condivisione sociale e plugin SEO .

Cambia il modo in cui WordPress comprime le immagini JPEG

Se stai caricando un sacco di immagini JPEG sul tuo sito Web WordPress, potresti aver notato che stanno perdendo la loro qualità originale. Se ti sei chiesto se è colpa di WordPress, ora avrai la tua risposta – sì, lo è!

Una volta caricata un’immagine in formato JPEG, WordPress cambia automaticamente la compressione e decide di perdere la qualità dell’immagine. Per essere più specifici, WP utilizza una compressione del 90% sui tuoi JPGE. È fantastico se le tue immagini sono lì solo per essere utilizzate come miniature dei post o per essere mostrate in un post, ma se stai caricando le tue foto, vuoi che siano le migliori possibile, giusto?

Fortunatamente, avrai bisogno di una sola riga di codice per cambiarlo.

Ferma la compressione delle immagini JPEG:

Se non vuoi che le tue immagini JPEG vengano compresse, copia e incolla semplicemente il seguente codice nel tuo file Functions.php:

add_filter ('jpeg_quality', function ($ arg) {return 100;});

Non dimenticare di salvare le modifiche e sei pronto per caricare nuove immagini.

D’altra parte, le immagini potrebbero non essere un grosso problema per te. Quindi potresti volere che siano ancora più compressi e ti faccia risparmiare tempo nel caricamento del tuo sito. Se si modifica l’ultimo numero in quella riga di codice, si modificherà la qualità delle immagini appena caricate.

Comprimi ancora di più le immagini JPEG:

Più basso è il numero, più immagini verranno compresse. Ad esempio, per comprimere ancora di più quei file JPEG, avrai bisogno di questo codice:

add_filter ('jpeg_quality', function ($ arg) {return 80;});

Non dimenticare; il livello di compressione predefinito è 90.

Importante : ciò influirà solo sulle immagini caricate dopo aver incollato il codice in Functions.php. Per modificare le dimensioni e la qualità delle immagini che hai già nella libreria, avrai bisogno di un plugin. Scopri come  rigenerare dimensioni dell’immagine aggiuntive .

I plugin di ottimizzazione delle immagini più popolari per WordPress

All’inizio di questo articolo, abbiamo parlato di come ottimizzare le immagini per WordPress in modo da velocizzare il tuo sito e migliorare la SEO. Come avresti potuto vedere, ci sono alcuni metodi diversi che puoi usare. È importante occuparsi delle immagini anche prima di caricarle sul tuo blog. Ma quando le foto sono già presenti sul sito, potrebbe essere impossibile riaprimizzare ogni singola immagine separatamente e quindi caricarle di nuovo.

Non ti preoccupare; nessuno si aspetta che tu lo faccia in primo luogo. Resta con noi nei seguenti minuti mentre stiamo per mostrarti i plugin di ottimizzazione delle immagini più popolari per WordPress.

Per ottimizzare le immagini, dovrai solo selezionare il plug-in dall’elenco. Dovrai configurarlo e scegliere le cose che il plugin farà per te. Successivamente, sarai in grado di rilassare e delegare il lavoro al plug-in di tua scelta, mentre puoi iniziare a organizzare i tuoi file multimediali.

I seguenti plugin ti aiuteranno a comprimere le immagini su qualsiasi sito WordPress che hai. Faranno caricare il sito più velocemente e alla fine ti aiuteranno a migliorare la SEO.

WP Smush

PREZZO: gratuito

Con oltre 700.000 installazioni attive, WP Smush deve essere uno dei migliori plugin di ottimizzazione delle immagini per WordPress. Può ottimizzare rapidamente le immagini utilizzando diverse tecniche di compressione. La cosa grandiosa di comprimere le immagini con WP Smush è che le immagini non perderanno in termini di qualità. Non ci credi? Prova il plugin.

Quando abbiamo parlato della preparazione delle immagini per WordPress, abbiamo affermato che il ridimensionamento è una parte cruciale del processo di ottimizzazione. Con questo plugin, non dovrai preoccupartene poiché WP Smush ti consente di impostare le dimensioni massime. Dopo averlo fatto, tutte le immagini più grandi verranno ridimensionate automaticamente prima di aggiungerle alla libreria.

Questo fantastico plugin può funzionare con file JPEG, GIF e PNG. Funziona con tutte le tue directory, si occupa automaticamente degli allegati e funziona anche su più siti. Puoi operare manualmente su ogni immagine o modificarne una cinquantina in blocco. Se vuoi risultati ancora migliori e più opzioni, dai un’occhiata a WP Smush PRO.

EWWW Image Optimizer

PREZZO: gratuito

Dietro il nome divertente, c’è uno dei plugin di ottimizzazione delle immagini più popolari per WordPress. Proprio come quello menzionato in precedenza, EWWW Image Optimizer può comprimere le tue immagini senza comprometterne la qualità. Quando pensi che il plugin possa velocizzare il tuo sito in pochi secondi, sarai già sulla buona strada per scaricarlo. Una volta che lo farai, potrai ottimizzare le immagini in blocco e gallerie come GRAND FlaGallery, NextCellent e NextGEN avranno anche le loro pagine Bulk Optimize.

Tutte le immagini che usano la classe WP_Image_Editor in WordPress saranno automaticamente ottimizzate , mentre puoi fare manualmente la magia su tutte le altre. Ci piace che tu possa selezionare le cartelle che desideri ottimizzare. Per maggiori dettagli a riguardo e quali plug-in utilizzano la classe, si prega di aprire la pagina ufficiale  EWWW Image Optimizer  sul repository WordPress.

Comprimi immagini JPEG e PNG

PREZZO: gratuito

Immagini minuscole compresse

Se il simpatico panda con il logo di WordPress non ti fa venir voglia di saperne di più su questo plugin, non sappiamo cosa farà. E se il panda sembra familiare, è perché è lo stesso che ti aiuta a comprimere le immagini sul sito Web TinyPNG. Sì, sembra che l’animale sia più versatile di quanto pensassimo inizialmente. Ma concentriamoci sul plugin.

Se vai con questo plugin, Panda ottimizzerà automaticamente le tue immagini. Ogni volta che ne carichi uno nuovo, il plug-in subentra e fa il suo lavoro. Tuttavia, puoi ottimizzare le singole immagini o farlo in blocco semplicemente accedendo alla libreria multimediale.

Comprimi immagini JPEG e PNG supporta persino PNG animati, funziona perfettamente su un sito multiplo , è compatibile con WooComerce e non avrà problemi con WP Offload S3.

La cosa grandiosa del plugin è che ti permette di impostare gli attributi di larghezza e altezza massimi per tutte le immagini. Se ti sei preoccupato di cosa faranno i metadati, non preoccuparti; il panda manterrà intatte tutte le informazioni.

Non ci sono limiti di dimensione del file, puoi impostare un widget per dashboard e funziona anche con l’app mobile WordPress. Perché tutto ciò, Comprimi immagini JPEG e PNG ha più di 100.000 installazioni attive e merita un posto nella lista dei migliori plugin di ottimizzazione delle immagini per WordPress.

Imsanity

PREZZO: gratuito

Imsanity

Sebbene l’immagine di copertina di questo plugin possa spaventarti, prenditi un secondo e guarda tutte le funzionalità di Imsanity. Oh, anche il nome del plugin sembra folle, giusto? Una volta che sei d’accordo con il nome del plugin, vedrai che ha molto da offrire.

Imsanity può ridimensionare automaticamente le immagini, consente di impostare le dimensioni massime e presenta anche un’opzione di ridimensionamento in blocco. Questo è importante se hai già centinaia di foto sul tuo blog che necessitano di ottimizzazione.

Questo plugin gratuito è un’ottima opzione se non si vuole lottare molto con le impostazioni del plugin. Tutto ciò che serve è installare e attivare Imsanity, impostare alcune opzioni e puoi dimenticartene; gestirà la propria strada verso l’ottimizzazione delle immagini.

Abbiamo adorato l’opzione che ti consente di convertire le immagini BMP in JPG. Nel caso abbiate molti file BMP caricati per errore qualche tempo fa, questo sarà un vero toccasana.

ShortPixel Image Optimizer

PREZZO: gratuito

ShortPixel Image Optimizer

Con oltre 30.000 installazioni attive, ShortPixel Image è ancora uno dei plugin di ottimizzazione delle immagini più popolari per WordPress. Il plug-in è ricco di funzionalità e sarà un must per i siti che hanno molte immagini da ottimizzare.

ShortPixel Image Optimizer non solo ottimizza i documenti JPG, PNG, GIF e PDF per te, ma ti permetterà anche di convertire qualsiasi immagine JPEG, PNG o GIF in WebP . Il plug-in funziona bene con altri plug-in della galleria e non importa se il tuo sito utilizza HTTP o HTTPS. Ti permetterà di rimuovere i dati EXIF ​​dalle immagini (qualcosa che i fotografi adoreranno avere).

Il plugin riconosce le immagini che ha già ottimizzato, quindi le salterà quando necessario. Puoi consentire o vietare l’ottimizzazione automatica e fare molto, molto di più con questo fantastico plugin. Controlla la pagina ufficiale sul repository per vedere tutte le funzionalità.

Optimus – WordPress Image Optimizer

PREZZO: gratuito

Optimus

Proprio come il plugin menzionato in precedenza, Optimus ottimizzerà le tue immagini per WordPress e lo farà senza compromettere la qualità delle tue immagini. Puoi lasciare che il plugin risolva automaticamente le cose, oppure puoi disattivare l’opzione e ottimizzare le immagini solo quando necessario.

Optimus funziona su più siti , non è estraneo ai siti di e-commerce di WordPress ed è completamente ottimizzato per le app mobili di WordPress e Windows Live Writer. Accelererà il tuo sito senza che tu debba toccare una riga di codice. Il plugin offre molto di più, ma dovrai optare per la versione premium. Per saperne di più, vai alla pagina ufficiale sul repository dei plugin di WordPress.

Aggiungi caricamento lento per i tuoi video e immagini in WordPress

Una volta che inizi ad aggiungere molto materiale video e di immagini sul tuo sito Web, è ovvio che inizierà a caricarsi più lentamente. Indipendentemente da dove provengano, i video e le immagini di grandi dimensioni agiranno come un pesante peso sul tuo sito e faranno aspettare ai visitatori molto più tempo del necessario per caricare tutto il contenuto. Con WordPress, questo non dovrebbe essere un grosso problema ed ecco come risolvere facilmente la situazione.

Se conosci PHP, c’è un ottimo articolo sull’aggiunta del caricamento lento delle immagini e dello scroll infinito scritto dai nostri colleghi su  Elegant Themes .

In caso contrario, nelle prossime righe menzioneremo alcuni dei plugin di caricamento lento più popolari che renderanno il tuo sito più veloce . E non dovrai nemmeno fare molto altro che installare un plug-in e configurarlo in pochi passaggi.

Carico pigro per i video

PREZZO: gratuito

Carico pigro per i video

Se hai molti video Youtube e Vimeo, dovresti prendere in considerazione l’installazione di questo plugin. Una volta impostato, il plug-in inserirà un’immagine nel tuo video e per questo motivo il tuo sito web verrà caricato molto più velocemente. Una volta che un visitatore scorre un video, questa immagine verrà mostrata con un pulsante “play” su di essa. Dopo un clic, il video inizierà il caricamento e la riproduzione. Una semplice demo può essere visualizzata sul sito dello sviluppatore.

WP YouTube Lyte

PREZZO: gratuito

WP YouTube Lyte

Questo plugin farà il suo lavoro in modo rapido e semplice. Dopo averlo installato, aggiungi un link al tuo video di Youtube o usa un shortcode per aggiungerne uno. Puoi scegliere tra l’aggiunta di un normale video, playlist o solo audio dal video selezionato. Successivamente, i tuoi video di Youtube avranno un’immagine su di esso che consentirà il caricamento lento. Basta fare clic sull’immagine per avviare il video o l’audio.
Guarda una demo sul sito dello sviluppatore.

a3 Carico pigro

PREZZO: gratuito
DEMO 1
DEMO 2

a3 Carico pigro

Questo è dedicato al tuo sito mobile. Se hai molte immagini e / o video che vuoi mostrare ai tuoi visitatori su dispositivi mobili, dovresti dare un’occhiata a a3 Lazy Load. Ti consentirà di aggiungere un caricamento lento alle tue immagini e ai tuoi video e il plug-in ti consentirà persino di scegliere gli effetti di transizione che appariranno agli utenti mentre scorrono il contenuto che si sta caricando.

Nell’area di amministrazione, puoi facilmente attivare e disattivare il contenuto che desideri caricare lentamente. Per quelli attivi, il contenuto verrà caricato solo nel momento in cui un visitatore scorre verso quella parte del contenuto.
C’è una demo ben mostrata che presenta 1000 immagini – ognuna viene caricata solo una volta che la scorri. Dato che questo plugin carica anche i video, c’è una demo video che puoi vedere facendo clic sul link sopra.

BJ Lazy Load

PREZZO: gratuito

BJ Lazy Load

Se non hai bisogno di supporto per i video e vuoi solo caricare le tue immagini in modo pigro, dai un’occhiata a questo plugin WP. Una volta installato e configurato, sostituirà le immagini, le anteprime, le immagini Gravatar e persino gli iframe con un segnaposto. Simile a un plug-in menzionato in precedenza, caricherà il contenuto solo una volta che l’utente lo accede.

Che si tratti di immagini o video che desideri caricare in modo pigro, uno dei plugin sopra menzionati ti aiuterà in pochi secondi. Tutti sono gratuiti, quindi non ci sono scuse per non provare almeno uno dei plugin e vedere quanto peso ci vorrà per le spalle. Naturalmente, ci sono molti altri plugin con la stessa funzione e sei libero di navigare e provare tutti.

Visualizza immagini prima e dopo in modo attraente

Siamo sicuri di aver già visto molti esempi di immagini prima / dopo. Non conosco te, ma la prima cosa che abbiamo in mente quando vediamo la frase “prima e dopo” è il programma di allenamento fitness in cui le persone mostrano il proprio corpo prima e dopo un programma di allenamento.

Se ci pensate, la maggior parte dei siti Web utilizza un approccio semplice per mostrare le differenze: prendono entrambe le immagini e le posizionano una accanto all’altra o addirittura una sopra l’altra. Se desideri lo stesso risultato, non leggerai questo articolo perché sai già come farlo.

E se ti dicessimo che esiste un modo visivamente sbalorditivo per risolvere questo problema prima / dopo ed è solo a portata di mano? Bene, c’è e dopo una configurazione, loderai gli sviluppatori perché il risultato finale è davvero fantastico.

Venti Venti

PREZZO: gratuito

Venti Venti

Twenty Twenty è il nome di questo fantastico plugin che puoi scaricare gratuitamente nel repository dei plugin di WordPress.

Il plugin ti permetterà di posizionare un’immagine sopra l’altra e ti permetterà di giocare con un cursore in modo da poter nascondere / rivelare l’immagine. Per favore, guarda la demo e vedrai di cosa stiamo parlando.

OK, ora quando sei agganciato a questo piccolo plugin, vediamo come creare questo straordinario effetto. Anche se è relativamente facile ricreare l’effetto demo, dovrai comunque conoscere il tuo HTML di base. Andiamo:

    1. Crea un nuovo post o apri quello esistente
    2. Inserisci due immagini nel post. Se stai lavorando in un Visual Editor, dovresti vedere l’immagine una sopra l’altra. Se stai lavorando in un editor di testo, dovresti vedere un codice simile al seguente:
<a href="image1.jpg"> <img src = "http://www.loactionoftheimage.com" width = "700" height = "200" /> </a>

<a href="image2.jpg"> <img src = "http://www.loactionoftheimage.com" width = "700" height = "200" /> </a>
    1. Inserisci il tag [venti venti] prima della prima immagine
    2. Dopo il secondo, inserisci il tag [/ twentytwenty]

Dovresti finire con qualcosa di simile nel tuo editor di testo:

[Twentytwenty]
<a href="image1.jpg"> <img src = "http://www.loactionoftheimage.com/image1.jpg" width = "700" height = "200" /> </a>

<a href="image2.jpg"> <img src = "http://www.loactionoftheimage.com/image2.jpg" width = "700" height = "200" /> </a>
[/ Twentytwenty]
  1. Assicurati che le tue immagini abbiano le stesse dimensioni per ottenere i migliori risultati
  2. Visualizza in anteprima o pubblica il tuo post e goditi le tue immagini prima e dopo visivamente sbalorditive

Come creare immagini interattive: disegnare, aggiungere descrizioni e collegamenti

Oggi è difficile gestire un sito Web senza contenuti multimediali. Immagini, video e musica fanno parte praticamente di ogni sito Web. Un utente medio di Internet dipende fortemente dagli stimoli visivi, quindi devi prenderti cura delle parti visive e interattive del tuo sito. Gli articoli con immagini ricevono il  94% di visualizzazioni in più  rispetto a quelli senza uno. Inoltre, è già noto che i contenuti multimediali sui siti Web possono aumentare il ROI del content marketing.

Speriamo che non sia necessario convincerti a occuparti delle immagini sul tuo sito. Anche se non usi le immagini negli articoli (che dovresti), usi le immagini in primo piano, giusto? Ci sono molti plugin di gallerie che possono aiutarti a gestire le immagini sul tuo sito WordPress, puoi avere temi relativi alla fotografia, collegare Instagram al tuo sito WordPress e fare molto di più. E se volessi creare più contenuti interattivi?

Tanto per cominciare, potresti essere interessato ad aggiungere effetti immagine prima e dopo che i tuoi utenti apprezzeranno. Non dimenticare la realtà virtuale in WordPress che sta diventando più popolare dopo che Automattic ha introdotto la realtà virtuale in WordPress.com . Tuttavia, manca qualcosa. È possibile creare immagini interattive con parti cliccabili? Sì, è possibile e stiamo per mostrarti quanto sia divertente e facile.

Richiamare l’attenzione

PREZZO: gratuito
DEMO

La prima cosa che ti piace di questo plugin è che è completamente gratuito! Proprio come con qualsiasi altro plug-in dal repository di WordPress, puoi scaricarlo, installarlo e attivarlo in pochi minuti. La versione gratuita ti permetterà di lavorare con un’immagine interattiva. Se vuoi di più, dovrai optare per la versione PRO, ma ne parleremo più avanti.

Il plug-in è reattivo e non devi preoccuparti che le immagini interattive vengano visualizzate correttamente su qualsiasi dispositivo. Non solo l’immagine verrà ridimensionata in base alle dimensioni dello schermo, ma funzionerà nella maggior parte dei browser moderni e meno recenti (desktop e mobile). Disegna Attenzione utilizza gli elementi della tela quando vengono visualizzati in nuovi browser mentre tornerà alle mappe immagine se lo carichi in uno precedente.

Caratteristiche

Prima di arrivare ad un esempio che ti mostrerà quanto è potente questo semplice plugin, vediamo cosa aspettarti da Draw Attention:

  • Disegna  : dopo aver caricato un’immagine, avrai la possibilità di disegnare forme su di essa. Seleziona qualsiasi parte della tua immagine che diventerà selezionabile / cliccabile
  • Colori  : personalizza i colori in modo da poter adattare gli hotspot al design del tuo sito
  • Evidenzia al passaggio del mouse  : mostra un’altra parte dell’immagine se un utente passa sopra la parte selezionata
  • Mostra più informazioni  – Visualizza più informazioni sulla parte selezionata dell’immagine
  • Vai a URL  : reindirizza gli utenti a qualsiasi URL se fanno clic sulla selezione

Disegna le impostazioni di attenzione

Esempio: mappa interattiva delle Hawaii

Useremo l’esempio dal sito demo per mostrarti cosa puoi fare esattamente con Draw Attention. Quindi, vediamo come appare una mappa interattiva delle Hawaii quando viene creata con il plugin.

La prima cosa che dovresti fare è trovare un’immagine delle isole Hawaii. Dopo essere passato a  Attirare l’attenzione -> Modifica immagine,  è necessario caricare l’immagine nell’area sulla barra laterale destra. Una volta caricata l’immagine, il divertimento può iniziare.

Qui puoi scegliere i colori per le alte luci (colore, bordo, opacità, ecc.), Dare uno stile alla “casella informazioni aggiuntive” (immagine, titolo, colore del testo, ecc.). Se non si desidera selezionare manualmente tutti i colori dell’immagine, è possibile scegliere rapidamente una combinazione di colori dalla barra laterale destra.

Attira l'attenzione: come creare immagini interattive in WordPress

La parte più magica si verifica nella   schermata delle impostazioni delle aree hotspot . Qui otterrai l’immagine caricata a dimensione intera. Tutto quello che devi fare ora è iniziare a disegnare e creare un nuovo hotspot. Puoi aggiungere tutti i punti che desideri, il che significa che puoi creare selezioni complete che desideri. Puoi creare tanti hotspot e ognuno può avere le proprie impostazioni.

Quindi, in questo esempio, dovresti selezionare una delle isole. Scegli un titolo per l’isola, aggiungi una descrizione e l’immagine extra che verrà mostrata una volta che un utente ha esplorato l’hotspot (parte destra dell’immagine GIF mostrata sopra).

Dovresti ripetere il processo per ciascuna delle isole che vuoi essere interattive. Una volta che hai i tuoi hotspot pronti, copia il shortcode dal lato destro. Incolla il shortcode in un post, pagina, widget o ovunque tu voglia mostrare la tua nuova mappa interattiva e il gioco è fatto! Se si desidera reindirizzare gli utenti a qualsiasi altra pagina dopo aver fatto clic sulle selezioni, è sufficiente selezionare l’URL anziché la descrizione. Facile come quello!

Versione PRO

Mentre la versione gratuita sarà perfetta se hai bisogno di una sola immagine, la  versione PRO  ti permetterà di avere tutte le immagini interattive sul tuo sito che desideri. Anche se questa sarà la cosa più importante da considerare, la versione PRO ti porterà anche più di più immagini.

La funzione Opzioni layout ti consentirà di visualizzare ulteriori informazioni sulle parti selezionate dell’immagine. Ad esempio, potrai mostrare le informazioni in una lightbox o in una semplice barra degli strumenti che verrà visualizzata dopo che un utente passa sopra la parte selezionata dell’immagine.

Esistono anche venti palette di colori predefinite, quindi non è necessario personalizzare manualmente tutti i colori. La versione PRO ti costerà $ 74 per una licenza per sito singolo, ma se hai bisogno di più di un’immagine interattiva, questo sarà un gioco da ragazzi.

Come rigenerare dimensioni dell’immagine aggiuntive

È relativamente facile registrare nuove dimensioni di immagine nel tuo tema WordPress. Dopo aver detto al tuo sistema quanto dovrebbero essere grandi le tue immagini, le hai nominate e hai deciso come ritagliarle, sei libero di distribuire le immagini dove vuoi. E le vecchie immagini?

Se hai utilizzato una delle tecniche che ti abbiamo mostrato, hai preparato il terreno per nuove immagini. Sia che tu utilizzi le dimensioni delle immagini appena registrate per le anteprime dei post o consenti agli autori di utilizzarle nei post, le nuove regole si applicano solo a quelle immagini che vengono caricate dopo aver apportato la modifica nel file Functions.php. Per modificare le immagini più vecchie, ti consigliamo di utilizzare il plug-in Rigenerate miniature.

Rigenera miniature:

PREZZO: gratuito
  1. Vai su Plugin-> Aggiungi nuovo
  2. Cerca “Rigenera miniature”
  3. Installa e attiva il plugin
  4. Passare a Strumenti-> Regen.Thumbnails

Se vuoi ridimensionare tutte le tue immagini, fai semplicemente clic sul pulsante “Rigenera tutte le anteprime” e attendi che il plugin faccia il duro lavoro.

Come rigenerare dimensioni dell'immagine aggiuntive

Se vuoi vedere le immagini che verranno ridimensionate, o se vuoi ridimensionare solo alcune delle immagini, vai al tuo Catalogo multimediale dove troverai una nuova opzione sotto “Azioni in blocco” e una accanto a ogni immagine nella galleria.

L’aspetto positivo del plug-in è che non elimina le immagini originali. Creerà solo nuove dimensioni di immagine che puoi utilizzare nel tuo tema, mentre quelle originali ti rimarranno per usarle in seguito o eliminarle manualmente se decidi di non averne bisogno.

Questo è tutto. Goditi le tue nuove miniature o dai un’occhiata al   plug-in Simple Image Sizes che può fare la stessa cosa.

Rimuovi gli attributi dell’immagine larghezza e altezza con jQuery

Quando si aggiungono immagini a un post di WordPress, il sistema aggiunge automaticamente i suoi attributi di altezza e larghezza all’immagine. Di solito è una buona cosa, ma ci sono momenti in cui non ti piacerà il fatto che ogni immagine ottenga quegli attributi.

Se desideri eliminare gli attributi nel punto di caricamento, puoi farlo tramite una semplice funzione che ti abbiamo mostrato l’ultima volta.

Ma se leggi l’articolo o provi tu stesso la funzione, hai notato che influisce solo sulle immagini caricate dopo l’installazione della funzione nel tuo sistema WP. Se hai già un database pieno di post con immagini inserite, la funzione di cui sopra non ti aiuterà molto con i tuoi vecchi attributi di immagine.

Dal momento che probabilmente non puoi esaminare manualmente ogni singola immagine ed eliminare la larghezza e l’altezza una ad una, probabilmente hai bisogno di un’altra funzione che spogli quegli attributi per tutte le immagini esistenti incorporate nei tuoi post. In tal caso, sei nel posto giusto perché stiamo per mostrarti un modo semplice per rimuovere automaticamente gli attributi di immagine di larghezza e altezza con poche righe di codice jQuery. Non spaventarti con la frase precedente: non devi nemmeno sapere cos’è jQuery, segui i tre passaggi successivi e avrai finito in un batter d’occhio.

Rimuovi gli attributi dell’immagine larghezza e altezza:

    1. Apri il file header.php dalla cartella del tuo tema
    2. Copia e incolla questo codice ovunque tra i tag <head> e </head>:
<script src = "http://code.jquery.com/jquery-latest.js"> </script>
<script type = "text / javascript">
jQuery.noConflict ();
jQuery (document) .ready (function ($) {
$ ( 'Img'). Each (function () {
$ (This) .removeAttr ( 'width')
$ (This) .removeAttr ( 'height');
});
});
</ Script>
  1. Salvare le modifiche

E hai finito! Il codice farà la sua magia dopo aver aperto un post che contiene un’immagine e rimuoverà i tag di larghezza e altezza da essa.

Come creare dimensioni di immagine personalizzate in Media Uploader

Se stai usando Media Uploader per gestire le immagini in WordPress, probabilmente hai visto numerose opzioni per le immagini. Tra molti, puoi scegliere una dimensione dell’immagine che puoi inviare al tuo articolo.

Ci sono le opzioni di anteprima, media, grande e full-size tra cui scegliere, ma tutte quelle opzioni hanno valori predefiniti. Quindi, se stai usando un tema personalizzato, il più delle volte sei bloccato con la modifica di larghezza e altezza per ogni immagine più e più volte.

In realtà, non devi farlo. C’è una piccola funzione ordinata chiamata add_image_size () che è un ottimo strumento per gli sviluppatori. E dopo questo articolo, lo troverai utile anche.

Supponiamo che il tuo tema abbia una larghezza personalizzata e desideri incorporare facilmente le immagini per adattarle perfettamente. Diciamo che la larghezza è 666 px (non entreremo nel perché tu abbia impostato la larghezza su questo numero, è la tua scelta). Per fare ciò, è necessario aggiungere un pulsante di opzione aggiuntivo a Uploader multimediale. Con il codice qui sotto, aggiungerai un’altra dimensione che è la metà delle dimensioni di quella originale.

    1. Apri il tuo file Functions.php
    2. Copia e incolla questo pezzo di codice:
funzione custom_image_sizes () {
add_image_size ('one-size', 333, 333, true);
add_image_size ('another-size', 666, 666, true);
}

add_action ('init', 'custom_image_sizes');

funzione show_image_sizes ($ size) {
$ size ['one-size'] = __ ('Dimensione personalizzata 1', 'isitwp');
$ size ['another-size'] = __ ('Dimensione personalizzata 2', 'isitwp');
restituisce $ size;
}

add_filter ('image_size_names_choose', 'show_image_sizes');
  1. Salvare le modifiche
  2. Prova ad aggiungere un’immagine dal tuo Uploader multimediale in cui dovresti vedere le nuove opzioni di dimensione in “Impostazioni di visualizzazione degli allegati”

Crea uno screenshot automatico di qualsiasi sito Web e pubblicalo come immagine nel tuo post

Se si desidera visualizzare un’anteprima di un sito Web, è necessario visitare il sito Web, stamparlo o acquisire uno screenshot con un programma o un componente aggiuntivo del browser. Quindi dovrai modificare l’immagine, tagliarla nella giusta dimensione e caricarla sul tuo WordPress in modo da poter utilizzare lo screenshot in un post.

Se non devi fare quella istantanea di tanto in tanto, non sarà un problema, ma se stai usando più spesso schermate di diversi siti Web, sarai felice di sapere che esiste una fantastica funzione che risparmia tempo e nervi.

In questa parte della guida, stiamo per mostrarti la funzione completa che crea un shortcode che puoi usare per scattare istantanee di qualsiasi pagina web che desideri.

Crea screenshot automatico:

    1. Apri funzioni.php
    2. Copia e incolla il seguente codice:
funzione wp_webscreen ($ atts, $ content = NULL) {
estratto (shortcode_atts (matrice (
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // larghezza
"h" => '450' // altezza
), $ atts));

$ img = '<img alt = "'. $ alt. '" src = "'. $ snap. ''. urlencode ($ url). '? w ='. $ w. '& h ='. $ h. '"/>';
restituisce $ img;
}
add_shortcode ("screen", "wp_webscreen");
  1. Modifica le variabili predefinite nell’array
  2. Salvare le modifiche

Questa funzione crea un shortcode che puoi facilmente usare ovunque sul tuo sito Web WordPress. Se si desidera utilizzare lo screenshot di una pagina Web in un post, widget della barra laterale o piè di pagina, ad esempio, è sufficiente c / p lo shortcode nel punto giusto:

[screen url = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ h =” 450 ″]

Il bello di questa funzione è che salva l’immagine come URL dinamico, il che significa che una volta che creare uno snapshot con lo shortcode, si aggiornerà automaticamente in futuro e mostrerà sempre l’aspetto attuale del sito Web specificato nello shortcode.

Si noti che è possibile modificare i parametri dello shortcode direttamente da esso. Non è necessario modificare il codice nel file Functions.php se si desidera acquisire l’istantanea di un altro URL o acquisire l’istantanea in una dimensione diversa.

Esempio:

Diciamo che vuoi fare uno screenshot di Google e renderlo grande 200 × 400 pixel:

[screen url = “http://www.google.com” alt = “Google” w = “200 ″ h =” 400 ″]

Puoi rendere tutto ancora più semplice salvando lo shortcode in un pulsante in modo da poterlo inserire in un post con un solo clic di un pulsante.

Conclusione

Non è necessario installare tutti i plug-in e le funzioni che abbiamo menzionato per migliorare le immagini sul tuo sito WordPress. Ma speriamo che tu abbia trovato almeno alcuni suggerimenti che ti aiuteranno a ottimizzare le immagini o renderle migliori in alcun modo.

Open

info.ibdi.it@gmail.com

Close