Creare immagini con l’IA per un sito: dal primo tentativo al banner

Un’immagine può essere bella e stare male in una pagina. La tazza finisce dietro il titolo, lo sfondo disturba la lettura, su mobile il ritaglio porta via il manico. Per questo il prompt parte dal ruolo che l’immagine avrà nel sito.

Specifica a che cosa serve l’immagine, il soggetto, la composizione, la luce e i vincoli. Prova il risultato con il testo vero, su uno schermo largo e su uno stretto. Alla fine prepara il file e il testo alternativo.

Il nostro esperimento

Per questo esercizio editoriale Neaptide del 6 settembre 2026 abbiamo creato quattro immagini di ceramiche immaginarie: una generazione iniziale, due modifiche successive e una nuova ciotola da un riferimento di stile. Non è un progetto cliente né un confronto tra modelli. Lo strumento integrato non ha comunicato né l’identificativo del modello né il valore del parametro casuale. I prompt inglesi riportati sono quelli che abbiamo inviato, anche se non garantiscono risultati identici.

• Scarica i prompt e la sequenza delle operazioni (JSON)

Scegliere il posto dell’immagine

Per il nostro laboratorio mettiamo titolo e pulsante a sinistra e la tazza a destra. Una copertina deve restare riconoscibile in miniatura. Una scheda prodotto deve rappresentare fedelmente l’oggetto reale. Ogni utilizzo richiede indicazioni diverse.

Primo tentativo: poco spazio per il titolo

Create a wide landscape photograph of a handmade ceramic mug for a pottery studio website. Warm daylight, natural linen, tasteful editorial product photography. No text, logos or watermark. Save the generated image.

Abbiamo descritto l’atmosfera senza stabilire la composizione. Il generatore ha aggiunto pianta e fiori. Da solo il risultato può funzionare, ma il nostro banner richiede una zona più libera.

Modificare la composizione

La prima immagine fa da base. Chiediamo di spostare la tazza e rimpicciolirla, di togliere le decorazioni e di lasciare luce e materiali come sono.

Edit the supplied generated mug image for a pottery website hero. Make a wide 3:2 landscape composition. Keep one recognizably matching cream speckled ceramic mug with the same brown unglazed foot and curved handle, the linen, warm daylight and natural photographic style. Reframe so the complete mug including handle sits in the right third and occupies at most 40% of the image width. Leave the left half a quiet light warm off-white surface with very little texture for a dark HTML heading to be added later. Remove the plant and dried flowers. No lettering, logos, border or watermark. The mug is a fictional design for an educational example.

Anche il manico e le proporzioni sono leggermente cambiati. Per l’oggetto immaginario dell’esercizio va bene. Per un prodotto reale occorrerebbe confrontare il risultato con la foto originale. La richiesta di preservare un oggetto non assicura una corrispondenza perfetta.

Inserisci titolo e pulsante in HTML, così restano selezionabili, traducibili e modificabili. L’immagine valutala dentro questa impaginazione.

• Confronta il primo tentativo e il banner modificato

Preparare la versione mobile

Un ritaglio centrale può tagliare la tazza. Prova prima a mostrare l’immagine intera, con il testo sopra. Se un formato verticale serve davvero, prepara una composizione apposta.

Edit this generated pottery hero into a portrait 2:3 mobile website image. Use the input image as the edit target. Keep a recognizably matching single cream speckled ceramic mug, brown unglazed foot, right handle, warm daylight, pale wall, wooden table and linen. Place the complete mug and handle in the lower half, comfortably inside both side edges. Keep the upper 40 percent quiet pale wall for dark HTML text to be added by the website. No plant, flowers, text, logos or watermark. Preserve the restrained photographic style. This is a fictional product for an educational website example.

Per mostrare una composizione diversa a seconda della larghezza dello schermo, usa l’elemento HTML picture, con elementi source che dicono quando scegliere ciascuna immagine. Se la composizione è la stessa e cambia solo la risoluzione, bastano srcset e sizes. Nella demo puoi confrontare il ritaglio centrale dell’immagine larga con la versione verticale.

• Come il browser sceglie le immagini responsive

Mantenere lo stile della serie

Per un altro articolo ci serve una ciotola. L’immagine precedente diventa il riferimento di stile. Riprendiamo il lino, il legno, la luce calda e la palette sobria, e cambiamo soltanto il soggetto.

Create a new square editorial image for an educational pottery studio blog, using the supplied image ONLY as a style reference, not an edit target. Show a single shallow handmade ceramic bowl, cream speckled glaze with a brown unglazed foot, fully visible on natural linen over a wooden table, pale warm wall, soft window daylight, restrained warm neutral palette and quiet photographic texture matching the reference. Bowl in lower right area, simple upper left background, no other pottery, no plants, flowers, people, text, logos or watermark. The bowl is a fictional design, not a real product photograph.

Conserva il riferimento insieme a poche indicazioni stabili. Confronta le immagini una accanto all’altra, perché la parola «beige» non basta a ottenere tinte uguali.

Correggere un problema alla volta

• Il soggetto copre il titolo: indica l’area da lasciare libera.
• Lo sfondo è affollato: indica quali oggetti togliere.
• Il prodotto è cambiato: riparti dalla foto originale, limita la modifica e ricontrolla.
• Lo stile cambia da un’immagine all’altra: riusa un unico riferimento.
• Le modifiche peggiorano il risultato: torna all’ultima versione utile.

Preparare la pubblicazione

I nostri WebP pesano circa 189, 89, 71 e 80 KiB. Sono i valori di queste immagini alla compressione scelta e non vanno presi come obiettivi. Controlla bordi e texture, e imposta larghezza e altezza per riservare spazio nella pagina.

L’attributo alt descrive l’immagine a parole. Scrivilo breve, e usa la didascalia per spiegare a che cosa è servita la modifica. Un’immagine puramente decorativa può avere un alt vuoto. Google consiglia nomi di file descrittivi, testo pertinente vicino all’immagine e descrizioni che non accumulino parole chiave. Racconta anche nell’articolo che cosa mostra l’immagine, così il contenuto si capisce anche senza vederla.

• Indicazioni di Google per la SEO delle immagini

Prima di pubblicare

1. Prova l’immagine con titolo e pulsante reali.
2. Controlla schermi larghi e stretti.
3. Confronta ogni prodotto reale con la foto originale.
4. Verifica compressione e caricamento.
5. Aggiungi un testo alternativo e una didascalia, e salva il prompt con l’immagine di partenza.

• Lavorare con Codex