Se un'immagine visualizzata ha proporzioni notevolmente diverse da quelle del file di origine (proporzioni naturali), l'immagine visualizzata potrebbe risultare distorta e creando potenzialmente un'esperienza utente spiacevole.
Errori del controllo delle proporzioni delle immagini di Lighthouse
Lighthouse segnala qualsiasi immagine con una dimensione visualizzata con una differenza maggiore di alcuni pixel rispetto alla dimensione prevista quando viene visualizzata con le proporzioni naturali:
Esistono due cause comuni di proporzioni errate dell'immagine:
- Un'immagine è impostata con valori espliciti di larghezza e altezza che differiscono dalle dimensioni dell'immagine di origine.
- Un'immagine è impostata su larghezza e altezza come percentuale di un contenitore di dimensioni variabili.
Assicurati che le immagini vengano visualizzate con le proporzioni corrette
Usa una CDN immagine
Una CDN immagine può semplificare l'automazione del processo di creazione di versioni di dimensioni diverse delle immagini. Consulta gli articoli Utilizzare le CDN di immagini per ottimizzare le immagini per una panoramica e Come installare la CDN di immagini Thumbor per un codelab pratico.
Controlla il CSS che influisce sulle proporzioni dell'immagine.
Se hai difficoltà a trovare il CSS che causa le proporzioni errate, Chrome DevTools può mostrarti le dichiarazioni CSS che riguardano una determinata immagine. Per ulteriori informazioni, consulta la pagina Visualizzare solo il CSS applicato a un elemento di Google.
Controlla gli attributi width e height dell'immagine nel codice HTML
Se possibile, è buona norma specificare gli attributi width e height di ogni immagine nel codice HTML, in modo che il browser possa assegnare spazio all'immagine.
Questo approccio aiuta a garantire che il contenuto sotto l'immagine non cambi dopo il caricamento dell'immagine.
Tuttavia, specificare le dimensioni dell'immagine in HTML può essere difficile se stai lavorando con immagini adattabili, perché non è possibile conoscere la larghezza e l'altezza fino a quando non conosci le dimensioni dell'area visibile. Potresti usare la libreria delle proporzioni CSS o le caselle delle proporzioni per mantenere le proporzioni per le immagini adattabili.
Infine, consulta il post Pubblicare immagini con dimensioni corrette per scoprire come pubblicare immagini della dimensione giusta per il dispositivo di ogni utente.