Hai appena scaricato un file per il tuo nuovo sito web o per un post sui social e ti rendi conto che qualcosa non va. L'immagine sembra sgranata oppure è talmente pesante che il caricamento della pagina ci mette una vita, facendoti perdere visitatori preziosi in pochi secondi. La domanda che ti balza in testa è immediata: What Size Is This Image e come faccio a sistemarla senza impazzire tra mille programmi diversi? Non si tratta solo di estetica. Se gestisci un blog o un e-commerce in Italia, dove la velocità della connessione mobile non è sempre ai massimi livelli europei, ignorare le dimensioni dei tuoi contenuti visivi è un suicidio digitale.
Perché le dimensioni contano davvero nel web moderno
Molti pensano che basti guardare un'immagine sullo schermo per capire se va bene. Sbagliato. Uno schermo Retina o un display 4K possono ingannarti, mostrandoti nitido un file che in realtà ha una densità di pixel insufficiente per la stampa o eccessiva per il web. Quando ti chiedi What Size Is This Image, devi distinguere tra due concetti che spesso vengono confusi: le dimensioni fisiche in pixel e il peso del file in KB o MB.
Se carichi una foto da 10 MB scattata con la tua reflex direttamente su WordPress, stai rallentando il server. Google premia i siti veloci. Il Core Web Vitals, un insieme di metriche usate da Mountain View per valutare l'esperienza utente, tiene conto di quanto velocemente gli elementi visivi appaiono sullo schermo. Un file troppo grande blocca il rendering della pagina. La gente si stufa e se ne va. È un fatto.
Il mito della risoluzione a 72 DPI
C'è questa vecchia idea che circola negli uffici grafici da decenni: le immagini per il web devono essere a 72 DPI. Ti svelo un segreto: ai browser non frega nulla dei DPI. I DPI, ovvero punti per pollice, servono solo quando devi stampare su carta. Per il web contano solo i pixel totali. Se hai un'immagine di 1200x800 pixel, quella sarà la sua dimensione indipendentemente dal valore DPI impostato nel software. Non perdere tempo a cambiare questo parametro se il tuo obiettivo è caricare la foto su Instagram o sul tuo sito.
Peso del file contro dimensioni in pixel
Puoi avere un'immagine enorme di 4000 pixel che pesa pochissimo perché è stata compressa brutalmente, perdendo ogni dettaglio. Oppure un'icona minuscola che pesa tantissimo perché è salvata in un formato non ottimizzato come il BMP o un PNG senza compressione. Il trucco sta nel trovare l'equilibrio. Io consiglio sempre di puntare a file sotto i 200 KB per le immagini grandi che occupano tutta la larghezza della pagina e sotto i 50 KB per le miniature.
Come scoprire What Size Is This Image su ogni dispositivo
Non serve essere un esperto di Photoshop per ottenere queste informazioni. Ogni sistema operativo ha strumenti integrati che ti dicono tutto in due clic. Spesso le persone complicano le cose cercando tool online pieni di pubblicità, quando la soluzione è già sotto il loro naso.
Se usi Windows, basta fare clic con il tasto destro sul file e selezionare Proprietà. Nella scheda Dettagli troverai larghezza e altezza espresse in pixel. Su Mac è ancora più veloce: seleziona il file e premi Comando + I oppure usa la barra spaziatrice per l'anteprima rapida e guarda le informazioni in alto. Se sei nel browser, Chrome e Firefox ti permettono di fare clic destro su qualsiasi immagine e scegliere Ispeziona. Lì vedrai le dimensioni naturali del file e quelle a cui viene visualizzato in quel momento.
Verificare le dimensioni da smartphone
Sui telefoni è un po' più fastidioso. Su Android, di solito devi aprire la galleria, toccare i tre puntini o l'icona delle informazioni. Su iPhone, con le ultime versioni di iOS, basta scorrere verso l'alto mentre guardi una foto nell'app Foto per vedere i dati EXIF, che includono risoluzione, peso e persino l'obiettivo usato. È fondamentale controllare questi dati prima di inviare file via email, perché molte app di messaggistica comprimono i file automaticamente, distruggendo la qualità originale.
I formati che salvano la vita al tuo sito
Scegliere il formato giusto è metà della battaglia. Se usi il formato sbagliato, anche l'immagine della dimensione corretta sembrerà brutta o sarà troppo pesante.
- JPEG: Il re per le fotografie. Gestisce milioni di colori e permette una compressione ottima. Ma occhio: ogni volta che salvi un JPEG, perdi un po' di qualità. Non farlo dieci volte sullo stesso file.
- PNG: Usalo solo se ti serve la trasparenza. Se hai un logo o un'illustrazione con zone piatte di colore, è perfetto. Per le foto, però, il PNG è un mattone inutile. Evitalo se puoi.
- WebP: Questo è il futuro, anzi il presente. Creato da Google, offre una compressione migliore del JPEG mantenendo una qualità superiore. Ormai quasi tutti i browser lo supportano. Se il tuo sito non usa WebP, stai vivendo nel 2015.
- SVG: Per loghi e icone, non c'è storia. È un formato vettoriale, il che significa che puoi ingrandirlo quanto vuoi e non sgranerà mai. Inoltre, il file pesa pochissimo perché è praticamente codice testuale.
Quando usare il formato vettoriale
Se hai un logo aziendale, chiedi sempre al tuo grafico il file in formato SVG o AI. Non accontentarti di un JPEG sfocato recuperato da una vecchia firma email. Un file vettoriale ti permette di stampare un biglietto da visita o un cartellone pubblicitario di sei metri senza perdere un briciolo di nitidezza. È la base della professionalità.
Rapporto d'aspetto e ritaglio intelligente
Sapere le dimensioni non basta se poi il rapporto d'aspetto è sbagliato. Hai presente quelle foto che sembrano schiacciate o allungate? Ecco. Il rapporto d'aspetto è la relazione proporzionale tra larghezza e altezza. Il classico 16:9 è quello dei video moderni, il 4:3 è quello delle vecchie TV, mentre il 1:1 è il quadrato perfetto di Instagram.
Quando ridimensioni, blocca sempre le proporzioni. Se cambi solo la larghezza e lasci che il software calcoli l'altezza automaticamente, non sbaglierai mai. Se invece forzi entrambi i valori manualmente senza calcolare il rapporto, otterrai un disastro visivo. Esistono strumenti online gratuiti come Squoosh di Google che ti permettono di fare queste operazioni vedendo l'anteprima in tempo reale. È uno dei tool migliori perché funziona direttamente nel browser e non invia i tuoi dati a server esterni.
Strumenti per professionisti e non
Se non vuoi spendere centinaia di euro per la suite Adobe, ci sono alternative eccellenti. GIMP è il software open source per eccellenza: fa quasi tutto quello che fa Photoshop ma è gratis. Se preferisci qualcosa di più snello, Photopea è una web app che clona l'interfaccia di Photoshop ed è incredibilmente potente per essere un sito web.
Per chi invece vuole solo velocità, Canva ha rivoluzionato il modo in cui i non-grafici gestiscono le immagini. Ti permette di creare contenuti con le dimensioni già pronte per ogni social network. Però attenzione: Canva tende a sfornare file un po' pesanti se non stai attento alle impostazioni di esportazione.
Ottimizzazione per i motori di ricerca
L'ottimizzazione delle immagini non riguarda solo quanto sono grandi sullo schermo. C'è tutta una parte invisibile che i motori di ricerca leggono. Parlo del tag ALT, del titolo del file e della descrizione.
Non chiamare mai una foto IMG_8472.jpg. È inutile. Se la foto ritrae un gatto che mangia, chiamala gatto-mangia-croccantini.jpg. Usa i trattini per separare le parole, non gli underscore. Il testo alternativo (ALT text) è ancora più importante. Serve agli ipovedenti per capire cosa c'è nell'immagine tramite gli screen reader e serve a Google per indicizzare il contenuto. Sii descrittivo ma breve. Non riempire il tag ALT di parole chiave a caso, perché l'algoritmo se ne accorge e ti penalizza per "keyword stuffing".
Caricamento pigro o Lazy Loading
Questa è una tecnica tecnica fondamentale. In pratica, il browser carica l'immagine solo quando l'utente scorre la pagina e sta per visualizzarla. Se hai un articolo lungo con 20 foto, non ha senso caricarle tutte all'inizio. Rallenteresti solo l'accesso dell'utente. La maggior parte dei CMS come WordPress ora implementa il lazy loading di serie, ma vale la pena controllare se il tuo tema lo supporta correttamente.
Errori comuni da evitare assolutamente
L'errore più frequente è l'ingrandimento. Se hai una foto piccola, non puoi farla diventare grande senza perdere qualità. I pixel si inventano pixel che non esistono, creando quell'effetto "nebbia" o i bordi seghettati. Se hai bisogno di un'immagine più grande, devi scattarla di nuovo o cercarne una ad alta risoluzione. Esistono tool basati su intelligenza artificiale che promettono miracoli nell'upscaling, ma funzionano bene solo su certi tipi di immagini e spesso creano artefatti strani sulle facce delle persone.
Un altro sbaglio è non testare mai su mobile. Quello che sembra perfetto sul tuo monitor da 27 pollici potrebbe essere illeggibile su uno smartphone da 6 pollici. Controlla sempre che i testi all'interno delle immagini siano grandi abbastanza da essere letti senza zoomare. In generale, evita di mettere testo importante dentro i file immagine; usa il testo HTML sopra l'immagine, così è leggibile, selezionabile e indicizzabile.
Gestire le immagini su siti multilingua
Se il tuo sito è rivolto a un pubblico internazionale, ricorda che le immagini possono contenere riferimenti culturali. Un'immagine che va bene in Italia potrebbe non essere adatta in altri mercati. Inoltre, se c'è del testo nell'immagine, dovrai caricarne versioni diverse per ogni lingua, il che complica la gestione del sito. Meglio usare foto neutre e sovrapporre il testo via codice.
Passi pratici per gestire i tuoi file
Adesso che abbiamo visto la teoria, passiamo all'azione. Non serve stravolgere il tuo flusso di lavoro, basta aggiungere piccoli controlli di routine.
- Prima di caricare qualsiasi cosa online, controlla le dimensioni effettive. Se la larghezza supera i 2000 pixel e non è una foto per uno sfondo a tutto schermo, ridimensionala.
- Usa uno strumento di compressione. TinyPNG è un classico intramontabile che riduce il peso dei file senza perdite visibili. C'è anche come plugin per molti siti.
- Rinominare il file correttamente. Elimina spazi, caratteri speciali e maiuscole. Usa solo lettere minuscole e trattini.
- Verifica il risultato finale. Apri il tuo sito da navigazione in incognito e guarda quanto ci mette a caricare. Se vedi le foto che appaiono "a fette", sono ancora troppo pesanti.
Seguendo questi punti, non solo risolverai il problema tecnico del momento, ma costruirai una presenza online molto più solida e veloce. La gestione dei contenuti visivi è un lavoro di precisione, ma i benefici in termini di traffico e soddisfazione degli utenti valgono ogni secondo speso a controllare i pixel. Alla fine, si tratta di rispetto per il tempo di chi naviga sul tuo sito. Un sito veloce è un sito che funziona.
