Esegui Lighthouse
Questo glitch è abbastanza piccolo da consentire l'ispezione manuale delle sue immagini. Tuttavia, per la maggior parte dei siti web, è essenziale utilizzare uno strumento come Lighthouse per automatizzare questa operazione.
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
. - Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Verifica che la casella di controllo Rendimento nell'elenco Categorie sia selezionata.
- Fai clic sul pulsante Genera report.
- Cerca i risultati del controllo Immagini di dimensioni adeguate.
Il controllo Lighthouse mostra che è necessario ridimensionare entrambe le immagini di questa pagina.
Correggi flower_logo.png
Inizia dalla parte superiore della pagina e correggi l'immagine del logo.
- Esamina
flower_logo.pngnel riquadro Elementi DevTools.
Questo è il CSS per flower_logo.png:
.logo {
width: 50px;
height: 50px;
}
La larghezza CSS di questa immagine è di 50 pixel, quindi flower_logo.png deve essere ridimensionato di conseguenza. Puoi utilizzare ImageMagick per ridimensionare l'immagine e adattarla. ImageMagick è uno strumento di interfaccia a riga di comando
per la modifica delle immagini preinstallato nell'ambiente codelab.
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potrebbe essere necessario utilizzare l'opzione Schermo intero).
- Nella console, digita:
convert flower_logo.png -resize 50x50 flower_logo.png
Correggi foto_fiore.jpg
Ora correggi la foto dei fiori viola.
- Esamina
flower_photo.jpgnel riquadro degli elementi di DevTools.
Questo è il CSS per flower_photo.jpg:
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw imposta la larghezza CSS di flower_photo.jpg su "metà della larghezza
del browser".
(1vw corrisponde all'1% della larghezza del browser).
Le dimensioni ideali per questa immagine dipendono dal dispositivo su cui viene visualizzata, quindi devi ridimensionarla a una dimensione adatta alla maggior parte degli utenti. Puoi controllare i dati di analisi per scoprire quali risoluzioni dello schermo sono comuni tra i tuoi utenti:
Questi dati indicano che più del 95%dei visitatori di questo sito utilizza risoluzioni dello schermo pari o inferiori a 1920 pixel.
Utilizzando queste informazioni, possiamo calcolare la larghezza dell'immagine: (1920 pixel di larghezza) * (50% della larghezza del browser) = 960 pixel
Con risoluzioni superiori a 1920 pixel di larghezza, l'immagine verrà estesa in modo da coprire l'area. L'immagine ridimensionata è comunque abbastanza grande, quindi gli effetti non dovrebbero essere molto evidenti.
- Utilizza ImageMagick per ridimensionare l'immagine a una larghezza di 960 pixel. Nel tipo di terminale:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg
# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg
Esegui di nuovo Lighthouse
- Esegui di nuovo il controllo delle prestazioni di Lighthouse per verificare di aver ridimensionato le immagini correttamente.
... E fallisce! Why is that?
Lighthouse esegue i test su un Nexus 5x. Il Nexus 5x ha uno schermo da 1080 x 1920.
Per il Nexus 5x, la dimensione ottimale di flower_photo.jpg sarebbe 540 pixel
di larghezza (1080 pixel * . 5). È molto più piccola dell'immagine ridimensionata.
Devi ridimensionare l'immagine in modo che sia ancora più piccola? È probabile. Tuttavia, la risposta a questo problema non è sempre chiara.
Il compromesso qui è tra la qualità delle immagini sui dispositivi ad alta risoluzione e le prestazioni. È facile sovrastimare l'attenzione degli utenti nell'ispezione delle immagini, quindi probabilmente è consigliabile ridurle, ma ci sono sicuramente casi d'uso in cui la qualità delle immagini è più importante.
La buona notizia è che puoi bypassare del tutto questo compromesso utilizzando immagini adattabili per pubblicare immagini di dimensioni diverse. Per scoprire di più, consulta la guida alle immagini adattabili.