Hai mai caricato una foto straordinaria ad alta risoluzione sul tuo sito WordPress, solo per scoprire che appare deludentemente piccola o sfocata? È un'esperienza frustrante, specialmente quando devi mostrare lavori dettagliati come fotografia, arte o immagini di prodotti.
Dalla versione 5.3, WordPress riduce automaticamente le immagini di grandi dimensioni per migliorare la velocità del sito, il che è un'ottima funzionalità. Tuttavia, può sembrare un ostacolo quando la qualità dell'immagine è essenziale per il tuo portfolio o negozio online.
Noi di WPBeginner abbiamo affrontato esattamente questo problema nei nostri progetti. Abbiamo scoperto che non devi scegliere tra immagini belle e un sito web veloce.
In questa guida, ti illustreremo quattro modi semplici per visualizzare immagini a grandezza naturale in WordPress senza rallentare il tuo sito.
Quando dovresti visualizzare immagini a grandezza naturale in WordPress?
Un esempio di quando potresti dover visualizzare immagini a grandezza naturale in WordPress è se gestisci un portfolio fotografico o un negozio di graphic design. Se vendi il tuo lavoro come download digitali, potresti voler visualizzare immagini di grandi dimensioni per mostrare ai potenziali clienti la loro vera qualità.
Anche se gestisci un negozio WooCommerce per prodotti fisici di eCommerce, potresti comunque aver bisogno di visualizzare alcune immagini a grandezza naturale. Puoi utilizzare un'immagine in miniatura del prodotto, su cui gli utenti possono fare clic per vedere la dimensione originale dell'immagine e ingrandire i dettagli dell'articolo.
Detto questo, immagini di grandi dimensioni possono causare molti problemi. Possono rallentare il tuo sito web, il che può influire negativamente sulla sua ottimizzazione per i motori di ricerca (SEO).
Per questo motivo, WordPress ora ridimensiona automaticamente le immagini di grandi dimensioni quando le carichi. Se un'immagine è più grande di 2560 pixel in altezza e/o larghezza, WordPress la ridimensionerà proporzionalmente a una dimensione più piccola, mantenendo le dimensioni originali dell'immagine.
La maggior parte dei provider di hosting WordPress limita anche la dimensione del file che puoi caricare nella libreria multimediale. Questo può essere un ostacolo se hai molte immagini di grandi dimensioni da visualizzare.
Se desideri modificare il limite di dimensioni, puoi leggere la nostra guida su come aumentare la dimensione massima di caricamento dei file in WordPress.
Ora, vediamo come puoi visualizzare immagini a grandezza naturale sul tuo sito web WordPress. Abbiamo 4 metodi per farlo. Alcuni potrebbero funzionare meglio per immagini singole, mentre altri sono migliori per più immagini. Utilizza semplicemente i collegamenti sottostanti per passare direttamente al tuo metodo preferito:
- Metodo 1: Utilizza l'URL dell'immagine a grandezza naturale (Ideale per immagini singole)
- Metodo 2: Disabilita il ridimensionamento delle immagini in WordPress (Consigliato per più file)
- Metodo 3: Disabilita il ridimensionamento delle immagini con un plugin (Per principianti assoluti)
- Metodo 4: Apri immagini WordPress a larghezza intera in un Lightbox (Ideale per gallerie)
- Domande frequenti sulle immagini a grandezza naturale
- Bonus: Ottimizza le tue immagini per una migliore velocità e SEO
Metodo 1: Utilizza l'URL dell'immagine a grandezza naturale (Ideale per immagini singole)
Se vuoi visualizzare solo una o due immagini di grandi dimensioni sul tuo sito web, puoi semplicemente aggiungerle utilizzando gli URL delle immagini originali.
Quando carichi un'immagine che supera le dimensioni massime, WordPress ridimensionerà quell'immagine per creare una versione più piccola. Tuttavia, l'immagine originale e più grande rimane intatta.
Innanzitutto, vai su Media » Libreria dalla dashboard di WordPress. Assicurati di cambiare la visualizzazione in ‘Elenco’.
Dopodiché, passa il mouse sopra la tua immagine grande. Cerca quella il cui nome file termina con ‘-scaled’.
Quando appare il pulsante ‘Copia URL’, fai clic su di esso.
Fatto ciò, puoi incollare l'URL dell'immagine nella barra degli indirizzi del tuo browser ed eliminare '-scaled....' dalla fine dell'URL dell'immagine. Fai attenzione a non rimuovere il formato dell'immagine (.png, .jpg, .gif, ecc.).
Quindi, se l'URL dell'immagine ridimensionata è http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg, allora il tuo URL dell'immagine originale è http://example-website.local/wp-content/uploads/2024/03/example-image.jpg.
Quando visiti quell'URL, vedrai l'immagine nelle sue dimensioni originali.
Ora, puoi aggiungere l'immagine ovunque sul tuo sito web. Poiché stiamo aggiungendo l'immagine tramite un link, dovrai incorporarla piuttosto che selezionarla dalla libreria multimediale.
Per fare ciò, apri l'editor a blocchi di Gutenberg per il post o la pagina in cui desideri utilizzare l'immagine. Quindi fai clic sull'icona '+ Aggiungi blocco' per aggiungere un nuovo blocco. Qui puoi selezionare il blocco Immagine.
Fatto ciò, fai clic su 'Inserisci da URL'.
Puoi quindi semplicemente incollare l'URL dell'immagine a grandezza naturale o immagine grande nel campo, e premi il tasto 'Invio' sulla tastiera.
Quando sei pronto per andare online, fai semplicemente clic su 'Pubblica' o 'Aggiorna'. Ora puoi visitare questa pagina o post per vedere l'immagine a grandezza naturale in azione.
Per aggiungere altre immagini a grandezza naturale, ripeti semplicemente lo stesso processo descritto sopra.
Metodo 2: Disabilita il ridimensionamento delle immagini in WordPress (Consigliato per più file)
Se hai intenzione di visualizzare più immagini grandi, disabilitare la funzione di ridimensionamento automatico è l'approccio migliore. Sebbene tu possa farlo modificando il file functions.php del tuo tema, questo metodo può essere rischioso e potrebbe causare problemi al tuo sito se commetti un errore.
Ecco perché consigliamo di utilizzare invece il plugin gratuito WPCode. Come spieghiamo nella nostra recensione completa di WPCode, è il modo più sicuro per aggiungere snippet di codice, e non verranno cancellati quando aggiornerai il tuo tema.
Come lo usiamo: Noi di WPBeginner utilizziamo WPCode per gestire tutti gli snippet personalizzati sui nostri siti web. Ci permette di aggiungere nuove funzionalità in modo rapido e sicuro, senza il rischio di compromettere il nostro sito a causa di un errore di battitura in un file del tema. Questo è lo strumento esatto che utilizziamo per attività come questa.
Innanzitutto, dovrai installare e attivare il plugin. Per questo metodo, la versione gratuita di WPCode è tutto ciò di cui hai bisogno.
Una volta attivato, vai su Code Snippets » Add Snippet. Qui, seleziona ‘Add Your Custom Code (New Snippet)’ e fai clic su ‘Use snippet.’
Ora, digita un titolo per lo snippet di codice personalizzato. Questo è solo per tuo riferimento. Dopodiché, apri il menu a discesa ‘Code Type’ e seleziona ‘PHP Snippet.’
Nell'editor di codice, aggiungi il seguente snippet di codice:
add_filter( 'big_image_size_threshold', '__return_false' );
Successivamente, scorri verso il basso fino alla sezione ‘Insertion’. Assicurati che la posizione sia impostata su ‘Run Everywhere’ in modo che il codice funzioni su tutto il tuo sito web.
Quando sei pronto, scorri fino in cima alla schermata e fai clic sull'interruttore ‘Inactive’ per cambiarlo in ‘Active.’ Infine, fai clic su ‘Save Snippet’ per rendere il codice attivo.
D'ora in poi, WordPress utilizzerà le dimensioni originali per qualsiasi immagine di grandi dimensioni che carichi, dandoti accesso alla versione a grandezza naturale.
Metodo 3: Disabilita il ridimensionamento delle immagini con un plugin (Per principianti assoluti)
Se il metodo del codice ti sembra troppo intimidatorio, puoi disabilitare il ridimensionamento delle immagini utilizzando Perfect Images. Questo plugin gratuito ti permette di creare dimensioni aggiuntive per le immagini in WordPress, aggiornare i metadati dei tuoi media e altro ancora.
Innanzitutto, dovrai installare e attivare il plugin Perfect Images. Per maggiori dettagli sull'installazione di un plugin, consulta la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l'attivazione, vai su Meow Apps » Perfect Images e seleziona la casella Disabilita accanto a ‘Image Threshold.’
WordPress ora non aggiungerà più l'attributo ‘-scaled’ a nessuna immagine, quindi puoi caricare file multimediali di grandi dimensioni e WordPress li mostrerà a dimensione intera per impostazione predefinita.
Metodo 4: Apri immagini WordPress a larghezza intera in un Lightbox (Ideale per gallerie)
L'opzione finale è l'aggiunta di un lightbox per immagini a grandezza naturale al tuo sito. Questo è perfetto se stai creando una galleria di immagini, uno slider o un portfolio fotografico.
Questo metodo ti consente di mostrare immagini in miniatura più piccole quando la pagina viene caricata per la prima volta. I visitatori possono quindi fare clic su qualsiasi miniatura per vedere l'immagine a grandezza naturale in un popup.
Tieni presente che devi disabilitare il ridimensionamento delle immagini in anticipo utilizzando uno dei metodi sopra indicati. In caso contrario, il tuo lightbox mostrerà solo la versione ridotta delle tue immagini.
Una volta disabilitato il ridimensionamento, è ora di creare una galleria. Ti consigliamo di utilizzare Envira Gallery. Come spieghiamo nella nostra recensione completa di Envira Gallery, è il miglior plugin per gallerie di immagini per WordPress grazie alla sua potenza e facilità d'uso.
Dopo aver installato e attivato Envira, puoi seguire il nostro tutorial passo passo su come aggiungere una galleria con un effetto lightbox in WordPress.
Un'altra ottima opzione è NextGEN Gallery. Abbiamo trovato questo plugin eccellente per fotografi professionisti o artisti che necessitano di funzionalità avanzate per visualizzare e vendere il loro lavoro professionalmente.
Domande frequenti sulle immagini a grandezza naturale
Su WPBeginner, riceviamo frequentemente domande sulla gestione delle immagini in WordPress. Ecco alcune delle più comuni sulla visualizzazione a grandezza naturale.
La visualizzazione di immagini a grandezza naturale rallenterà il mio sito web?
Sì, i file di immagini di grandi dimensioni possono aumentare i tempi di caricamento della tua pagina, il che può danneggiare l'esperienza utente e la SEO. Ecco perché è molto importante ottimizzare le tue immagini per il web prima di caricarle, anche quando le visualizzi a grandezza naturale.
Qual è il modo più semplice per mostrare una singola immagine a grandezza naturale?
Il metodo più semplice è utilizzare l'URL diretto dell'immagine originale. Quando WordPress crea una versione ridimensionata, conserva il file originale, che puoi quindi incorporare utilizzando il blocco Immagine.
È meglio usare un plugin o del codice per disabilitare il ridimensionamento delle immagini?
Per la maggior parte degli utenti, specialmente i principianti, l'uso di un plugin come WPCode è l'opzione più sicura. Aggiungere codice direttamente ai file del tuo tema può bloccare il tuo sito se non fatto correttamente, mentre un plugin lo gestisce in un ambiente sicuro.
Posso mostrare una miniatura che apre l'immagine a grandezza naturale quando viene cliccata?
Assolutamente. Utilizzare un plugin per gallerie lightbox come Envira Gallery è il modo migliore per farlo. I visitatori vedono miniature più piccole e a caricamento rapido e possono cliccare per visualizzare la versione ad alta risoluzione in un popup.
Bonus: Ottimizza le tue immagini per una migliore velocità e SEO
Visualizzare immagini a grandezza naturale può essere ottimo per mostrare il tuo lavoro, ma grafiche di grandi dimensioni possono rallentare i tempi di caricamento del tuo sito web e influire negativamente sulla tua SEO.
Per questo motivo, consigliamo vivamente di ottimizzare le tue immagini per le prestazioni. Un plugin come EWWW Image Optimizer può aiutarti comprimendo i tuoi file per renderli più piccoli e veloci da caricare.
Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare immagini a grandezza naturale in WordPress. Per altri suggerimenti sulla gestione dei tuoi file multimediali e sul miglioramento del tuo sito, puoi esplorare le nostre altre guide:
- Come ottimizzare facilmente i file immagine per il Web senza perdere qualità
- Guida per principianti all'ottimizzazione delle immagini per i motori di ricerca (SEO)
- Come caricare facilmente immagini in modalità lazy in WordPress
- Modi per prevenire il furto di immagini in WordPress
- Come aggiungere testo sopra un'immagine in WordPress
- Ottimi plugin WordPress per la gestione delle immagini (aggiornato)
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Jiří Vaněk
Lo svantaggio di visualizzare un'immagine di grandi dimensioni è evidente. Consuma molti dati, specialmente per le persone con dispositivi mobili, e l'immagine viene comunque ridimensionata per adattarsi al display. Mi sono abituato a usare le gallerie. Quando voglio visualizzare un'immagine a grandezza naturale, inserisco una galleria nel post, anche se è solo con un'immagine. In questo modo, c'è una miniatura nell'articolo su cui chiunque può fare clic per visualizzare l'immagine a grandezza naturale. La trovo comoda e l'utente può scegliere se vuole vedere l'immagine a grandezza naturale o meno. I migliori strumenti per questo, a mio parere, sono Elementor o Envira Gallery.
Mohammad Sharfuddin
Ho anche notato che le immagini vengono ritagliate di almeno il 15% agli angoli automaticamente quando vengono inserite come blocco immagine in un post del blog. C'è un modo per fermare questo?
Dilip Waghmode
Ho caricato immagini di dimensioni comprese tra 10 e 14 MB sul sito web.
E WordPress ha ridimensionato le immagini a dimensioni massime di 3-4 MB.
Quindi l'utente può scaricare l'immagine nella sua dimensione effettiva, come 10 MB.
Per favore, fammelo sapere.
Grazie
Supporto WPBeginner
Dipenderebbe dai plugin che hai sul tuo sito per ciò che potrebbe cambiare le dimensioni dell'immagine, ma potresti disabilitare la compressione delle immagini integrata seguendo la nostra guida qui sotto:
https://www.wpbeginner.com/wp-tutorials/how-to-increase-or-decrease-wordpress-jpeg-image-compression/
Amministratore