Immagine segnaposto

A cosa serve un'immagine segnaposto

Quando una pagina o un mockup non ha ancora le foto definitive, un placeholder con le dimensioni esatte tiene il layout stabile: eviti che i blocchi "saltino" quando arriverà l'immagine vera e chi guarda la bozza capisce subito quanto spazio occuperà. A differenza dei servizi tipo placehold.co o placekitten, qui il PNG è generato in locale: funziona anche offline e non sparisce se il servizio esterno chiude o è lento.

Dimensioni tipiche da usare

Alcuni formati ricorrenti: 1200×630 per le anteprime social Open Graph, 1280×720 per le miniature video in 16:9, 1080×1080 per i post quadrati Instagram, 300×250 per i banner rettangolari e 150×150 per gli avatar. Il testo sull'immagine si adatta da solo: se lo lasci vuoto vengono stampate le dimensioni, la convenzione più utile per riconoscere i placeholder a colpo d'occhio nei mockup.

Perché un segnaposto tiene in piedi una pagina

Un blocco senza immagine ha altezza zero finché la foto non arriva, e quando arriva spinge in basso tutto il resto: è il difetto che chi legge percepisce come «la pagina che salta mentre la guardo». Ha anche un nome nelle metriche di Google, che lo misura come spostamento del contenuto e lo considera un problema di qualità.

Un segnaposto delle dimensioni esatte occupa lo spazio fin dal primo istante, e la pagina resta ferma. È lo stesso motivo per cui, sul sito finito, alle immagini vanno sempre dichiarati larghezza e altezza: non per fissarne la dimensione, ma per far sapere al browser quanto spazio riservare prima ancora di scaricarle.

Le misure che ricorrono

1200 per 630 è l'anteprima che compare quando un link viene condiviso: è la misura richiesta dai metadati Open Graph, e una pagina che non ce l'ha viene condivisa con un'anteprima brutta o vuota. 1280 per 720 è il 16:9, cioè copertine di video e presentazioni. 1080 per 1080 e 1080 per 1920 sono il quadrato e il verticale dei social.

Per le immagini dentro un articolo la misura pratica è intorno ai 1600 pixel di larghezza, che coprono la maggior parte degli schermi anche ad alta densità senza produrre file enormi. E per le miniature bastano 400 pixel: caricare un'immagine da 3000 pixel per mostrarla a 300 è lo spreco più comune del web.

Segnaposto o immagine vera: quando conviene fermarsi

Un segnaposto grigio con le misure scritte sopra serve a progettare: verificare che il testo attorno funzioni, che le proporzioni tengano sul telefono, che la griglia non si rompa. Per quello è meglio di una fotografia, perché non distrae e non fa giudicare il progetto sulla bellezza dell'immagine.

Diventa un problema quando resta in produzione: succede più spesso di quanto si creda, e un sito pubblicato con i riquadri grigi comunica abbandono. Vale la pena tenere i segnaposto in un colore inequivocabile, così è impossibile scambiarli per contenuto definitivo.

Le alternative, e i loro limiti

Molti usano i servizi online che generano segnaposto via indirizzo: sono comodi, ma legano una pagina a un sito esterno che può rallentare, cambiare o sparire, e ogni caricamento comunica a quel servizio chi sta guardando la pagina. Per un prototipo va bene, per un sito pubblicato no.

L'alternativa più leggera in assoluto non è nemmeno un'immagine: è un rettangolo colorato disegnato con il foglio di stile, che pesa zero byte. Le immagini segnaposto scaricate servono invece quando il file deve essere davvero un file: un mockup da mandare a un cliente, una presentazione, un documento.

Gli strumenti vicini

Per le misure di un'immagine vera ci sono Ridimensiona foto e Dimensioni e info della foto, per il peso Comprimi immagine. Per la grafica di prova Colore casuale e Generatore di gradienti, e per i testi finti Generatore di lorem ipsum.