Perché un’immagine non si vede sul mio sito?

L’icona di un’immagine non disponibile, uno spazio vuoto e un segnaposto che non scompare offrono indizi diversi. Il file potrebbe mancare, il browser potrebbe non riuscire a mostrarlo oppure la pagina potrebbe nascondere un’immagine caricata correttamente.

Parti da una sola immagine interessata. Le prime verifiche si svolgono nell’editor del sito e nel browser. La sezione tecnica facoltativa riguarda richieste, HTML, CSS e messaggi di sicurezza del browser.

Se l’immagine compare nella pagina ma non nei risultati di ricerca, consulta la guida a Google Immagini. Se alla fine compare ma impiega troppo tempo, indaga sul caricamento lento delle immagini.

1. Parti dalla pagina pubblicata

Apri la pagina pubblica anziché l’anteprima dell’editor. Nell’editor verifica che l’immagine sia selezionata, la modifica salvata e la pagina pubblicata. Annota quali immagini presentano il problema e se è iniziato dopo un caricamento, un rifacimento grafico o una migrazione del sito.

Prova la pagina pubblica anche in una finestra di navigazione privata. Un risultato diverso è un indizio utile, ma tra le finestre possono cambiare lo stato di accesso, i dati memorizzati e le estensioni.

2. Trova e prova l’indirizzo dell’immagine

Fai clic con il tasto destro sull’immagine mancante o sulla sua icona e cerca Apri immagine in un’altra scheda oppure Copia indirizzo immagine. Un’immagine di sfondo o un segnaposto vuoto potrebbero non offrire queste opzioni.

Puoi anche selezionare l’immagine nell’editor e aprire i suoi dettagli nella libreria multimediale. Copia l’URL del file, non quello di una pagina allegato o di condivisione cloud. Una pagina di condivisione potrebbe mostrare l’immagine in un’interfaccia di download o richiedere l’accesso.

La pagina pubblica potrebbe usare una miniatura, un ritaglio mobile o una copia presso un servizio esterno di distribuzione delle immagini. Se trovi solo l’originale nella libreria, usalo come punto di partenza. La verifica in Network identifica la versione richiesta dalla pagina.

Apri l’indirizzo dell’immagine in una finestra privata senza accedere al tuo account, poi scegli il passo successivo:

• L’immagine si apre: passa alle verifiche di visibilità nella pagina. Se non rivelano nulla, esamina la richiesta effettiva della pagina.
• Compare un errore, una pagina di accesso o un avviso sui permessi: passa a posizione del file e accesso.
• Il problema si verifica solo sul telefono: passa a versioni mobile e caricamento, anche se l’originale si apre.
• Il browser scarica il file: passa alla verifica delle intestazioni di risposta. Le impostazioni di download possono spiegare il comportamento senza stabilire se l’immagine funziona nella pagina.

Un test riuscito in una nuova scheda conferma che il file può essere visualizzato in quel contesto. La pagina può comunque richiedere un’altra versione o incontrare una restrizione sull’incorporamento.

3. Ripristina il file o correggi l’accesso

Se il file manca o l’indirizzo è sbagliato

1. Trova l’immagine desiderata nella libreria multimediale. Confronta il suo indirizzo con quello che non funziona. Controlla dominio, cartella, nome, estensione e l’uso di maiuscole e minuscole. Alcuni server distinguono Photo.JPG da photo.jpg.
2. Sostituisci la selezione non funzionante nel blocco immagine o widget interessato. Scegli il file esistente che funziona, salva e pubblica. Se l’originale è stato eliminato, carica prima un sostituto affidabile.
3. Riapri la pagina pubblica. Verifica che ora punti a un’immagine disponibile. Se richiede ancora una miniatura mancante, segui la verifica delle dimensioni generate qui sotto.

Dopo una migrazione confronta anche l’host dell’immagine, non solo il nome del file. La pagina potrebbe puntare ancora al vecchio dominio o alla vecchia cartella di caricamento. Per i percorsi scritti a mano, consulta le verifiche tecniche.

Se l’originale funziona ma manca una miniatura

Un nuovo caricamento non ripara necessariamente una pagina che continua a indicare la versione mancante. Invia a chi gestisce il sito l’URL dell’originale funzionante e quello della miniatura assente. Chiedi di rigenerare la dimensione mancante e aggiornare gli elenchi di immagini che la indicano. Il pannello Network fornisce l’URL in errore e lo stato.

Per esempio: «L’originale si apre, ma questa pagina richiede una versione più piccola che restituisce 404. Potresti ripristinare quella dimensione e controllare i riferimenti alle immagini responsive della pagina?» Così indichi la riparazione senza dover conoscere gli strumenti di generazione della piattaforma.

Se l’accesso è negato o richiede autenticazione

Decidi prima se l’immagine deve essere pubblica. In tal caso scegli un file caricato con il normale flusso di pubblicazione dei media del sito. Un indirizzo locale file:///C:/..., un’anteprima temporanea blob: o un link cloud privato non è un indirizzo pubblico permanente.

Per una risposta 401 o 403, invia al fornitore di hosting l’URL esatto in errore, la pagina che lo usa e l’ora del test. Chiedi quale regola di autenticazione o distribuzione ha rifiutato la richiesta. Link a scadenza e protezione anti-hotlink, che limita l’incorporamento su altri siti, sono possibili cause. Correggi la regola o usa l’URL pubblico supportato dal fornitore. Mantieni i controlli di accesso previsti per i file privati.

4. Controlla la visibilità dell’immagine nella pagina

Se l’immagine si apre direttamente, parti dalle sue impostazioni nell’editor:

• Controlla l’immagine e la sezione che la contiene. Cerca opzioni come «Nascondi su mobile» o «Solo desktop». Una sezione nascosta nasconde anche le sue immagini.
• Controlla gli sfondi separatamente. Uno sfondo di sezione ha bisogno di un contenitore visibile. Assegna a una sezione vuota l’altezza prevista nell’editor, poi controlla posizione dello sfondo e sovrapposizione.
• Esamina la grafica trasparente su un altro colore. Un logo bianco può confondersi con una pagina bianca pur caricandosi correttamente. Usa la guida alla trasparenza se il soggetto sembra invisibile.

Salva la modifica pertinente e controlla la pagina pubblica. Se l’immagine manca ancora, usa le verifiche tecniche per distinguere una richiesta bloccata da un’immagine nascosta dal layout.

5. Controlla le immagini mobile e i segnaposto bloccati

Se il problema riguarda solo il telefono

Apri la vista mobile dell’editor e controlla se l’immagine o la sezione è nascosta. Se esiste un’impostazione separata per l’immagine mobile, verifica che punti a un file disponibile. Poi prova la pagina pubblica sul telefono interessato.

I siti possono generare più dimensioni e lasciare la scelta al browser. Un telefono può richiedere una versione piccola mancante mentre un portatile usa una versione grande disponibile. Chiedi di confrontare gli URL selezionati alle dimensioni di schermo in cui l’immagine funziona e non funziona, poi di ripristinare la versione mancante. Le verifiche tecniche spiegano come individuare la selezione.

Se un’immagine nell’area visibile resta un segnaposto

Rimandare il caricamento di un’immagine più in basso nella pagina o di una diapositiva non ancora aperta può essere voluto. Indaga quando resta vuota dopo averla raggiunta o aver aperto la diapositiva e atteso il tempo necessario. Una richiesta fallita e una mai avviata richiedono correzioni diverse.

In una copia di prova, verifica l’impostazione della galleria o del caricamento differito su una sola pagina. Se l’immagine ricompare, fai correggere quel componente prima di estendere la modifica. Per l’immagine principale visibile all’apertura, valuta se il caricamento differito sia appropriato. La nostra guida al lazy loading spiega le alternative.

6. Confronta l’editor con ciò che ricevono i visitatori

Se l’immagine appare solo nell’editor, conferma di aver pubblicato la modifica sulla pagina giusta. Confronta poi l’indirizzo nella libreria con la richiesta della pagina pubblica. Un’anteprima privata e un file caricato accessibile al pubblico sono cose diverse.

Dopo aver corretto una pagina o un riferimento obsoleto, usa i comandi documentati del sistema di pubblicazione per aggiornare la cache della pagina o del file. Una rete di distribuzione dei contenuti, o CDN, può avere una propria cache. Cancellare i dati del browser non aggiorna la cache condivisa del sito.

Se il problema compare in un solo profilo del browser, prova senza estensioni e controlla le autorizzazioni del sito per quel profilo. La navigazione privata non esclude le estensioni in tutte le configurazioni. Registra la richiesta fallita prima di decidere se intervenire su un blocco dei contenuti o sul metodo di distribuzione del sito.

La sezione tecnica spiega come testare senza la normale cache HTTP del browser. La guida di MDN alla cache descrive cache del browser e cache condivise.

7. Modifica il file quando la causa è il formato o la dimensione

Controlla il tipo reale del file e i requisiti della destinazione prima di scegliere un convertitore. La conversione può risolvere un’incompatibilità di formato; non può ripristinare un indirizzo mancante o mostrare una sezione nascosta.

• Il file è HEIC o HEIF e la destinazione richiede JPG: usa HEIC in JPG per creare una copia come immagine fissa. Controlla il risultato e conserva l’originale. Una foto di iPhone potrebbe essere già JPEG, quindi verifica prima il formato.
• La piattaforma rifiuta SVG ma accetta PNG: crea una copia PNG con dimensioni in pixel adatte. Esamina la grafica prima di caricarla.
• Il file non si apre neppure sul tuo dispositivo: recupera un originale funzionante o esportalo di nuovo dall’applicazione che lo ha creato. Cambiare estensione non ripara dati danneggiati.
• Il caricamento supera un limite dichiarato: prepara una copia entro quel limite, poi verifica che il caricamento sia terminato e che la pagina usi il file caricato.

La guida ai formati di MDN confronta compatibilità dei browser e capacità dei formati. Se un SVG cambia aspetto dopo l’esportazione, consulta la guida SVG. Per un’immagine visibile ma poco nitida, usa la guida alle immagini sfocate.

Esempio: una foto di prodotto scompare su mobile

In questo scenario illustrativo, dopo la migrazione di un negozio una foto di prodotto funziona sul portatile ma risulta non disponibile sul telefono. L’originale nella libreria si apre, quindi la proprietaria controlla la richiesta effettiva del telefono.

Il telefono seleziona /media/blue-mug-640.webp, che restituisce 404. Il portatile usa /media/blue-mug-1280.webp. La migrazione ha copiato il file più grande ma ha omesso la versione piccola.

Chi gestisce il sito rigenera la dimensione mancante, verifica le altre versioni dichiarate e aggiorna eventuali riferimenti obsoleti. La proprietaria ricarica la pagina pubblica sul telefono e conferma che il file richiesto restituisce l’immagine corretta. La causa era un file generato assente; cambiare il formato dell’originale non riparerebbe quel riferimento.

8. Verifica la riparazione come un visitatore

Ripeti il test fallito sulla stessa pagina pubblica, con la stessa dimensione di schermo e diapositiva. Conferma che appaia l’immagine corretta e che resti disponibile dopo un ricaricamento. Prova senza accesso da amministratore se l’immagine è destinata a tutti.

Per una modifica a un modello o alla distribuzione, controlla un’altra pagina con lo stesso componente, sia su desktop sia su mobile. Annota brevemente la causa e il file o l’impostazione modificata.

Se qualcun altro deve completare la riparazione, invia URL della pagina, URL dell’immagine selezionata, ora del problema, dettagli di browser e dispositivo ed errore pertinente. Indica se l’immagine funziona nell’editor, direttamente in una nuova scheda o a un’altra dimensione di schermo. Rimuovi token privati e dati personali dai materiali condivisi pubblicamente.

Facoltativo: verifiche tecniche per chi gestisce il sito

Scegli le verifiche adatte agli indizi raccolti. Aiutano a distinguere un file non disponibile, una richiesta fallita e un’immagine caricata ma nascosta.

Esamina la richiesta dell’immagine in Network

1. Apri la pagina pubblica interessata. In Chrome scegli Altri strumenti → Strumenti per sviluppatori dal menu, poi Network. Gli altri browser offrono funzioni simili.
2. Lascia attiva la registrazione e ricarica. Seleziona il filtro Img o cerca il nome del file. Raggiungi l’immagine o apri la sua diapositiva se è questo ad avviare normalmente il caricamento.
3. Seleziona la richiesta. In Headers, annota Request URL, stato e intestazioni di risposta. Usa Preview o Response per esaminare ciò che è arrivato.
4. Se non trovi corrispondenze, elimina i filtri. L’URL potrebbe essere cambiato oppure uno script potrebbe recuperare l’immagine tramite Fetch/XHR.

Per confrontare un nuovo scaricamento, abilita Disable cache, lascia aperti gli strumenti e ricarica. Questo evita la normale cache HTTP del browser, non quella della CDN. Se interviene un service worker, controlla separatamente le risposte che ha memorizzato. Consulta il riferimento Network di Chrome.

Uno stato restringe l’indagine, ma non identifica ogni causa. MDN spiega i codici di stato HTTP e la normale convalida 304. Per errori di nome host o certificato, verifica DNS e HTTPS dell’host delle immagini.

La risposta dovrebbe contenere dati reali di immagine e un Content-Type adatto, come image/jpeg o image/webp. Un URL che termina in .jpg può restituire HTML, mentre un servizio può fornire legittimamente un altro formato dalla stessa estensione.

Se aprire l’indirizzo scarica il file

Controlla Content-Disposition oltre al tipo di contenuto. Una risposta con Content-Disposition: attachment può avviare il download quando apri direttamente l’indirizzo. Questo da solo non prova che l’immagine fallisca nella pagina: esamina anche la richiesta incorporata. Se hai copiato un link di download, usa l’URL di visualizzazione supportato dall’hosting. Consulta il riferimento Content-Disposition.

Trova l’URL dell’immagine responsive selezionata

In Chrome o Edge fai clic destro sull’immagine e scegli Ispeziona. In Elements, seleziona il vero <img>, non il contenitore o <picture>. Apri Console e digita questa espressione di sola lettura:

$0.currentSrc

$0 indica l’elemento selezionato più di recente in questi strumenti. Il risultato è l’indirizzo scelto, non una garanzia di caricamento riuscito. Verificalo in Network. Il riferimento Console Utilities spiega $0, mentre MDN documenta currentSrc.

Il browser può scegliere un file da srcset o da una sorgente <picture> corrispondente. Un src funzionante non ripara un candidato selezionato assente. Il ripiego di picture dipende da condizioni e supporto delle sorgenti; non fare affidamento su di esso per recuperare un 404 del file scelto. Consulta la selezione delle immagini responsive e il riferimento picture.

Risolvi i percorsi delle immagini in HTML e CSS

Su https://example.com/services/kitchens/, se la pagina non imposta un altro URL di base, queste due sorgenti richiedono posizioni diverse:

<img src="images/kitchen.jpg" alt="Cucina completata con mobili in rovere">
<img src="/images/kitchen.jpg" alt="Cucina completata con mobili in rovere">

La prima richiede /services/kitchens/images/kitchen.jpg; la seconda /images/kitchen.jpg sullo stesso host. Scegli l’indirizzo corrispondente alla pubblicazione effettiva, incluso un eventuale prefisso di sottocartella. MDN spiega i percorsi relativi e assoluti. In un file CSS esterno, un URL relativo si risolve rispetto all’indirizzo del foglio di stile; consulta il riferimento agli URL CSS.

Esamina il layout e il meccanismo di caricamento

In Elements → Computed, controlla l’immagine e gli elementi che la contengono: display: none, visibility: hidden, opacità zero, dimensioni collassate, ritagli o sovrapposizioni. Un’immagine di sfondo non assegna a un contenitore vuoto l’altezza della foto. Correggi la regola responsabile nell’editor o nel foglio di stile originale; una modifica temporanea negli strumenti scompare di solito ricaricando. Consulta la guida all’ispezione CSS di Chrome e il riferimento background-image.

Se l’URL reale esiste solo in data-src, verifica lo script che assegna la sorgente e gli errori Console pertinenti. Con loading="lazy" nativo, fornisci dimensioni adatte e assicurati che l’immagine abbia spazio nel layout prima di caricarsi. La guida al lazy loading del browser spiega il comportamento.

Content Security Policy: controlla se l’host previsto corrisponde a img-src, oppure a default-src quando non esiste una direttiva specifica per le immagini. Consulta il riferimento CSP sulle sorgenti di immagini.

Contenuti misti: un riferimento HTTP su una pagina HTTPS può essere aggiornato o bloccato secondo l’uso. Conferma che l’immagine sia disponibile via HTTPS e aggiorna il riferimento. Consulta le indicazioni MDN sui contenuti misti.

CORS e regole di incorporamento: mostrare una normale immagine di un’altra origine e leggerne i pixel tramite canvas richiede condizioni diverse. Aggiungere crossorigin può far fallire il caricamento se l’host non fornisce la risposta CORS necessaria. Controlla la documentazione CORS per le immagini e le eventuali restrizioni Cross-Origin Resource Policy segnalate.

Domande frequenti

Perché io vedo l’immagine e i visitatori no?

L’editor può mostrare un’anteprima temporanea o non pubblicata, e la tua sessione autenticata può avere accesso che manca ai visitatori. Prova la pagina pubblica senza quell’accesso. Se il file deve essere pubblico, usa il normale flusso dei media pubblici; altrimenti chiedi di verificare la visualizzazione autenticata.

Perché l’immagine si apre in una nuova scheda ma non nella pagina?

Confronta prima gli indirizzi esatti: la pagina può richiedere un’altra dimensione. Se coincidono, cerca nella richiesta incorporata errori di accesso o di regole del browser. Una richiesta riuscita ti indirizza poi verso visibilità e layout della pagina.

Una risposta 200 dimostra che l’immagine funziona?

No. Controlla il contenuto della risposta. Una pagina di accesso restituita con stato 200 non è un’immagine. Se la risposta contiene l’immagine corretta, prosegui con i messaggi pertinenti di Console e la visualizzazione nella pagina. Il codice da solo non conferma un risultato visibile.

Ridurre le dimensioni o comprimere ripara un’immagine non visualizzata?

Aiuta quando un caricamento supera un limite dichiarato o un’immagine troppo pesante si trasferisce lentamente. Un percorso sbagliato, una miniatura assente o una sezione nascosta richiedono un’altra correzione. Usa l’errore di caricamento o la richiesta per capire il problema prima di modificare il file.

Devo rinominare il file o cambiarne l’estensione?

Rinominalo per risolvere uno specifico problema di percorso o nome, poi aggiorna i riferimenti al vecchio nome. Rinominare .heic in .jpg non converte l’immagine. Usa un convertitore se il formato reale non è supportato e conserva l’originale.

Testo alternativo, robots.txt o Search Console faranno comparire l’immagine?

Il testo alternativo descrive l’immagine quando non si può vedere; non recupera il file. Le istruzioni robots e Search Console riguardano scansione e visibilità nella ricerca. Se un’immagine manca nella pagina di un visitatore, completa prima le verifiche di file, richiesta e layout.

Riassumi conChatGPT (si apre in una nuova scheda)Grok (si apre in una nuova scheda)Google (si apre in una nuova scheda)Perplexity (si apre in una nuova scheda)Claude (si apre in una nuova scheda)