Preparing a floor plan image for the web

A floor plan is the hardest image type to put on the web. It is mostly thin lines and small text, drawn for a printed A1 sheet, and it ends up rendering 380 pixels wide in a phone browser. Photos degrade gracefully at that scale; linework simply disappears.

Hotspots can't rescue an unreadable plan. If a visitor can't tell which room a dot sits in, the interaction fails no matter how good the popup copy is. Ten minutes of prep is the highest-leverage part of the whole job.

Target 1600–2000px on the long edge. That gives roughly 2x the pixels of a typical embed width, so it stays sharp on retina screens and survives a pinch-zoom.

• Under 1200px: room labels turn mushy as soon as anyone zooms. Too small for anything but a simple studio layout.
• 1600–2000px: the sweet spot for almost every plan, typically 200–600KB as an optimised PNG.
• Over 2400px: no visible gain at embed sizes, and a multi-megabyte file that stalls on mobile data. Only worth it for very large multi-wing plans.

Aim to keep the final file under about 1MB. A plan that takes four seconds to appear gets scrolled past.

AutoCAD. Plot to PNG rather than exporting the model view. Set a monochrome plot style so everything comes out solid black, choose a paper size that matches your plan's aspect ratio, and set the plot resolution so the output lands near 2000px wide. Freeze dimension and annotation layers you intend to replace with hotspot popups.

Revit. Use File → Export → Images and Animations → Image. Pick "Fit to" with 2000 pixels on the direction of the plan, and set the image size to raster rather than vector so line weights render predictably. Hide the view's crop region and scope box first.

SketchUp. Set a top-down parallel projection camera, then File → Export → 2D Graphic as PNG with "Use view size" unticked and a custom width of 2000px. Turn on "Anti-alias" and turn off shadows — shadows on a plan view read as smudges.

Canva, Figma, or Illustrator. Export at 2x scale as PNG. Check that no artboard background bleeds beyond the plan; a white frame around the drawing wastes clickable area.

This is the most common case — the plan arrives from an architect, a landlord, or a leasing brochure as a PDF page.

1. Export, don't screenshot. In Preview, Acrobat, or your browser's print dialog, export the page to PNG at 150–200 DPI. A screenshot is limited to your display resolution and will look soft when zoomed.
2. Straighten a scan. Even a two-degree rotation makes hotspot placement feel off. Most image editors have a deskew or straighten tool.
3. Push the contrast. Scans come out grey on grey. Raise contrast until walls are near-black and the background is clean white — a levels adjustment does this better than a brightness slider.
4. Clean up the noise. Dust specks and fold lines read as smudges once scaled. A quick despeckle pass is worth it on old drawings.

Every pixel of margin, title block, legend, north arrow, and revision stamp is a pixel the plan itself doesn't get. On a phone that difference decides whether room outlines are distinguishable.

• Crop to the drawing's bounding box plus a small consistent breathing margin.
• Drop the legend if your hotspots replace it — that is much of the point of an interactive plan.
• Keep a scale bar if dimensions matter to your audience; it's one of the few annotations worth the space.
• Prefer a landscape-ish aspect ratio where you have the choice. Very tall plans force desktop visitors to scroll and shrink badly in embeds.

One prep step people skip: check that each space you intend to hotspot has a clear area to put a dot in. Problem cases are worth fixing before upload.

• Narrow spaces — corridors, ensuites, closets — may not fit a dot inside their outline. Consider a smaller marker size or a leader placement just outside.
• Dense furniture symbols compete visually with markers. Exporting a furniture-free layer version usually reads better.
• Dark or heavily hatched fills swallow a dark dot. Either lighten the fill or plan on a light marker color for those rooms.

Once the image is ready, the rest is quick — see the interactive floor plan tool for placing the hotspots, or the full interactive floor plan guide for what to write in each popup.

• Long edge between 1600 and 2000px
• PNG for linework, JPEG only for renders
• Final file under about 1MB
• Title block, margins, and unused legend cropped away
• Walls near-black against a clean background
• Scan straightened and despeckled
• Every room you plan to hotspot has space for a dot
• Checked at phone width before uploading