Esegui Lighthouse
Questo glitch è abbastanza piccolo da poter essere esaminato manualmente. 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 premi A schermo intero .
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Assicurati che la casella di controllo Rendimento sia selezionata nell'elenco Categorie.
- Fai clic sul pulsante Genera report.
- Cerca i risultati del controllo Usa 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.
- Controlla
flower_logo.png
nel riquadro Elementi di DevTools.
Questo è il codice CSS per flower_logo.png
:
.logo {
width: 50px;
height: 50px;
}
La larghezza CSS di questa immagine è 50 pixel, quindi flower_logo.png
deve essere ridimensionata in modo da corrispondere. Puoi utilizzare ImageMagick per ridimensionare l'immagine in modo che si adatti. ImageMagick è uno strumento a riga di comando per l'editing delle immagini preinstallato nell'ambiente del codelab.
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potresti dover utilizzare l'opzione Schermo intero).
- Nella console, digita:
convert flower_logo.png -resize 50x50 flower_logo.png
Correggi flower_photo.jpg
Poi, correggi la foto dei fiori viola.
- Controlla
flower_photo.jpg
nel riquadro degli elementi di DevTools.
Questo è il codice 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 equivale all'1% della larghezza del browser).
Le dimensioni ideali per questa immagine dipendono dal dispositivo su cui viene visualizzata, quindi devi ridimensionarla in modo che siano adatte 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 oltre il 95%dei visitatori di questo sito utilizza risoluzioni dello schermo di larghezza pari o inferiore 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à allungata per coprire l'area. L'immagine ridimensionata è ancora abbastanza grande, quindi gli effetti di questa operazione non dovrebbero essere molto evidenti.
- Utilizza ImageMagick per ridimensionare l'immagine in modo che abbia 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
Eseguire di nuovo Lighthouse
- Esegui di nuovo il controllo del rendimento di Lighthouse per verificare di aver ridimensionato correttamente le immagini.
… e non va a buon fine. Perché?
Lighthouse esegue i test su un Nexus 5X. Nexus 5X ha uno schermo da 1080 x 1920 pixel.
Per Nexus 5x, le dimensioni ottimali di flower_photo.jpg
sono 540 pixel di larghezza (1080 pixel * 5). È molto più piccola della nostra immagine ridimensionata.
Vuoi ridurre ulteriormente le dimensioni dell'immagine? È probabile. Tuttavia, la risposta a questa domanda non è sempre chiara.
Il compromesso è tra la qualità delle immagini sui dispositivi ad alta risoluzione e le prestazioni. È facile sovrastimare la meticolosità con cui gli utenti esamineranno le immagini, quindi probabilmente dovresti ridurle di dimensioni, ma esistono sicuramente casi d'uso in cui la qualità delle immagini è più importante.
La buona notizia è che puoi aggirare del tutto questo compromesso utilizzando le immagini adattabili per pubblicare più dimensioni di immagini. Scopri di più su questo argomento nella guida alle immagini adattabili.