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 Schermo intero .
- Premi "Ctrl+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 di Lighthouse mostra che entrambe le immagini di questa pagina devono essere ridimensionate.
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 foto_fiore.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 tuoi 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.
Con 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
Esegui di nuovo Lighthouse
- Esegui di nuovo il controllo delle prestazioni 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.
Lo svantaggio qui è tra qualità delle immagini su dispositivi ad alta risoluzione e 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 completamente questo compromesso utilizzando immagini reattive per pubblicare immagini di dimensioni diverse. Scopri di più su questo argomento nella guida alle immagini adattabili.