Come migliorare e ottimizzare le immagini per WordPress

È passato molto tempo dall'ultima volta che le immagini erano qualcosa di troppo grande da caricare su Internet. Oggi i siti web non possono esistere senza di loro. Anche se la velocità di Internet è aumentata notevolmente 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 possono, infatti, danneggiare il tuo sito in molti modi; dall'influenzare il modo in cui i visitatori pensano di te 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.

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
• Migliore SEO
• Backup più piccoli
• Minor 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.

Testa rapidamente le immagini sul tuo sito

Prima di iniziare a lavorare sull'ottimizzazione, puoi controllare rapidamente la velocità e le prestazioni del tuo sito. Utilizzando uno 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 rallentano il caricamento del tuo sito.

Ottimizza le immagini per WordPress prima del caricamento

Durante i blog, la maggior parte delle persone non adotta tutte le misure necessarie per ottimizzare le proprie immagini. Di solito, le persone scattano semplicemente una foto dalla fotocamera o dallo smartphone, ne scaricano una da Internet o ne creano una utilizzando un software per computer.

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

Ridimensiona le immagini

Non caricare immagini sul tuo sito Web WordPress prima di aver controllato la larghezza e l'altezza di ciascuna immagine. Se visualizzi immagini a un massimo di 700 px, ad esempio, non è 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 è facile 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 variano da tema a tema. Se non sei sicuro di quale utilizzare, dai un'occhiata più da vicino al tuo tema WordPress e controlla le immagini, cerca la documentazione o chiedi aiuto al supporto.

Cambia la qualità

Dopo aver modificato le dimensioni, dovresti considerare di modificare la qualità delle immagini. A seconda del software, esistono diversi modi per modificare la qualità delle immagini. Ad esempio, il sempre popolare Photoshop consente di salvare le immagini per il web. Questa opzione ti consentirà 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 lo strumento online gratuito Tiny PNG. Basta caricare una foto e vedere che differenza può fare.

Scegli il formato giusto

Anche dopo le modifiche alle dimensioni e alla qualità, dovresti considerare di cambiare il formato. Per cominciare, semplicemente selezionando il formato giusto, puoi togliere qualche kilobyte da un'immagine, se non di più.

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

In molti casi, la riformattazione delle immagini non comporterà differenze significative di qualità, mentre puoi aspettarti una 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.

Prenditi cura dei nomi dei file

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

Ti consigliamo di nominare le immagini senza utilizzare spazi. Non dimenticare di includere le parole chiave se desideri che la pagina e l'immagine vengano classificate. Ad esempio, se stai caricando un'immagine della Ferrari California, il nome del file dovrebbe essere "ferrari-california.jpg". Se utilizzi un plug-in SEO per WordPress, sai già che controlla i tag alt per le parole chiave. Sì, è davvero così importante avere un nome appropriato per l'immagine.

Ottimizza le immagini per WordPress dopo il caricamento

Dopo aver preparato le immagini sul tuo computer, puoi procedere con il caricamento. Spero che le tue immagini siano della giusta dimensione e qualità. Ti sei assicurato che il formato e il nome del file siano corretti. Dopo il caricamento, WordPress ti chiederà ulteriori informazioni. Non saltare le meta informazioni; inserisci i dettagli sulle tue immagini in modo da poterle organizzare facilmente e prepararti per la 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 file 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 possono vedere correttamente la tua immagine. Non solo questo sarà utile per i tuoi utenti, ma ti aiuterà anche con la SEO. La tua pagina verrà classificata meglio e gli utenti saranno in grado di trovare più facilmente le tue nuove immagini.

Anche se non avrai sempre bisogno di didascalie, assicurati di aggiungerne di quelle per le immagini che necessitano di 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 anche modificare solo una miniatura o tutte le altre dimensioni. L'editor nativo di WordPress è molto semplice, ma può essere salvato di tanto in tanto.

Rigenera tutte le miniature

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

Per una soluzione rapida, potresti essere interessato a un plug-in gratuito Rigenera miniature utilizzato da più di un milione di utenti. Se desideri 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 righe seguenti di questo articolo.

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.

Lazy Carica immagini quando necessario

A volte, la qualità delle immagini sarà molto più importante delle loro dimensioni. 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.

Lazy load è una tecnica che carica le immagini solo quando gli utenti ne hanno bisogno (scorri fino ad esse). Ad esempio, se hai caricato venti fotografie di alta qualità in un articolo, rallenterebbe enormemente il tuo sito. Ma se si caricano pigramente le immagini, l'articolo sarà velocissimo e le foto verranno caricate solo quando necessario, nel momento in cui un utente le raggiunge.

Avere immagini reattive

Sebbene la maggior parte dei temi di WordPress sia responsive, ciò non significa necessariamente che anche le tue immagini siano responsive. Poiché non desideri caricare un'immagine di grandi dimensioni su uno schermo piccolo, dovrai registrare ulteriori dimensioni dell'immagine 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 abbiano un bell'aspetto sui social media, dovrai fare un passo in più e ottimizzare i meta tag e il markup dello schema.

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

Se vuoi di più e vuoi ottimizzare le immagini per ulteriori siti Web di social media, dai un'occhiata a WPSSO – Accurate Meta Tag + Schema Markup for Social Sharing Optimization & SEO plugin.

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 la 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 che l'immagine perde in qualità. 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 di post o per essere mostrate in un post, ma se stai caricando le tue fotografie, vuoi che siano il meglio possibile, giusto?

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

Interrompi 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 volerli ancora più compressi e farti risparmiare tempo nel caricare il tuo sito. Se modifichi l'ultimo numero in quella riga di codice, modificherai 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 ulteriormente quei JPEG, avrai bisogno di questo codice:

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

Non dimenticare; il livello di compressione predefinito è 90.

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 avrai potuto vedere, ci sono diversi metodi che puoi usare. È importante prendersi cura delle immagini anche prima di caricarle sul tuo blog. Ma quando le immagini sono già presenti sul sito, potrebbe diventare impossibile riottimizzare ogni singola immagine separatamente e poi caricarle di nuovo.

Non preoccuparti; nessuno si aspetta che tu lo faccia in primo luogo. Resta con noi nei prossimi minuti poiché stiamo per mostrarti i plugin di ottimizzazione delle immagini più popolari per WordPress.

Per ottimizzare le immagini, dovrai solo selezionare il plugin dall'elenco. Dovrai configurarlo e scegliere le cose che il plugin farà per te. Dopodiché, sarai in grado di rilassarti 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 possiedi. Faranno caricare il sito più velocemente e alla fine ti aiuteranno a migliorare la SEO.

Plugin WP Smush

PREZZO: Gratuito

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

Quando abbiamo parlato della preparazione delle immagini per WordPress, abbiamo detto che il ridimensionamento è una parte cruciale del processo di ottimizzazione. Con questo plugin, non dovrai preoccuparti di questo poiché WP Smush ti consente di impostare le dimensioni massime. Dopo averlo fatto, tutte le immagini più grandi verranno automaticamente ridimensionate 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 cinquanta in blocco. Se vuoi risultati ancora migliori e più opzioni, dai un'occhiata a WP Smush PRO.

Plugin 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 alterarne la qualità. Quando pensi che il plugin può velocizzare il tuo sito in pochi secondi, sarai già sulla buona strada per scaricarlo. Una volta fatto ciò, potrai ottimizzare le immagini in blocco e gallerie come GRAND FlaGallery, NextCellent e NextGEN otterranno persino le proprie pagine di ottimizzazione in blocco.

Tutte le immagini che utilizzano la classe WP_Image_Editor in WordPress verranno ottimizzate automaticamente , mentre puoi lavorare manualmente la magia su tutte le altre. Ci piace che tu possa selezionare le cartelle che desideri ottimizzare. Per maggiori dettagli su questo e quali plugin utilizzano la classe, apri la pagina ufficiale di EWWW Image Optimizer nel repository di WordPress.

Plugin Comprimi immagini JPEG e PNG

PREZZO: Gratuito

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

Se usi questo plugin, Panda ottimizzerà automaticamente le tue immagini. Ogni volta che ne carichi uno nuovo, il plugin prenderà il sopravvento e farà il suo lavoro. Tuttavia, puoi ottimizzare singole immagini o farlo in blocco semplicemente accedendo alla libreria multimediale.

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

La cosa grandiosa del plugin è che ti consente di impostare gli attributi massimi di larghezza e altezza 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 della dashboard e funziona anche con l'app mobile di WordPress. Perché tutto ciò, Comprimi immagini JPEG e PNG ha più di 100.000 installazioni attive e merita un posto nell'elenco dei migliori plug-in di ottimizzazione delle immagini per WordPress.

Plugin Imsanity

PREZZO: Gratuito

Anche se l'immagine di copertina di questo plugin potrebbe 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 immagini sul tuo blog che necessitano di ottimizzazione.

Questo plugin gratuito è un'ottima opzione se non vuoi 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 dell'immagine.

Abbiamo adorato l'opzione che ti consente di convertire le immagini BMP in JPG. Nel caso in cui tu abbia molti file BMP che hai caricato per errore qualche tempo fa, questo sarà un vero toccasana.

Plugin ShortPixel Image Optimizer

PREZZO: Gratuito

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

ShortPixel Image Optimizer non solo ottimizzerà i documenti JPG, PNG, GIF e PDF per te, ma ti consentirà 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 consentirà 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 meno l'ottimizzazione automatica e fare molto, molto di più con questo fantastico plugin. Dai un'occhiata alla pagina ufficiale del repository per vedere tutte le funzionalità.

Optimus – Ottimizzatore di immagini per WordPress

PREZZO: Gratuito

Proprio come il plugin menzionato in precedenza, Optimus ottimizzerà le tue immagini per WordPress e lo farà senza influire sulla qualità delle tue immagini. Puoi lasciare che il plugin elabori le cose automaticamente 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. Velocizza 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 vedere di più, vai alla pagina ufficiale sul repository dei plugin di WordPress.

Aggiungi il caricamento lento per i tuoi video e immagini in WordPress

Una volta che inizi ad aggiungere molto materiale video e immagine sul tuo sito web, è ovvio che inizierà a caricarsi più lentamente. Non importa da dove provengano, i video e le immagini di grandi dimensioni agiranno da peso sul tuo sito e faranno aspettare i tuoi visitatori molto più a lungo del necessario per caricare tutti i contenuti. Con WordPress, questo non dovrebbe essere un grosso problema ed ecco come puoi risolvere facilmente la situazione.

Se conosci il PHP, c'è un ottimo articolo sull'aggiunta di caricamento lento per le immagini e lo scorrimento infinito scritto dai nostri colleghi su Elegant Themes.

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

Carico pigro per i video

PREZZO: Gratuito

Se hai molti video di Youtube e Vimeo, dovresti considerare l'installazione di questo plugin. Una volta configurato, il plug-in posizionerà un'immagine sul tuo video e, per questo motivo, il tuo sito Web verrà caricato molto più velocemente. Una volta che un visitatore scorre fino a un video, questa immagine verrà mostrata con un pulsante "riproduci" sopra 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

Questo plugin farà il suo lavoro in modo facile e veloce. Dopo averlo installato, aggiungi un link al tuo video Youtube o usa uno shortcode per aggiungerne uno. Puoi scegliere se aggiungere un video normale, una playlist o solo l'audio dal video selezionato. Successivamente, i tuoi video di Youtube riceveranno 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

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 attivati, il contenuto verrà caricato solo nel momento in cui un visitatore scorrerà su quella parte del contenuto.
C'è una demo ben mostrata che presenta 1000 immagini, ognuna delle quali viene caricata solo una volta che la si scorre. Poiché questo plug-in carica anche i video lazy, c'è una demo video che puoi vedere facendo clic sul link sopra.

BJ carico pigro

PREZZO: Gratuito

Se non hai bisogno del supporto per i video e vuoi solo che le tue immagini vengano caricate lentamente, dovresti dare un'occhiata a questo plugin WP. Una volta installato e configurato, sostituirà le tue immagini, miniature, immagini Gravatar e persino iframe con un segnaposto. Simile a un plug-in menzionato in precedenza, caricherà il contenuto solo una volta che un utente lo accede.

Che si tratti di immagini o video che vuoi caricare pigramente, uno dei plugin sopra menzionati ti aiuterà in un secondo. Tutti sono gratuiti, quindi non ci sono scuse per non provare almeno uno dei plugin e vedere quanto peso ci vorrà sulle tue spalle. Naturalmente, ci sono molti altri plugin con la stessa funzione e sei libero di sfogliarli e provarli tutti.

Visualizza le immagini prima e dopo in modo attraente

Siamo sicuri che hai già visto molti esempi di immagini prima/dopo. Non so voi, ma la prima cosa che abbiamo in mente quando vediamo la frase "prima e dopo" è un programma di allenamento fitness in cui le persone mostrano i loro corpi prima e dopo un programma di allenamento.

Se ci pensi, 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 vuoi lo stesso risultato, non staresti leggendo questo articolo perché sai già come farlo.

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

venti venti

PREZZO: Gratuito

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

Il plug-in ti consentirà di posizionare un'immagine sull'altra e di giocare con un dispositivo di scorrimento in modo da poter nascondere/rivelare l'immagine. Per favore, guarda la demo e vedrai di cosa stiamo parlando.

OK, ora che sei agganciato a questo piccolo plugin, vediamo come creare questo straordinario effetto. Sebbene sia relativamente facile ricreare l'effetto demo, dovrai comunque conoscere l'HTML di base. Andiamo:

1. Crea un nuovo post o apri quello esistente
2. Inserisci due immagini nel post. Se stai lavorando in un editor visuale, dovresti vedere l'immagine una sopra l'altra. Se stai lavorando in un editor di testo dovresti vedere un codice simile a questo:

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

<a href="image2.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
altezza="200" /></a>

3. Inserisci il tag [twentytwenty] prima della prima immagine
4. Dopo il secondo inserisci il tag [/twentytwenty]

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

5. Assicurati che le tue immagini abbiano le stesse dimensioni per ottenere i migliori risultati
6. 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 multimedia. Immagini, video e musica fanno parte praticamente di ogni sito web. Un utente medio di Internet dipende fortemente dagli stimoli visivi, quindi devi occuparti della parte visiva e interattiva del tuo sito. Gli articoli con immagini ricevono il 94% di visualizzazioni in più rispetto a quelli senza. Inoltre, è già noto che i contenuti multimediali sui siti Web possono aumentare il ROI del content marketing.

Ci auguriamo che non sia necessario persuaderti a occuparti delle immagini sul tuo sito. Anche se non usi le immagini negli articoli (cosa che dovresti), usi le immagini in primo piano, giusto? Esistono molti plug-in di galleria 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 contenuti più interattivi?

Per cominciare, potresti essere interessato ad aggiungere un effetto immagine prima-dopo che i tuoi utenti adoreranno. Non dimenticare la realtà virtuale in WordPress che sta diventando sempre più popolare dopo che Automattic ha introdotto la realtà virtuale su WordPress.com. Eppure c'è qualcosa che manca. È possibile realizzare immagini interattive con parti cliccabili? Sì, è possibile e stiamo per mostrarti quanto sia facile e divertente.

Richiamare l'attenzione

PREZZO: Gratuito

La prima cosa che ti piacerà di questo plugin è che è completamente gratuito! Proprio come con qualsiasi altro plugin 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 plugin è 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). Attira l'attenzione utilizza gli elementi della tela quando vengono visualizzati nei nuovi browser mentre ricadrà sulle mappe di immagini se lo carichi in uno più vecchio.

Caratteristiche

Prima di arrivare a un esempio che ti mostrerà quanto sia potente questo semplice plugin, vediamo cosa aspettarti da Attira l'attenzione:

• 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 adattare gli hotspot al design del tuo sito
• Evidenzia al passaggio del mouse : mostra un'altra parte dell'immagine se un utente passa il mouse 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

Esempio – Mappa interattiva delle Hawaii

Useremo l'esempio del sito demo per mostrarti cosa puoi fare esattamente con Attira l'attenzione. 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 aver navigato su Attira l'attenzione -> Modifica immagine, dovresti 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.), Lo stile della "riquadro ulteriori informazioni" (immagine, titolo, colore del testo, ecc.). Se non desideri selezionare manualmente ogni singolo colore per l'immagine, puoi scegliere rapidamente una combinazione di colori dalla barra laterale destra.

La parte più magica avviene nella schermata delle impostazioni delle aree hotspot . Qui otterrai la tua immagine caricata a grandezza naturale. 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 come 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 quando un utente passa il mouse sull'hotspot (parte destra dell'immagine GIF mostrata sopra).

Dovresti ripetere il processo per ciascuna delle isole che vuoi rendere interattive. Una volta che hai i tuoi hotspot pronti, copia lo shortcode dal lato destro. Incolla lo shortcode in un post, pagina, widget o ovunque tu voglia mostrare la tua nuova mappa interattiva e il gioco è fatto! Se desideri reindirizzare gli utenti a qualsiasi altra pagina dopo aver fatto clic sulle selezioni, devi solo 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 che vuoi sul tuo sito. Anche se questa sarà la cosa più importante da considerare, la versione PRO ti darà anche più di più immagini.

La funzione Opzioni di layout ti consente di mostrare più informazioni sulle parti selezionate dell'immagine. Ad esempio, potrai mostrare le informazioni in una lightbox o in una semplice barra degli strumenti che apparirà dopo che un utente passa il mouse sopra la parte selezionata dell'immagine.

Ci sono anche venti palette di colori predefinite, quindi non devi personalizzare manualmente ogni singolo colore. La versione PRO ti costerà $ 74 per una licenza per singolo sito, ma se hai bisogno di più di un'immagine interattiva, questo sarà un gioco da ragazzi.

Come rigenerare immagini di dimensioni aggiuntive

È relativamente facile registrare nuove dimensioni delle immagini nel tuo tema WordPress. Dopo che hai detto al tuo sistema quanto dovrebbero essere grandi le tue immagini, dato loro un nome e deciso come ritagliarle, sei libero di distribuire le immagini ovunque tu voglia. Ma che dire delle vecchie immagini?

Se hai utilizzato una delle tecniche che ti abbiamo mostrato, hai preparato il manto erboso per nuove immagini. Sia che utilizzi le dimensioni delle immagini appena registrate per le miniature dei post o che permetti agli autori di utilizzarle nei post, le nuove regole si applicano solo alle immagini che vengono caricate dopo aver apportato la modifica nel file functions.php. Per modificare le immagini più vecchie, suggeriamo di utilizzare il plugin Rigenera miniature.

Rigenera miniature:

PREZZO: Gratuito

1. Vai su Plugin->Aggiungi nuovo
2. Cerca "Rigenera miniature"
3. Installa e attiva il plugin
4. Vai a Strumenti->Rigenera.Miniature

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

Se vuoi vedere le immagini che verranno ridimensionate, o se vuoi ridimensionare solo alcune delle immagini, vai alla tua Libreria multimediale dove troverai una nuova opzione sotto "Azioni in blocco" e una accanto a ciascuna immagine nel galleria.

La cosa buona del plugin è che non cancella le tue immagini originali. Creerà solo nuove dimensioni dell'immagine che puoi usare nel tuo tema, mentre quelle originali ti verranno lasciate per usarle in seguito o cancellarle 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 di 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. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>

3. Salvare le modifiche

E hai finito! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. Apri il tuo file functions.php
2. Copy and paste this piece of code:

 function 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' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. Salvare le modifiche
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. Apri functions.php
2. Copia e incolla il seguente codice:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. Salvare le modifiche

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

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

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

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

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

Conclusione

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.