Sito web responsive che non adatta le immagini: perché succede e come risolverlo
Un sito web che dovrebbe essere responsive ma mostra immagini sballate su smartphone o tablet è un problema comune. Le foto appaiono tagliate, troppo grandi o addirittura non si caricano. Non è un difetto di progettazione, ma spesso di implementazione. Capire perché accade e come sistemarlo evita di perdere clienti e posizioni nei motori di ricerca.
Perché le immagini non si adattano sui dispositivi
Il responsive design funziona se il codice riconosce la larghezza dello schermo e ridimensiona gli elementi. Le immagini, però, spesso vengono inserite con dimensioni fisse o senza regole di adattamento.
Un errore classico è usare il tag `<img>` senza specificare l’altezza massima o minima. Il browser allora mostra l’immagine come è, senza considerare lo spazio disponibile.
Anche i CSS scritti male peggiorano il problema. Una regola come `img { width: 100%; }` può allungare le foto oltre i bordi su schermi stretti, mentre `max-width: 100%;` le taglia correttamente.
I sintomi di un sito con immagini non responsive
Su smartphone: le foto occupano tutta la larghezza dello schermo, rendendo il testo illeggibile o costringendo lo scorrimento orizzontale.
Su tablet: le immagini appaiono sfocate o con bordi neri, perché il browser non sa come ridimensionarle senza perdere qualità.
Nel desktop: le foto sono troppo piccole e il layout sembra vuoto, perché il sistema non sa come scalarle verso l’alto.
| Dispositivo | Comportamento immagine non responsive | Comportamento immagine responsive |
|---|---|---|
| Smartphone | Tagliata ai bordi o troppo grande | Adattata alla larghezza dello schermo |
| Tablet | Bordi neri o sfocatura | Ridimensionata senza perdita di qualità |
| Desktop | Troppo piccola o allungata | Scalata proporzionalmente al contenitore |
Gli errori più comuni nella gestione delle immagini
Usare file troppo pesanti (es. JPEG da 5 MB per una foto di menu). Anche con un buon responsive design, il caricamento lento fa abbandonare la pagina.
Non specificare l’attributo `srcset` nel tag `<img>`. Questo impedisce al browser di scegliere automaticamente la versione ottimizzata per ogni dispositivo.
Dimenticare di aggiornare le immagini dopo un cambio di template. Vecchie foto con dimensioni fisse rimangono bloccate nel codice.
I plugin per gallerie o slider spesso aggiungono codice pesante. Se non sono aggiornati, possono sovrascrivere le regole responsive del tema principale.
Come si risolve: le soluzioni tecniche
Aggiungere `max-width: 100%; height: auto;` a tutte le immagini nel CSS. Questo le fa adattare al contenitore senza deformarle.
Usare il formato WebP invece di JPEG o PNG. Occupano fino al 30% in meno e si comprimono meglio per il web.
Implementare il tag `srcset` per offrire versioni diverse dell’immagine a seconda della risoluzione dello schermo.
Strumenti per testare e ottimizzare le immagini
Google PageSpeed Insights segnala le immagini non ottimizzate e suggerisce come ridurne le dimensioni.
Squoosh di Google consente di convertire e comprimere file senza perdere qualità visiva.
Browser DevTools (F12) permette di ispezionare come il sito rende le immagini su diversi dispositivi virtuali.
Controlli prima di pubblicare
- Verificare che tutte le immagini abbiano un `max-width: 100%` nel CSS.
- Testare il sito su Chrome DevTools con emulazione di smartphone e tablet.
- Assicurarsi che il formato WebP sia supportato dal server (altrimenti usare fallback su JPEG).
L’impatto sulle prenotazioni e sul SEO
Un sito con immagini sballate su mobile fa scappare i clienti. Il 53% degli utenti abbandona una pagina se il caricamento è lento o il layout è caotico (dato medio rilevato da studi su UX).
Google penalizza i siti non ottimizzati per mobile. Il ranking dipende dalla velocità di caricamento e dalla corretta visualizzazione su tutti i dispositivi.
Per i ristoranti, le foto dei piatti sono decisive. Se non si vedono bene, il cliente non prenota.
Quando serve l’aiuto di un professionista
Se il sito usa un CMS complesso (es. WordPress con decine di plugin), un tecnico può pulire il codice e ottimizzare le regole responsive.
Nei casi di template personalizzato, può servire riscrivere le query CSS per gestire le immagini in modo dinamico.
Per siti con alto traffico, un CDN (Content Delivery Network) accelera il caricamento delle immagini su tutti i dispositivi.
Come ottimizzare le immagini di un sito responsive in 5 passaggi
Segui questi passaggi per assicurarti che le immagini si adattino correttamente su ogni dispositivo.
- 11. Comprimi le immagini
Usa uno strumento come TinyPNG o Squoosh per ridurre le dimensioni dei file senza perdere qualità. Mira a dimensioni inferiori a 100 KB per le foto di menu.
- 22. Aggiungi il tag srcset
Modifica il tag `<img>` così: `<img src="foto.jpg" srcset="foto-480w.jpg 480w, foto-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px">`. Questo dice al browser quali versioni usare.
- 33. Aggiorna il CSS
Aggiungi questa regola a tutti i tag `<img>`: `img { max-width: 100%; height: auto; }`. Evita `width: 100%` senza `max-width`, altrimenti le foto si allungano.
- 44. Test su dispositivi reali
Apri il sito su smartphone, tablet e desktop. Usa Chrome DevTools per emulare diversi schermi e verifica che le immagini non fuoriescano dai contenitori.
- 55. Abilita la cache del browser
Configura il server perché le immagini caricate una volta vengano memorizzate nella cache. Riduce i tempi di caricamento alle visite successive.
Frequently asked questions
Le immagini troppo grandi rallentano il sito anche se sono responsive?
Sì. Anche se si adattano allo schermo, file pesanti aumentano il tempo di caricamento. Comprimi sempre le immagini prima di caricarle, soprattutto per i siti di ristoranti dove le foto dei piatti sono decisive.
Posso usare lo stesso formato per tutte le immagini?
No. Usa WebP per foto e icone, JPEG per immagini con gradazioni di colore (es. sfondi), e PNG solo per grafiche con trasparenza (es. loghi). Ogni formato ha un caso d’uso ottimale.
Il mio sito usa WordPress: quali plugin sono migliori per le immagini?
Plugin come Smush o EWWW Image Optimizer comprimono automaticamente le immagini al caricamento. Evita plugin che aggiungono troppi script, perché rallentano il sito.
Perché alcune immagini si caricano dopo il resto della pagina?
Può dipendere da un server lento o da immagini non ottimizzate. Usa un CDN come Cloudflare per distribuire le immagini vicino agli utenti e ridurre i tempi di attesa.
Devo rifare tutto il sito se le immagini non sono responsive?
Non sempre. Spesso basta aggiustare il CSS e ottimizzare i file. In casi complessi, un tecnico può modificare solo le parti che gestiscono le immagini senza toccare il resto.