How to Convert an Image Into HTML and CSS

If you have a screenshot or mockup and want a webpage that resembles it, treat the image as a visual reference: identify its content and layout, write semantic HTML and CSS, then render and refine the result. Pixels do not reveal the original DOM, source assets, responsive breakpoints, or interactions, so no converter can recover those details from one image alone.

First decide which job you mean: recreate a page shown in an image, display the image itself, make parts of it clickable, or slice a composite graphic into assets. Those are different tasks with different accessibility and maintenance tradeoffs.

1. Choose the right approach

Your goal	Use	Important limit
Rebuild a page from a screenshot	Semantic HTML and CSS, using the screenshot as a reference	The image does not specify hidden behavior, source text, or responsive rules.
Show the original graphic	An `<img>` element	Provide alternative text based on the image’s purpose.
Make regions of an image clickable	Prefer ordinary links alongside the image; use an image map only when region-based interaction is necessary	Image-map coordinates can be difficult to maintain and may not scale well on mobile.
Reassemble a fixed composite graphic	Export image slices and position them with HTML/CSS	This does not recover a responsive, semantic page.

Google recommends avoiding image maps for ordinary navigation because of accessibility, mobile, and maintenance issues. If you need one, provide useful names for every actionable region and equivalent text links. Google’s image guidance and WAI’s image-map tutorial explain the tradeoffs.

2. Reconstruct a screenshot as a webpage

Step 1: Gather enough references

Write down the intended deliverable: a static visual demo, a responsive page, an interactive prototype, or a faithful reproduction. If responsive behavior matters, get narrow and wide references. One screenshot cannot tell you how the page should reflow at other widths, what appears on scroll, or how hover and focus states behave.

Collect original text, logos, photos, icons, and fonts when available. Use original assets instead of trying to reproduce a photograph with CSS. Treat OCR, font identification, and inferred component boundaries as estimates to review.

Step 2: Measure the large shapes first

Estimate the content width, columns, gutters, section heights, alignment, and repeated spacing. Then refine typography, colors, borders, and corner radii. Use CSS variables for measurements and colors that recur.

Step 3: Write semantic markup and layout CSS

Use headings, navigation, main content, sections, buttons, and links for their actual purposes. Use grid or flexbox for layout and normal document flow for content. Reserve absolute positioning for genuine overlays rather than positioning every element independently. Keep visible text as text so it can be selected, searched, translated, and exposed to assistive technology.

Here is a complete, responsive starting point. Replace the sample copy and measurements with what you can identify in your reference. Save it as index.html and open it in a browser.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Northstar — a sample landing page</title>
  <style>
    :root {
      font-family: system-ui, sans-serif;
      color: #182230;
      background: #f6f7f9;
      --content: 68rem;
      --space: 1.5rem;
      --accent: #2457d6;
    }
    * { box-sizing: border-box; }
    body { margin: 0; }
    a { color: inherit; }
    .wrap { width: min(var(--content), calc(100% - 2 * var(--space))); margin-inline: auto; }
    header { background: white; border-bottom: 1px solid #e2e6ed; }
    .nav { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .brand { font-weight: 750; text-decoration: none; }
    nav { display: flex; flex-wrap: wrap; gap: 1rem; }
    .hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3rem; padding-block: clamp(3rem, 9vw, 7rem); }
    h1 { max-width: 12ch; margin: 0 0 1rem; font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -.04em; }
    .lead { max-width: 54ch; color: #526071; font-size: 1.125rem; line-height: 1.6; }
    .button { display: inline-block; margin-top: .75rem; padding: .8rem 1.1rem; border-radius: .5rem; background: var(--accent); color: white; font-weight: 650; text-decoration: none; }
    .card { min-height: 17rem; padding: 2rem; border: 1px solid #dce2eb; border-radius: 1rem; background: linear-gradient(145deg, #e9f0ff, #fff); }
    .card p { color: #526071; line-height: 1.55; }
    .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-bottom: 4rem; }
    .feature { padding: 1.25rem; border-radius: .75rem; background: white; }
    .feature h2 { margin-top: 0; font-size: 1.1rem; }
    @media (max-width: 700px) {
      .hero { grid-template-columns: 1fr; gap: 1.5rem; }
      .features { grid-template-columns: 1fr; }
      .nav { align-items: flex-start; flex-direction: column; padding-block: 1rem; }
    }
  </style>
</head>
<body>
  <header>
    <div class="wrap nav">
      <a class="brand" href="#top">Northstar</a>
      <nav aria-label="Main navigation">
        <a href="#features">Features</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </nav>
    </div>
  </header>
  <main id="top" class="wrap">
    <section class="hero" aria-labelledby="hero-title">
      <div>
        <p>A short eyebrow</p>
        <h1 id="hero-title">Build a clearer first impression.</h1>
        <p class="lead">Replace this sentence with the real headline and supporting copy from your reference. Keep it as HTML text.</p>
        <a class="button" href="#features">Explore the details</a>
      </div>
      <div class="card" aria-label="Decorative placeholder panel">
        <h2>A visual asset goes here</h2>
        <p>Use the original image or illustration when available. Give informative images suitable alternative text.</p>
      </div>
    </section>
    <section id="features" class="features" aria-label="Key features">
      <article class="feature"><h2>First point</h2><p>A concise explanation.</p></article>
      <article class="feature"><h2>Second point</h2><p>Another concise explanation.</p></article>
      <article class="feature"><h2>Third point</h2><p>A final concise explanation.</p></article>
    </section>
  </main>
</body>
</html>

Step 4: Render, compare, and refine

Open the file at the reference viewport. Compare the broad geometry first, then spacing, type size, colors, and details. Check another width if the page should respond. Inspect keyboard navigation, focus visibility, link and button behavior, and image alternatives. Adjust the CSS and repeat; do not assume visual similarity means the markup or interactions are correct.

3. Display an image instead of rebuilding it

When the graphic itself is the intended content, use an image element. Write alternative text according to its purpose: describe informative content concisely, use an empty value for decoration, and explain complex diagrams in nearby text. A useful check is whether replacing the image with its alternative text would preserve the page’s meaning. See Google’s guidance on diagrams and images.

<!-- Informative image -->
<img src="architecture.png" alt="Diagram showing requests flowing from a browser to an API and database">

<!-- Decorative image -->
<img src="corner-decoration.svg" alt="">

<!-- Complex image: put the detailed explanation in nearby text -->
<figure>
  <img src="quarterly-chart.png" alt="Quarterly revenue increased from Q1 to Q4">
  <figcaption>Revenue rose each quarter; the accompanying report gives the full values and methodology.</figcaption>
</figure>

For responsive display, constrain the image to its container, for example with max-width: 100%; height: auto. For large images, provide appropriately sized source files rather than forcing a small asset to stretch.

4. Make image regions clickable only when needed

An image map associates one image with clickable geometric regions. Each region needs a useful text alternative naming its action or destination. Coordinates are tied to the rendered image dimensions, so scaling can break their alignment on mobile; browser behavior can also vary. WAI recommends equivalent text links, and Google advises avoiding maps for ordinary navigation.

<img src="campus-map.png" alt="Campus map; links to locations are listed after the map" usemap="#campus">
<map name="campus">
  <area shape="rect" coords="20,30,180,140" href="library.html" alt="Library information">
  <area shape="circle" coords="260,100,35" href="cafe.html" alt="Cafe information">
</map>
<ul>
  <li><a href="library.html">Library information</a></li>
  <li><a href="cafe.html">Cafe information</a></li>
</ul>

Use coordinates measured against the image’s intrinsic pixel dimensions, and verify every target after resizing. For ordinary site navigation, regular links styled to match the design are easier to access and maintain. The HTML Standard’s image-map section defines the relevant elements and their semantics.

5. Slice a composite graphic

When you have one fixed artwork file and need to export it in pieces, image-editing software can slice and export regions for assembly with HTML or CSS. Adobe documents this workflow for Photoshop. It can help with a fixed legacy graphic, but every slice remains image content; slicing does not infer page structure, selectable text, responsive breakpoints, or accessible controls. See Adobe’s Photoshop slice documentation.

6. Tools and what they can tell you

A screenshot-to-code tool can provide a draft, but its output needs review. Fronty describes uploading screenshots, exports, or sketches to produce HTML/CSS on its own product site; that is a vendor description, not an independent assessment of quality. The Calque project describes a local screenshot-measurement workflow and notes limits such as having one screenshot and not capturing scroll or hover states. Treat project capability and limitation descriptions as maintainer claims. Neither source establishes general conversion accuracy.

For a faithful page, use any generated markup as a starting point: inspect structure, replace rasterized text with actual text, verify asset rights and responsive behavior, and test keyboard use. If the page should be private, review a hosted tool’s upload and retention practices before sending it a screenshot. A local workflow avoids uploading the reference to a hosted converter, though you still need to inspect its generated output.

7. Troubleshooting common problems

Symptom	Likely cause	Fix
The result looks close at one size but breaks on mobile	The screenshot only shows one viewport, or the layout uses fixed positions and widths.	Get a narrow reference if possible; use fluid widths, grid/flex layouts, and media queries. Check multiple widths.
Text looks wrong or is hard to edit	OCR guessed incorrectly, or text was left inside an image.	Transcribe and correct it as HTML text; verify font family, size, weight, and line height.
Images appear stretched or cropped	Wrong source asset, fixed dimensions, or unsuitable fit behavior.	Use the original asset when available; preserve aspect ratio and choose cropping deliberately.
Image-map links miss their targets after resizing	Area coordinates no longer align with the scaled image.	Prefer ordinary links. If a map is essential, test at every target width and keep equivalent text links.
The page is visually close but inaccessible	Image-only text, missing alternatives, or controls that are not real links/buttons.	Use semantic elements, meaningful alternatives, keyboard-operable controls, and visible focus styles.
The screenshot does not show a menu or hover state	That state is absent from the reference.	Request additional references or define the missing behavior explicitly; pixels cannot specify it.

8. Performance, reliability, and cost

A static HTML/CSS reconstruction has no screenshot conversion service cost once you have the code, but manual inspection and refinement take time. Reusing appropriately sized source assets avoids unnecessary image weight; responsive layout rules reduce the need to maintain separate fixed compositions. Hosted converters can save drafting effort, but compare their current pricing, privacy terms, and output controls directly: the cited research does not establish current prices, data handling, or independently measured quality.

For repeatable work, keep the source screenshot and asset files, record the target viewport, and capture references for important states and widths. The screenshot alone is not a reliable specification for behavior or responsive design.

Or skip the browser setup

If you need a clean reference screenshot to guide the rebuild, ScreenshotNeo returns a screenshot or PDF from one API request. Its API can remove cookie banners, popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. One thousand screenshots a month are free with no card; paid plans start at $5 for 3,000.

Read the ScreenshotNeo API docs. Example cURL request:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

FAQ

Can a screenshot reveal the original HTML and CSS?

No. It shows rendered pixels, not the source DOM, stylesheets, assets, breakpoints, or behavior. You can build a visual approximation, but missing information has to come from other references or decisions.

Usually not. Use normal text links for accessible, scalable navigation. Reserve image maps for cases where interaction must follow regions in a single image, and provide equivalent links.

Is it better to use a converter or write the page by hand?

A converter may help produce a first draft. Hand review is still needed for semantics, responsive behavior, correct text and assets, accessibility, and interactions.

Can I make text inside a screenshot selectable with CSS?

No. Text baked into raster pixels is still part of an image. Recreate it as HTML text if it needs to be selectable, searchable, translatable, or accessible.