Having more information is typically what you want when working with print. Throwing a 300 DPI non compressed 45 MB CMYK Tiff into a spread for an Offset Print run on your catalog or editorial magazine is perfectly normal. Your InDesign will load no problem and link your hi-res assets then output your plates.
Once you take this to the world of HTML5 its a whole different story.
There are certain standards you need to abide by when coding for browsers. Yes your InDesign document may open up on your local drive in a matter of milliseconds but what about your consumers that may be reading your publication on there phone via a slow LTE/5G network. If you throw one 15 MB hero image that isn’t optimized you are going to suffer terrible LCP (largest contentful paint) scores and most likely will cause CLS as well as your bounce rate.
These are some of the steps you should follow if you want to publish a clean lightweight modern digital publication out of InDesign. Stop thinking about assets the way you would in print and start triaging your assets into vector/raster/live code.
1. The Asset Triage: Understanding the Three Formats
Before exporting a layout to HTML5, every visual element placed on your InDesign spreads should be categorized intentionally into one of three buckets:
┌───────────────────────────────┐
│ Is it text or typography? │
└──────────────┬────────────────┘
│
YES ────────────┴──────────── NO
│ │
▼ ▼
┌─────────────────┐ ┌────────────────────────┐
│ LIVE CODE │ │ Scalable shapes/icons? │
│ (DOM + .woff2) │ └───────────┬────────────┘
└─────────────────┘ │
YES ────────────┴──────────── NO
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ VECTOR │ │ RASTER │
│ (Clean Web SVG) │ │ (WebP / AVIF) │
└─────────────────┘ └─────────────────┘
- Live Code (DOM + CSS): Text, buttons, UI borders, tint blocks, background colors, and simple drop shadows.
- Vector (SVG): Logos, icons, complex line art, technical diagrams, and decorative flourishes without gradient meshes.
- Raster (WebP, AVIF, Optimized JPEG): Continuous-tone imagery, photographic content, complex textures, and hyper-detailed raster digital painting.
2. Vectors: Taming the Illustrator-to-SVG Pipeline
You can drop a native .ai file on your InDesign document. However when doing this with complicated vectors they will cause a large SVG export if not checked before export.
The Dangers of Auto Vector Exporting
If you use an auto export tool or script to convert your placed illustrator vectors to svg. It will output all points, clips masks and hidden layers to your code. Which can easily make a small vector become a 1.8 mb xml path file.
Best Practices for SVG Delivery
- Cleaning Paths at Source: Always clean up your paths in adobe illustrator (or whatever program your using) before exporting them as vectors. You can do this by selecting all of your paths and going object > path > simplify. This will reduce your point count drastically.
- Avoid Transparency Masks: Using transparency masks can cause bloat in your svg when its converted to filters. These can become very taxing on a browsers GPU if there are many layers of opacities and blend modes being used.
- Remove any unneeded Metadata: When you pull an svg straight from your desktop application there are usually a ton of extra meta data that can be stripped out. By using a svg optimizer you can typically see your file sizes decrease by 40-70%. Some great tools for doing this are SVGO and SVGOMG (web based).
- Dont rasterize on Export: If you have your vector set to rasterize on export you will lose the benefits of having a true svg. An svg can look crisp on retina displays and 4k screens while being lightweight on different viewport sizes.
3. Raster Assets: Breakpoints, Densities, and Modern Formats
Photographs cannot be rendered as code or vectors, but they can be compressed and served dynamically using modern web conventions.
Eliminating 300 DPI Legacy Habits
Web browsers do not care about the physical DPI metadata of an image file; they care strictly about pixel dimensions (width × height) and byte weight. Placing a 6000 × 4000 px photo inside a 400 × 300 px frame on an InDesign spread means your visitor will download millions of pixels they will never actually see.
Implementing Responsive Breakpoints (srcset & <picture>)
Instead of serving one monolithic raster asset, web standards dictate using responsive image markup. When exporting InDesign layouts to HTML5, configure your raster pipelines to generate multiple scaled variations (e.g., 400w, 800w, 1200w, 1600w) and map them using HTML5’s srcset and sizes attributes:
<picture>
<source type="image/avif"
srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1600.avif 1600w"
sizes="(max-width: 600px) 100vw, 50vw">
<source type="image/webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 50vw">
<img src="hero-800.jpg"
alt="Editorial hero showcase"
loading="lazy"
width="800"
height="600">
</picture>By leveraging srcset, a visitor reading on a mobile device downloads a ~40 KB asset, while a desktop user on an Apple Studio Display fetches the crisp 1600w version.
Next-Gen Compression: WebP and AVIF
Retire legacy PNG and JPEG defaults for continuous-tone images whenever possible. Modern image formats like WebP and AVIF achieve superior compression ratios, frequently yielding 25% to 50% smaller payloads than comparable JPEGs at identical perceptual visual quality.
4. Live Code: Stop Baking Typography into Pixels
The single most common mistake made when transitioning print layouts to the web is rasterizing text blocks. In print, designers often convert intricate pull quotes, decorative drop caps, or callout boxes into curves or raster graphics to ensure zero layout shift. On the web, this practice degrades the user experience:
- Accessibility Failure (WCAG): Screen readers cannot parse text flattened into pixels without manual, verbose
altdescriptions. - No Search Engine Indexing: Crawlers cannot index flattened headlines or body copy.
- Loss of Sharpening and Scalability: Baked text blurs or pixelates when users pinch-to-zoom on mobile devices.
- Bandwidth Waste: Loading a 300 KB PNG of a multi-line title is vastly more expensive than loading a 25 KB
.woff2font file once and letting the browser render all headings across the entire publication in live DOM typography.
Setting Up Live Code in InDesign
- Rely on Strict Style Mapping: Map InDesign Paragraph Styles directly to semantic HTML heading tags (
h1,h2,h3,p,blockquote). - Export with Modern Web Fonts: Convert desktop OpenType (
.otf) or TrueType (.ttf) fonts into compressed.woff2font files. - Use CSS for Effects: Instead of rasterizing frames with soft drop shadows or gradients, instruct your export pipeline to generate native CSS rules (
box-shadow,linear-gradient,border-radius).
The Golden Rule for HTML5 Exports
When prepping an InDesign document for an HTML5 workflow, remember this hierarchy:
If it can be styled with CSS, write code. If it is flat, crisp, and scalable, export SVG. If it is a photo, compress it into modern raster formats with responsive breakpoints.
Adopting this discipline turns heavy, print-bound publications into blazing-fast, accessible, and responsive digital web experiences.