Image budgets for editorial websites

An editorial image budget should limit what a page delivers, not merely what an editor uploads. Define budgets for lead images, thumbnails, and galleries, then test the rendered page on representative devices. A small source file can still be delivered wastefully, and aggressive compression can destroy the detail that makes a photograph useful.

Budget by image role and page type

Start with your article template and section landing page. Count the images visible on first load and inspect the actual files requested by a browser. Record rendered dimensions, transferred bytes, format, and whether each image contributes to the reader’s task.

Set separate expectations for a thumbnail and a full-width documentary photograph. A single upload limit cannot express that difference. Keep the original in an appropriate archive, then produce delivery variants rather than asking editors to overwrite their only usable source.

The CMS should display a warning in editorial terms: “This lead image exceeds this template’s budget” is actionable. A raw compression percentage is not. Give the editor a preview and a route to request an exception.

Let the template handle delivery choices

Use image derivatives appropriate to layout. web.dev’s responsive images guidance explains how srcset supplies candidate resources and sizes describes the rendered size. Check the request actually selected by the browser; generating variants does not prove the template uses them.

Loading strategy also matters. web.dev advises against lazy-loading the LCP image, because that delays discovery and loading of a likely largest visible element. Images farther down the article can follow a different strategy. Do not apply one loading attribute blindly to every photograph.

Separate performance checks from editorial checks. An image can meet the byte limit while cropping out the subject or making a chart unreadable. Captions, credits, and appropriate text alternatives remain part of publication readiness.

A hypothetical budget for a magazine template

Suppose a magazine proposes these starting limits. All numbers below are hypothetical examples, not universal recommendations or 5e Labs results.

Delivered item	Example limit	Editorial exception
Mobile article lead	180 KB	Fine documentary detail
Section thumbnail	45 KB	Text or chart requiring another treatment
Initial article image payload	300 KB	Reviewed photo essay

If the lead uses 160 KB and four immediately loaded images each use 60 KB, the initial payload is 400 KB. Every individual image might look reasonable, but the page exceeds the proposed total. The response may be to defer nonessential images rather than damage all five with more compression.

Compare the compressed lead against the source at its intended display size. If the subject’s face becomes visibly degraded, try a different crop or encoding choice before granting an unlimited exception.

Make exceptions expire with the template

Record who approved an exception, why detail mattered, and which page or template it applies to. Revisit budgets when layouts, ad placements, or audience devices change. Measure actual pages after editors use the system, not just an empty demonstration template.

Start with one published article: inspect its delivered images and propose a budget from that evidence. A web development review with 5e Labs can turn that proposal into upload processing and template behavior editors do not have to manage manually.