Immagini responsive: le dimensioni giuste per telefono e computer

Inizia dall’editor del sito

In WordPress o in un servizio per creare siti, verifica prima come funziona il blocco immagine esistente. Il sito potrebbe già generare versioni più piccole da un unico caricamento.

1. Carica un originale nitido con dettagli sufficienti per la vista più grande necessaria.
2. Scegli una risoluzione adatta nel blocco, se questo controllo è disponibile. Restringere il blocco non cambia necessariamente il file scaricato.
3. Visualizza l’anteprima della pagina su telefono e computer. Controlla il ritaglio, i testi piccoli e la nitidezza.

Chi gestisce il sito può verificare che la pagina fornisca dimensioni adatte. Se modifichi il codice HTML, gli esempi qui sotto mostrano come collegare i file esportati.

Cosa sono le immagini responsive?

Un layout responsive cambia il modo in cui la pagina si adatta allo schermo. La distribuzione responsive cambia il file immagine richiesto dal browser. Sono attività collegate ma diverse: rimpicciolire visivamente un’immagine con CSS non riduce necessariamente i dati scaricati.

Se una foto da 3000 pixel appare in una piccola scheda, il visitatore può scaricare comunque il file intero se non offri alternative. Le immagini responsive forniscono versioni adatte allo spazio disponibile, migliorando l’efficienza senza perdere la nitidezza necessaria.

Ci sono due scelte. Il cambio di risoluzione mantiene la composizione e offre dimensioni in pixel diverse. La direzione artistica cambia ritaglio o composizione quando un’immagine larga non funziona in un layout stretto. La guida MDN alle immagini responsive spiega la differenza.

Larghezza dello schermo, spazio visualizzato e pixel

Conta prima la larghezza dello spazio effettivo dell’immagine nella pagina, misurata in pixel CSS. Uno schermo mobile può essere largo 390 pixel, ma con margini di 16 pixel per lato l’immagine occupa 358 pixel CSS. Su desktop, una scheda in tre colonne può occupare solo 320 pixel CSS.

Un pixel CSS misura la dimensione visibile nel layout. Su uno schermo ad alta densità può usare più pixel fisici. Un’immagine nitida può quindi richiedere più pixel della sua larghezza visualizzata.

La densità è il secondo fattore. Come stima iniziale, moltiplica la larghezza disponibile per il rapporto di pixel del dispositivo. Uno spazio di 358 pixel CSS su uno schermo 2× suggerisce circa 716 pixel immagine. È un punto di partenza per le versioni da creare, non la promessa del file esatto che ogni browser richiederà.

Uno schermo desktop non giustifica automaticamente il file più grande. Viceversa, un’immagine molto piccola per tutti i telefoni può apparire poco nitida sui display ad alta densità. Controlla lo spazio reale e il risultato visibile.

Come creare dimensioni utili

1. Trova la massima larghezza di visualizzazione prevista. Controlla la colonna del contenuto o la scheda, non l’intero schermo.
2. Scegli un insieme rappresentativo di larghezze. Per un’immagine limitata a 800 pixel CSS, 400, 800, 1200 e 1600 pixel sono una prima prova sensata, non una serie obbligatoria per ogni sito.
3. Esporta ogni versione dallo stesso originale. Usa lo strumento di ridimensionamento Pixilo e mantieni le proporzioni per il cambio di risoluzione. Conserva l’originale separatamente.
4. Confronta formato e qualità. Prova WebP o JPG → AVIF / PNG → AVIF / WebP → AVIF quando il sistema li supporta. Il risparmio non deve derivare da testo illeggibile o dettagli mancanti.
5. Carica i file e collegali alla pagina. Pixilo crea file ridimensionati; non configura l’HTML, il CMS o la CDN del sito.
6. Verifica la distribuzione sulla pagina pubblicata. Controlla file richiesto, dimensioni e aspetto a più larghezze dello schermo.

Non ingrandire un originale piccolo solo per raggiungere un numero. L’ingrandimento non recupera dettagli reali. Se la sorgente è insufficiente, mostra l’immagine più piccola o procurati un originale migliore. La guida al ridimensionamento senza deformazioni spiega come mantenere le proporzioni.

Cosa controllare in WordPress o in un altro CMS

Il sistema può già generare più dimensioni e codice responsive. Esamina la pagina finale prima di aggiungere una configurazione manuale parallela. Verifica che le dimensioni generate corrispondano agli spazi del tema e che il formato sia supportato lungo tutto il processo.

Un plugin o una CDN può trasformare i file su richiesta. Controlla quello che riceve il browser, non solo il nome dell’originale caricato. Sostituire la sorgente può lasciare copie in cache. Assicurati che venga distribuita la nuova versione prima di giudicarla.

Per le istruzioni specifiche, leggi come ottimizzare le immagini di WordPress. L’obiettivo è una distribuzione prevedibile, in cui ogni componente ha un compito chiaro.

Facoltativo: usare srcset e sizes in HTML

L’esempio mostra un’immagine che occupa la larghezza dello schermo meno 32 pixel di margini complessivi, fino a un massimo di 800 pixel CSS. I nomi sono indicativi: carica le tue versioni e usa percorsi e dimensioni reali.

<img
  src="/images/coast-800.webp"
  srcset="/images/coast-400.webp 400w,
          /images/coast-800.webp 800w,
          /images/coast-1200.webp 1200w,
          /images/coast-1600.webp 1600w"
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600" height="1067"
  alt="Costa rocciosa accanto a un mare blu calmo">

I descrittori w devono corrispondere alla larghezza reale dei file. sizes descrive la larghezza di visualizzazione prevista e aiuta il browser a scegliere. Non imposta la larghezza visiva: il CSS deve corrispondere al layout descritto.

Qui un contenitore limitato a 800 pixel e un’immagine con display: block; width: 100%; height: auto; danno il ridimensionamento previsto. Non copiare sizes in una griglia con un layout diverso. Descrivere una piccola scheda desktop come 100vw può provocare un download troppo grande.

Il browser considera anche densità e altre condizioni: aspettati una versione adatta, non un nome garantito. Non mescolare descrittori di larghezza e di densità come 2x nella stessa lista. La documentazione MDN su srcset spiega le regole.

Quando il telefono richiede un ritaglio diverso

Un banner largo può diventare troppo basso sul telefono, lasciando il soggetto minuscolo anche se nitido. Più pixel non risolvono la composizione. Crea un ritaglio più stretto che mantenga il soggetto visibile e selezionalo con picture e una condizione media.

Usa Ritaglia immagine per preparare l’alternativa. Mantieni il contesto necessario a capire la foto. Controlla dove cadrà un testo sovrapposto: un ritaglio bello da solo può collocare il soggetto sotto un pulsante o un titolo.

La direzione artistica richiede più manutenzione perché le composizioni sono distinte. Usala quando serve al layout stretto, non per ogni immagine. Se le proporzioni cambiano, il layout deve riservare lo spazio giusto a ogni punto di interruzione. La documentazione di picture descrive la scelta della sorgente.

Dimensioni, caricamento differito e immagine principale

Fornisci attributi width e height corretti per comunicare le proporzioni prima del caricamento. Con un CSS proporzionale aiutano a riservare spazio. Se il CSS fissa entrambe le dimensioni o ritaglia diversamente, verifica che lo spazio corrisponda al risultato.

Le immagini molto sotto la parte inizialmente visibile possono usare loading="lazy". Un’immagine importante visibile appena si apre la pagina dovrebbe normalmente caricarsi senza questa opzione. Ritardarla può peggiorare l’esperienza anche con un file piccolo. Consulta la guida web.dev al caricamento delle immagini nel browser.

Se le misurazioni identificano un’immagine come elemento Largest Contentful Paint, valuta fetchpriority="high" per quella sola immagine. Non assegnare priorità alta a tutte. Le dimensioni responsive sono una parte della strategia: non correggono un server lento o un’immagine principale scoperta tardi.

Come verificare le immagini responsive

1. Apri la pagina pubblicata a una larghezza da telefono, tablet e desktop.
2. Controlla larghezza visualizzata e URL scelto. La proprietà currentSrc dell’immagine identifica la risorsa selezionata.
3. Controlla la richiesta di rete per il peso trasferito. Disattiva la cache quando serve una prova nuova.
4. Confronta l’immagine alle dimensioni normali, compresi testo, bordi e ritaglio.
5. Ricarica da zero a ogni dimensione. Ridimensionare una pagina già caricata non simula in modo affidabile la scelta durante una nuova visita.
6. Misura il caricamento prima e dopo la modifica in condizioni confrontabili.

Se il telefono richiede ancora un file enorme, controlla che la pagina finale contenga srcset, che i descrittori corrispondano alle larghezze reali e che sizes descriva lo spazio effettivo. Se l’immagine è poco nitida, controlla la risoluzione prima di aumentare la qualità. Se è deformata, correggi le proporzioni, non aggiungere solo un file più grande.

Immagini responsive e SEO

La distribuzione responsive evita download inutili, ma non garantisce posizioni migliori. Mantieni l’immagine pertinente, fornisci un testo alternativo utile e conserva img con un src valido quando usi picture. La documentazione Google sulla SEO delle immagini descrive individuazione e codice responsive.

Per il rapporto tra caricamento, spostamenti del layout ed esperienza, consulta immagini e Core Web Vitals. Misura la pagina reale: un file più piccolo non dimostra che tutte le metriche migliorino.

Domande frequenti

Basta width: 100% per un’immagine responsive?

Può adattarla visivamente al contenitore, ma non crea versioni più piccole da scaricare. Per quello servono file adeguati e codice responsive.

Serve un’immagine diversa per ogni telefono?

No. Offri una serie gestibile di dimensioni adatte al layout. Il browser sceglie; non occorre identificare ogni modello.

Ogni immagine deve essere larga il doppio dello spazio visualizzato?

No. Una versione 2× è utile per alcuni display, non è un obbligo universale. Bilancia nitidezza e peso, lasciando disponibili versioni più piccole.

Pixilo può aggiungere srcset al mio sito?

Pixilo aiuta a creare i file ridimensionati. Il sito, il template, il CMS o il servizio immagini deve pubblicarli e configurare il codice responsive.

Riassumi conChatGPT (si apre in una nuova scheda)Grok (si apre in una nuova scheda)Google (si apre in una nuova scheda)Perplexity (si apre in una nuova scheda)Claude (si apre in una nuova scheda)