Il titolo funziona, i colori sono quelli giusti e il prezzo e gli orari del corso ci sono già. Eppure la pagina sembra ancora un modello. Le foto potrebbero comparire sul sito di qualunque altro laboratorio.
Inserire foto proprie in un modello HTML è spesso uno degli ultimi ritocchi. Lo stesso vale per una pagina creata con l’IA o consegnata da un designer. La struttura può essere già quella giusta, mentre le immagini devono ancora rispecchiare i prodotti, i servizi o la nuova collezione. Lavorare sulla pagina esistente permette di valutare ogni foto accanto al testo che accompagna.
Prendiamo Claywell, la pagina di un laboratorio di ceramica immaginario. Nella parte iniziale, la foto di un banco da lavoro prende il posto di una natura morta in bianco e nero. Più in basso, l’illustrazione di una sola ciotola sostituisce una foto con varie stoviglie.
Cambiare le immagini nella pagina HTML che hai già
Apri il file nell’editor HTML online di HtmlDrag tramite «Carica HTML». Nel file di Claywell sono già incluse le immagini originali, il carattere e gli stili. Puoi quindi intervenire vedendo la pagina del corso nel suo insieme.
Prima di scegliere una nuova foto, guarda come sono disposte quelle esistenti. Nella parte iniziale di Claywell, la natura morta è accanto a un riquadro giallo con le informazioni sul corso e a un primo piano delle mani che modellano l’argilla. Quando sostituisci la foto a sinistra, puoi giudicare il risultato tenendo davanti agli occhi il titolo, il prezzo e l’immagine a destra.
Scegliere le foto in base a ciò che interessa a chi visita la pagina
Un negozio di ceramica e un corso possono usare foto simili, ma chi visita le due pagine cerca informazioni diverse. I pezzi finiti mostrano il risultato possibile. Un banco con argilla e attrezzi aiuta a immaginare come ci si mette al lavoro. Per un corso di base, è questo che conviene far capire subito.
Chi arriva alla sezione dedicata al materiale vuole osservare meglio gli oggetti. Accanto al titolo «Non esiste una forma perfetta», una sola ciotola fa vedere il bordo irregolare e i dettagli della superficie smaltata meglio di un insieme di tazze e piatti. Le due immagini rispondono a domande diverse.
| Ruolo nella pagina | Immagine adatta | Cosa deve vedersi |
|---|---|---|
| Foto principale o scena dell’attività | Un’attività riconoscibile e spazio intorno al soggetto. | L’attività a colpo d’occhio, accanto al titolo e al pulsante principale. |
| Dettaglio di un prodotto o materiale | Un solo soggetto ben illuminato, con spazio intorno ai bordi importanti. | Forma, finitura e caratteristica citata nel testo. |
| Foto di supporto | Un’altra angolazione, una texture o un primo piano. | Un particolare che la foto principale non mostra. |
Quando scegli i file, considera le proporzioni, lo spazio intorno al soggetto e i dettagli che resteranno visibili alla dimensione effettiva. Anche una foto orizzontale può perdere la parte essenziale in un riquadro stretto. Un’immagine verticale con margine sufficiente intorno al soggetto può invece funzionare in un riquadro più ampio.
Può essere utile scrivere poche righe su ciò che ti serve, sia per cercare in un archivio sia per affidare a qualcuno la preparazione delle foto.
La pagina presenta un corso di ceramica per principianti. Per l’apertura serve una foto del banco da lavoro, per la sezione sul materiale un’immagine in cui si distingua bene una sola ciotola. Lasciare spazio intorno alle mani e al bordo della ciotola per i ritagli su computer e smartphone. Mantenere la struttura e le informazioni del corso già approvate e usare immagini fedeli a quanto viene presentato.
Le foto originali di Claywell sono il punto di partenza. In alto c’è una natura morta, mentre nella sezione sul materiale compare un insieme di stoviglie. Il testo vicino a ciascuna foto aiuta a capire quale immagine possa sostituirla.
Cambiare la foto principale lasciandola nella posizione originale
La nuova foto mostra gli attrezzi, l’argilla e il banco dove si lavora. A destra, il primo piano delle mani rende visibili i gesti della modellazione. Una foto presenta l’ambiente, l’altra mostra l’attività da vicino.
In HtmlDrag fai clic con il tasto destro sulla foto da cambiare e scegli «Sostituisci immagine…». Se immagini e riquadri sono molto vicini, verifica di aver selezionato proprio la foto.
La finestra offre «Carica dal dispositivo» per usare un file del computer e «Usa immagine online» per indicare l’URL di un’immagine già ospitata online. Per Claywell abbiamo caricato la foto del banco da un file già pronto.
Una volta inserita la foto, osserva di nuovo l’inizio della pagina. Un’immagine ricca di particolari attira lo sguardo, ma il prezzo del corso e il pulsante principale devono rimanere facili da trovare. Dalla sola miniatura dell’archivio è difficile valutare questo equilibrio.
In questo caso, le superfici e gli oggetti del banco risaltano accanto al semplice riquadro giallo. La scena si capisce anche dopo il ritaglio. Se stai cambiando la foto della tua pagina, controlla che si riconosca l’attività e che dal titolo si arrivi senza fatica al pulsante principale.
Mettere a fuoco un solo dettaglio
L’immagine di dettaglio serve a far vedere bene una caratteristica. Per la ceramica può essere il bordo, lo smalto o la superficie. Per altri prodotti può essere una chiusura, una finitura o un’etichetta. Prima individua cosa interessa mostrare, poi scegli quanto stringere l’inquadratura.
Per la seconda sostituzione di Claywell abbiamo usato un’illustrazione di una ciotola preparata in precedenza con l’IA. Lo smalto chiaro e il profilo irregolare si accordano con il testo dedicato alle forme della ceramica.
La funzione usata è la stessa della foto principale. Il file è verticale, ma il riquadro su computer è più largo. Lo spazio attorno alla ciotola consente di ritagliare l’immagine senza intaccarne il bordo.
Nel primo piano si vede la ciotola intera accanto alla spiegazione. Puoi fare la stessa verifica sulle immagini di prodotto o dei materiali. Si distingue la caratteristica citata nel testo? Se il ritaglio elimina un bordo importante, prova un’inquadratura più ampia o un altro ritaglio prima di intervenire sull’impaginazione.
Perché la nuova immagine appare tagliata o sfocata
Il file e il riquadro della pagina possono avere proporzioni diverse. In quel caso la pagina può tagliare parte dell’immagine per riempire lo spazio. La proprietà CSS object-fit: cover, per esempio, conserva le proporzioni del file e taglia quello che esce dal riquadro.
Per questo una foto può risultare intera nell’archivio e parziale nel sito. Verifica i bordi del soggetto nel riquadro reale e cerca un’inquadratura che conservi i dettagli importanti. Allargare o allungare la foto per farla entrare a forza può alterare la forma dell’oggetto.
L’anteprima su computer permette di valutare la prima impressione alle normali dimensioni di lettura. Si capisce che attività è a colpo d’occhio? L’immagine è coerente con il titolo? Il pulsante principale si trova subito?
Nella sezione sul materiale, la ciotola deve essere abbastanza grande da mostrare la forma e la superficie mentre si legge il testo. Controlla ogni foto nel suo punto della pagina. Una vista d’insieme rimpicciolita può nascondere alcuni problemi.
Se il problema è la sfocatura, parti dal file originale. Ingrandire una miniatura per riempire un riquadro ampio mette in evidenza la mancanza di dettagli. Scegli un originale adatto, esportalo per il web e controllalo alla dimensione in cui lo vedranno i visitatori. Mostrare la foto più piccola nella pagina non riduce, di per sé, il peso del file scaricato.
Salvare le modifiche e controllare la versione per smartphone
Quando le due immagini funzionano nel contesto della pagina, usa «Salva versione». Se ti serve il file per la pubblicazione sul tuo sito, nella finestra di esportazione trovi «Scarica HTML» e «Copia HTML» sotto «HTML modificato».
Abbiamo salvato entrambe le modifiche nel progetto Claywell. La sezione sul materiale resta disponibile per le prossime modifiche, per esempio quando cambiano le date, i prodotti o le foto di stagione.
Controlla anche la larghezza di uno smartphone. Il riquadro può diventare più stretto, una foto secondaria può sparire e le informazioni sul corso possono cambiare posizione. Verifica che il soggetto si riconosca ancora. Nella vista più stretta di Claywell, la foto del banco appare accanto al riquadro giallo.
Dopo aver cambiato una foto, potresti accorgerti che manca una breve spiegazione. Puoi inserire una didascalia sul materiale o collegare la foto di un prodotto alla scheda corrispondente. Se i visitatori devono confrontare più corsi, in HtmlDrag puoi inserire una tabella e modificarne celle, righe e colonne.
Quando ritocchi ciò che sta intorno alle foto, puoi bloccare gli elementi già sistemati per evitare di spostarli per sbaglio. Puoi anche eliminare un elemento legato a una promozione scaduta. Sono piccoli interventi che tengono le nuove immagini allineate ai contenuti attuali.
Prima di usare la pagina aggiornata, verifica questi punti.
- Le immagini previste sono state sostituite e i soggetti si distinguono.
- I dettagli utili si vedono sia su computer sia su smartphone.
- Le immagini preparate per il web sono nitide alla dimensione di visualizzazione.
- Didascalie, testi alternativi e crediti corrispondono alle nuove immagini.
- Le immagini con un link aprono la destinazione prevista.
- La versione salvata e l’HTML da pubblicare contengono le modifiche.
Quando cambia il soggetto della foto, rivedi anche il testo alternativo. La guida di Google sulle immagini consiglia testi alternativi utili e pertinenti alla pagina. Descrivere concretamente ciò che si vede aiuta più di un elenco di parole chiave.
Domande frequenti su come sostituire le immagini in HTML
Posso cambiare le immagini di una pagina HTML generata con l’IA?
Sì, se il file HTML si apre correttamente nell’editor. Controlla che stili e immagini vengano caricati, seleziona la foto da sostituire e applica quella nuova. Se hai già preparato l’immagine, puoi usarla direttamente e risparmiarti un’altra richiesta di generazione all’IA.
Conviene caricare il file o usare l’URL di un’immagine?
Carica il file se hai l’immagine approvata sul computer. Puoi usare un URL se il file è già ospitato a un indirizzo stabile e accessibile. Verifica che l’indirizzo apra direttamente il file dell’immagine. Se hai solo il link a una galleria o a una pagina di accesso, cerca prima l’indirizzo dell’immagine.
Posso usare una foto verticale in un riquadro orizzontale?
Dipende dallo spazio intorno al soggetto. Nel caso della ciotola di Claywell, il fondo lascia margine sufficiente per un ritaglio orizzontale. Una foto troppo stretta può perdere dettagli importanti. Guardala nel riquadro effettivo e anche alla larghezza di uno smartphone.
Cambiando la foto si aggiornano anche la didascalia o il link?
Immagine, didascalia, crediti e destinazione del link vanno controllati separatamente. Dopo la sostituzione, verifica che il testo descriva la nuova foto e che l’eventuale link porti ancora alla pagina giusta.
Che dimensioni deve avere la nuova immagine?
Scegli una risoluzione adatta al riquadro e un peso pratico per il web. Una grande foto iniziale richiede in genere più dettagli di una piccola immagine in una scheda. Valuta la resa sulla pagina e consulta il limite di caricamento in vigore.
Salvare la sostituzione aggiorna anche il sito già online?
Il salvataggio conserva le modifiche nel progetto HtmlDrag. Se il sito è ospitato altrove, usa il file HTML aggiornato nel suo normale processo di pubblicazione.
La foto del banco aiuta a immaginare il lavoro in laboratorio. L’immagine di una sola ciotola permette di vedere meglio forma e smalto. Se il tuo modello HTML contiene ancora foto provvisorie o datate, aprilo nell’editor visuale HTML e scegli un’immagine adatta al punto della pagina in cui sostituirai ogni foto.