Il vecchio detto dice che "un'immagine vale più di mille parole". Questo è particolarmente vero sul Web, dove l'attenzione è notoriamente breve e quindi l'immagine giusta può davvero creare o distruggere un sito attirando la giusta attenzione e coinvolgendo i visitatori della pagina abbastanza a lungo da imparare ciò di cui hanno bisogno per imparare o eseguire uno specifico azione che segnala una "vittoria" per il sito. Sì, quando si tratta di un sito Web, le immagini possono effettivamente valere più di mille parole!
Quindi, con l'importanza delle immagini online stabilite, consideriamo in seguito qual è il tuo sito web che dice se un'immagine che dovrebbe essere presente sul sito non viene caricata? Questo può accadere se hai immagini inline che fanno parte delle immagini HTML o di sfondo applicate con CSS (e probabilmente il tuo sito ne ha entrambe). La linea di fondo è che quando un grafico non riesce a caricare su una pagina, rende l'aspetto del design rotto e, in alcuni casi, può distruggere completamente l'esperienza utente su quel sito. Le "mille parole" che l'immagine sta inviando non sono certamente positive!
Diamo un'occhiata ad alcuni dei motivi più comuni per cui le immagini non sarebbero state caricate su un sito, nonché a cosa dovresti prestare attenzione quando risolvi questo problema durante i test del sito web.
Percorsi file errati
Quando aggiungi immagini al file HTML o CSS di un sito, devi creare un percorso per la posizione nella struttura di directory in cui risiedono tali file. Questo è il codice che indica al browser dove cercare e recuperare l'immagine. Nella maggior parte dei casi, questo sarebbe all'interno di una cartella denominata "immagini". Se il percorso di questa cartella e i file al suo interno non sono corretti, le immagini non verranno caricate correttamente perché il browser non sarà in grado di recuperare i file corretti. Seguirà il percorso a cui l'hai detto, ma colpirà un vicolo cieco e, invece di visualizzare l'immagine appropriata, verrà visualizzato in bianco.
Il passaggio 1 nel debug dei problemi di caricamento delle immagini è quello di assicurarsi che il percorso del file che hai codificato sia corretto. Forse hai specificato la directory sbagliata o non hai elencato correttamente il percorso di quella directory. Se questo non è il caso, potresti avere un altro problema con quel percorso. Continuare a leggere!
Nomi dei file errati
Mentre esamini i percorsi dei file per i tuoi file, assicurati anche di aver digitato correttamente il nome dell'immagine. Nella nostra esperienza, nomi errati o errori di ortografia sono la causa più comune dei problemi di caricamento delle immagini. Ricorda, i browser Web sono molto spietati quando si tratta di nomi di file. Se dimentichi una lettera per sbaglio o usi la lettera sbagliata, il browser non cercherà un file simile e dirà "oh, probabilmente intendevi questo, giusto?" No - se il file è scritto erroneamente, anche se è chiuso, non verrà caricato sulla pagina.
Estensione file errata
In alcuni casi, potresti avere il nome del file scritto correttamente, ma l'estensione del file potrebbe essere errata. Se la tua immagine è un file .jpg, ma il tuo HTML sta cercando un file .png, ci sarà un problema. Assicurati di utilizzare il tipo di file corretto per ogni immagine, quindi assicurati di aver chiamato per quella stessa estensione nel codice del tuo sito web.
Cerca anche la maiuscole e minuscole. Se il tuo file termina con .JPG, con le lettere tutte in maiuscolo, ma il tuo codice fa riferimento a .jpg, tutto in minuscolo, ci sono alcuni server Web che vedranno che questi due sono diversi, anche se sono gli stessi gruppi di lettere. Conta la sensibilità al maiuscolo Questo è il motivo per cui salviamo sempre i nostri file con tutte le lettere minuscole. Ciò ci consente di utilizzare sempre lettere minuscole nel nostro codice, eliminando un possibile problema che potremmo avere con i nostri file di immagine.
I file sono mancanti
Se i percorsi dei file di immagine sono corretti e anche il nome e l'estensione del file sono privi di errori, l'elemento successivo da verificare è assicurarsi che i file siano stati effettivamente caricati sul server web. Trascurare di caricare file su quel server quando viene lanciato un sito è un errore comune che è facile trascurare.
Come risolvi questo problema? Carica quelle immagini, aggiorna la tua pagina web e dovrebbe immediatamente visualizzare i file come previsto. Puoi anche provare a eliminare l'immagine sul server e ricaricarla. Può sembrare strano, ma abbiamo visto questo lavoro più di una volta. A volte i file vengono danneggiati, quindi questo metodo "cancella e sostituisci" può finire per aiutare.
Il sito Web che ospita le immagini è inattivo
In genere, desideri ospitare le immagini che il tuo sito utilizza sul tuo server, ma in alcuni casi potresti utilizzare immagini ospitate altrove. Se il sito che ospita l'immagine non funziona, le immagini non verranno caricate.
Problema di trasferimento
Se un file immagine viene caricato da un dominio esterno o dal tuo, c'è sempre la possibilità che possa esserci un problema di trasferimento per quel file quando viene prima richiesto dal browser. Questo non dovrebbe essere un evento comune (se lo è, potrebbe essere necessario cercare un nuovo provider di hosting), ma può accadere di volta in volta.
Il lato sfortunato di questo problema è che non c'è davvero nulla che tu possa fare a riguardo poiché si tratta di un problema al di fuori del tuo controllo. La buona notizia è che si tratta di un problema temporaneo che viene spesso risolto abbastanza rapidamente. Ad esempio, quando qualcuno vede una pagina dall'aspetto spezzato e la aggiorna, da sola spesso risolve il problema e carica correttamente le immagini. Se vedi un'immagine spezzata, aggiorna il browser per vedere se forse è stato solo un problema di trasmissione su la tua richiesta iniziale
Alcune note finali
Quando pensi alle immagini e alle preoccupazioni di caricamento, due cose da tenere presente sono l'uso corretto dei tag ALT e la velocità del tuo sito web e le prestazioni generali.
ALT, o "testo alternativo", i tag sono ciò che viene visualizzato da un browser se un'immagine non riesce a caricare. Sono anche una componente importante nella creazione di siti Web accessibili che possono essere utilizzati da persone con determinate disabilità. Ogni immagine in linea nel tuo sito dovrebbe avere un tag ALT appropriato. Nota che le immagini applicate con i CSS non hanno questo attributo.
Per quanto riguarda le prestazioni del sito Web, il caricamento di troppe immagini o anche solo alcune immagini giganti che non sono ottimizzate correttamente per la pubblicazione sul Web, avrà un impatto negativo sulla velocità di caricamento. Per questo motivo, assicurati di verificare l'impatto di qualsiasi immagine che utilizzi nella progettazione del tuo sito e di adottare le misure necessarie per migliorare le prestazioni di quel sito, pur continuando a creare l'aspetto generale adatto al tuo progetto di sito web.
