Pubblica immagini con dimensioni corrette

Katie Hempenius
Katie Hempenius

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.

  1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero schermo intero.
  2. Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  3. Fai clic sulla scheda Lighthouse.
  4. Assicurati che la casella di controllo Rendimento sia selezionata nell'elenco Categorie.
  5. Fai clic sul pulsante Genera report.
  6. Cerca i risultati del controllo Usa immagini di dimensioni adeguate.

Il controllo delle immagini di dimensioni adeguate non va a buon fine in Lighthouse.

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.

Il 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.

  1. Fai clic su Remix per modificare per rendere il progetto modificabile.
  2. Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potresti dover utilizzare l'opzione Schermo intero).
  3. 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.

Il riquadro degli elementi 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:

Google Analytics per la risoluzione degli schermi.

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.

Controllo di Lighthouse sulle dimensioni delle 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.