Immagine in HTML: un solo file da incollare, inviare per e-mail o pubblicare su hosting statico
A volte hai già i pixel — screenshot, logo, diagramma — e ti serve markup da passare a un compagno di squadra o da mettere in un repo senza montare un URL di asset. Con «immagine in HTML» intendiamo qui incorporare quei pixel come data URL in un piccolo documento HTML, più le consuete cure: testo alt, link opzionale, suggerimenti di layout. Non sostituisce un CDN per gallerie enormi; è un passaggio pratico in stile JPG in HTML o PNG in HTML quando una sola immagine è tutto il messaggio.
Screenshot di bug, PNG hero e diagrammi una tantum — quando l’allegato è tutta la storia
Gli stack moderni preferiscono asset separati, eppure il lavoro vero resta nei template e-mail, snippet LMS, wiki interni e segnalazioni bug dove un file autonomo è più facile da verificare di una cartella di caricamenti. Una conversione JPG in HTML che produce solo un Base64 gigante è tecnicamente corretta e resta noiosa da rifinire. Puntiamo su un ciclo visibile: cambia larghezza, rotazione, compressione o luminosità e contrasto, osserva l’anteprima, poi dai un’occhiata all’HTML a destra per confermare cosa partirà.
Quando converti un’immagine in HTML qui, il browser legge il file in locale, applica le modifiche su una canvas se serve e riscrive la src che incollerai altrove. Così le credenziali non finiscono su un server a caso e l’iterazione costa poco — non ricarichi dopo ogni micro-aggiustamento. Se l’output pesa, limita la larghezza incorporata o passa a WebP o JPEG prima di copiare; se ti serve solo la src grezza, attiva l’interruttore e prendi solo la riga della data URL.
Vai al convertitoreMetadati che viaggiano con i pixel
Imposta testo alt e un wrapper di link opzionale prima dell’esportazione, così la figura non è solo un blocco immagine muto quando qualcuno apre il tuo file con uno screen reader.
Controlli raster che vedi
Ruota, sposta luminosità o contrasto e ricodifica con una larghezza massima e un obiettivo di qualità. Quelle scelte finiscono nell’immagine incorporata, non in una pila di filtri CSS che poi dimentichi di copiare.
L’HTML accanto all’immagine
La colonna di output segue lo stesso passaggio dell’anteprima: non indovini cosa è cambiato dopo aver cliccato Applica.
Un approccio più calmo all’immagine in HTML rispetto ai siti «carica e spera»
Spesso i concorrenti si fermano a un solo pulsante converti. Noi teniamo compressione e layout accanto al markup che incollerai davvero.
Messa a punto visiva invece di una stringa misteriosa
Una data URL valida resta la consegna sbagliata quando l’asset è il doppio della larghezza consentita dal template o uno screenshot in modalità notturna ha bisogno di un colpo prima del QA. Qui il bitmap che stai regolando resta a sinistra; la colonna destra segue lo stesso passaggio — documento avvolto o riga src nuda che incollerai in un ticket. Apri «Ridimensiona / codifica», imposta larghezza massima nel file, qualità e formato di output, premi Applica e i due riquadri si muovono insieme — senza indovinare quale manopola è partita davvero. Luminosità e contrasto finiscono nei pixel per l’export, meglio che aggiungere all’ultimo filtri CSS che poi si dimenticano di copiare. Allineamento, larghezza di visualizzazione, testo alt e link opzionali condividono la barra degli strumenti: più vicino a cinque minuti di rifinitura layout che a un convertitore alla cieca. Quando l’HTML ti convince, copialo direttamente in Jira, un blocco Markdown o una doc interna senza aprire DevTools per decodificare un megabyte di Base64. Non sostituisce un design system, ma evita il ciclo scarica — riapri — brontola dei tool in un clic.
- Vedi l’HTML mentre regoli l’immagine
- Ricodifica dopo cambi di larghezza o formato
- Nessun caricamento sui nostri server
- Anteprima HTML nel Playground
Come si aggiungono immagini in HTML?
Il modo manuale che insegnano la maggior parte dei tutorial
Aggiungi un elemento <img>, punta src a un URL o a una data URL e fornisci un testo alt significativo. Per una fixture veloce puoi incollare una data URL direttamente in src, a costo di un file HTML più grande. Ospitare un .jpg o .webp separato e referenziarlo mantiene il markup più leggero ma aggiunge un altro file da spostare.
Quando vince un file singolo in data URL
Snippet e-mail, documenti interni o passaggi offline spesso funzionano meglio con un solo blob HTML. È lì che cuocere l’immagine in linea ti salva da percorsi relativi rotti dopo che qualcuno rinomina una cartella.
Come accorciamo il ciclo
Carica l’immagine, regola layout e compressione mentre l’anteprima si aggiorna, poi copia l’HTML o solo la riga src. Reimposta rotazione e impostazioni di esportazione se sei andato troppo oltre, poi applica di nuovo finché la colonna destra coincide con ciò che ti aspetti.
Immagine in HTML: risposte rapide
Prova Immagine in HTML
Carica a sinistra, regola e confronta a destra.
Immagine in HTML
- Anteprima dal vivo con HTML accanto
- Ridimensiona, ruota, luminosità, contrasto
- Incorpora WebP, JPEG o PNG
- Esecuzione in locale nel browser
Le immagini molto grandi possono codificare lentamente; usa la larghezza massima nel pannello di esportazione per ridurre la data URL.
Un file HTML, un’immagine
Comodo quando ti serve un solo allegato o snippet senza ospitare l’immagine altrove.