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

Un’immagine può essere bella e funzionare male in una pagina. La tazza finisce dietro il titolo, lo sfondo disturba la lettura e su mobile il ritaglio taglia il manico. Il prompt deve partire dal ruolo dell’immagine nel sito.

Specifica uso, soggetto, composizione, luce e vincoli. Prova il risultato con il testo reale su schermi larghi e stretti, poi 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 identificativo del modello e seed. I prompt inglesi riportati sono quelli inviati; 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, 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. Il risultato può funzionare da solo; il nostro banner richiede una zona più libera.

Modificare la composizione

Usiamo la prima immagine come base. Chiediamo di spostare e rimpicciolire la tazza, togliere le decorazioni e conservare luce e materiali.

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: restano selezionabili, traducibili e modificabili. Valuta l’immagine all’interno di 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 serve un formato verticale, prepara una composizione dedicata.

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 in base alla larghezza dello schermo, usa l’elemento HTML picture con elementi source che indichino quando scegliere ciascuna immagine. Per offrire più risoluzioni della stessa composizione, usa 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 un riferimento di stile: stesso lino, legno, luce calda e palette sobria, ma un soggetto nuovo.

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: 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: elenca gli oggetti da rimuovere.
• Il prodotto cambia: riparti dalla foto originale e limita la modifica.
• Lo stile varia: riutilizza 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 valori di queste immagini alla compressione scelta, non obiettivi universali. Controlla bordi e texture; imposta larghezza e altezza per riservare spazio nella pagina.

L’attributo alt fornisce una descrizione testuale dell’immagine: scrivila in modo breve e usa la didascalia per spiegare lo scopo della modifica. Un’immagine puramente decorativa può avere un alt vuoto. Google consiglia nomi di file descrittivi, testo pertinente vicino all’immagine e descrizioni senza accumuli di parole chiave. Spiega anche nell’articolo ciò che l’immagine mostra, così il contenuto resterà comprensibile 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 alt e didascalia; salva prompt e immagine di partenza.

• Lavorare con Codex