One raster image · Three HTML approaches
Image to HTML Converter
An image to embed.
Or text you can edit.
Embed your image as Base64 HTML, extract English text with OCR, or build a table of sampled colors. Review the output and copy or download the code.
These modes do not reconstruct an editable website from a screenshot. Base64 and mosaic work without OCR assets; optional English OCR needs engine/model downloads.
PNG · JPG · WebP · GIF · BMP · AVIF, when this browser can decode them
Or drop exactly one file. Up to 10 MiB, 20 MP and 16,384 px per side. OCR has a separate 8 MP limit. SVG and HEIC are excluded.
No image selected
Your selected image will appear here.
Select one image to begin. No OCR assets load automatically.
Explicitly saved results
Saved on this browser/device until cleared. Old conversionHistory previews are not executed or restored; Clear also removes that previous-version key.
Pick the representation
An embedded image, readable text, or colored cells.
| Mode | What the result contains | When it fits | What it does not do |
|---|---|---|---|
| Base64 image embed | An img element whose data URL contains the original raster bytes. | A self-contained HTML handoff where embedding image bytes is acceptable. | Compress the image, strip metadata or create editable page components. |
| English OCR | Recognized text in HTML paragraphs, with an editable correction field. | Reviewing text from a clear English document or screenshot. | Guarantee spelling or rebuild tables, typography and original layout. |
| Pixel mosaic | A presentation table of sampled RGBA colors. | A deliberately low-detail visual made from HTML cells. | Create a vector image, preserve animation or keep photo-level detail. |
Use the tool
Select, generate, then inspect the actual output.
01 · Check the source
Upload one supported raster file. File size, signature and decoded dimensions are checked before conversion; a failed replacement leaves the previous valid source available.
02 · Choose the meaning
Select Base64 for the image itself, OCR for English text or mosaic for sampled colors. Add useful alternative text and a single CSS class. OCR downloads require explicit permission.
03 · Review and deliver
Inspect the preview, correct any OCR mistakes and choose a fragment or standalone document. Copy or download the displayed HTML; use Download OCR text for plain text.
A specific mosaic example
Detail controls sampling. Cell size controls display.
A 1200 × 600 source at detail 32
The sample grid is 32 × 16 cells: 512 HTML cells. With 10 px cells, the table displays at 320 × 160 CSS pixels. This arithmetic example is not a measured performance benchmark.
The same source at detail 64
The grid becomes 64 × 32 cells: 2,048 cells. At 10 px per cell, the table displays at 640 × 320 CSS pixels. More cells increase code size; they do not recreate the original photo.
Transparency stays explicit
Each sampled cell uses RGBA, including its alpha channel. Transparent cells reveal the destination background. Color averaging and rounded grid dimensions can change fine edges.
Small originals remain small samples
A 4 × 2 source stays a 4 × 2 grid even if detail is set to 64. Increasing the display cell size enlarges those cells rather than inventing additional source samples.
Browser processing and storage
Know what is embedded and what is downloaded.
Base64 keeps the original bytes
Embedded output can include EXIF/GPS metadata and animation. Downloading HTML does not make that data private; anyone who has the file can inspect its contents.
OCR needs engine assets
The opt-in English OCR engine downloads JavaScript, worker/WASM and model files. Those servers see requests for assets. Recognition uses the browser worker rather than an image-upload API in this workflow.
Saved results are an explicit choice
Nothing auto-saves. Saved Base64 includes image bytes, OCR saves text and mosaic saves RGBA samples. Same-origin site scripts can access local storage; download and clear when appropriate.
Preview is constructed data
The page builds previews from validated image/text/color records. It does not execute saved HTML preview strings. WordPress may filter the exported markup when you paste it elsewhere.
If something fails
A clear next step for each failure.
Image will not load
Check the raster format, 10 MiB size, 20 MP area and 16,384 px side limits. A recognized signature still needs browser decoder support. Convert SVG/HEIC elsewhere before using this tool.
OCR engine cannot start
Enable its download option, check network/CSP/worker/WASM support and try a clear English image within 8 MP. Base64 and mosaic do not require the OCR network assets.
The wrong output is still visible
Source and conversion changes clear earlier output. Generate again. Fragment/document view only changes packaging; it does not rerun recognition or sampling.
Save is unavailable or too large
A successful conversion can exceed the 512 KiB saved-entry cap. Copy or download remains available. Storage-blocked and quota errors are reported without discarding current output.
Image to HTML questions
Understand the code before publishing it.
Does this convert a screenshot into an editable website?
No. Base64 embeds the raster image in an img element, OCR creates HTML paragraphs from recognized English text, and pixel mosaic creates a colored-cell table. None reconstructs the screenshot’s semantic layout, components, forms or responsive website code.
Which image formats and limits apply?
Choose one PNG, JPG, WebP, GIF, BMP or AVIF raster image that this browser can decode. The tool checks a raster signature, then decoded dimensions. Input is limited to 10 MiB, 20 million pixels and 16,384 pixels per side. English OCR is limited to 8 million pixels. SVG and HEIC are not accepted. Limits do not guarantee a device’s internal decoding memory use.
Is Base64 compression or encryption?
No. It encodes the original raster bytes as text inside an img data URL. Base64 generally makes the image payload about one third larger, before markup. It is readable encoding, does not optimize image quality or size, and does not hide the image.
Does Base64 remove metadata or keep animation?
The original raster bytes are embedded unchanged, including any metadata and supported animation. This tool does not strip EXIF/GPS tags in Base64 mode. OCR and mosaic use the static frame captured after browser decoding on upload; a specific animation frame is not guaranteed.
What does English OCR return?
It uses Tesseract.js 5.1.1 in a browser worker to recognize English text. The result is editable text and escaped HTML paragraphs, rather than the original image’s layout or styles. Review words, numbers and reading order. Poor contrast, handwriting or angled text can reduce recognition quality; accuracy is not guaranteed.
When does OCR contact external services?
No OCR assets load automatically. Enable the OCR download option and click Generate in OCR mode to load the engine and core from jsDelivr and the English model from Project Naptha. Those hosts receive asset requests. Recognition runs in the browser worker; this workflow does not submit the selected image to an OCR API. Normal site scripts are outside that claim.
How do mosaic detail, cell size and transparency work?
Detail limits the sampled longest side to 8–64 cells, without enlarging smaller source dimensions. Aspect ratio is rounded to whole cell counts, with at most 4,096 cells. Cell size sets each exported table cell to 1–20 CSS pixels. Sampled RGBA colors retain alpha, but sampling reduces detail and animation is not preserved.
Do copy and download contain the same HTML?
Yes. Choose an HTML fragment for an existing page or a standalone document with a doctype, character encoding, viewport, title and body. The code field, Copy HTML and Download HTML use that selected view. Download OCR text separately saves the corrected plain text. Preview fitting does not change the generated code.
Can I edit the recognized text before exporting?
Yes. After OCR, correct the recognized-text field. The paragraph HTML and preview update from that edited text. Text is escaped so tags in recognized content remain text. The tool caps recognized text at 200,000 characters and 512 KiB.
What happens when I change an image or conversion setting?
A successfully loaded replacement image or a change to mode, detail, cell size, alternative text or CSS class clears the previous output. Generate again for the current setup. An invalid replacement leaves the last valid image and output available. Changing only fragment/document view rebuilds the code without reprocessing the source.
Are results saved automatically?
No. Save current result explicitly stores up to six validated records in this browser, capped at 512 KiB each and 2 MiB total; older entries are removed to fit. Base64 records contain the original image bytes and metadata. OCR stores text and mosaic stores sampled RGBA data. Large results must be downloaded. Clear saved results also removes the old conversionHistory key.
What can Cancel stop?
Cancel discards the current operation’s result and terminates an available OCR worker. Image decoding, a synchronous encoding step or an OCR worker still initializing may finish internally; cancellation is not instant preemption of all browser work. A late initialized worker is terminated and another OCR initialization is blocked while it settles. Operations have a 120-second timeout.
Can I paste the generated code into WordPress?
Use an authorized Custom HTML/code insertion route and inspect the published page. WordPress roles, editors, security plugins or policies may strip data URLs, inline styles or markup. This tool does not bypass those restrictions. Inline styles give the output its basic sizing/colors; the chosen CSS class can be targeted by your site. Verify alternative text, OCR text and mobile layout before publishing.
Related image tasks
Continue with the right output format.
Ready to put your image into HTML?
Choose an image embed, recognized text or a pixel mosaic, then review the generated code.