A repeatable image export check before publishing a web page

#webdev #tools #productivity

An image can look fine in an editor and become unreadable in an article. The useful comparison is the exported file at the width where readers will see it.

This is a practical workflow for web builders preparing photos and screenshots. It proposes a repeatable method; it does not report a compression benchmark.

Disclosure: I am affiliated with TinyImage, HEIC to PNG, HEIC to JPEG and DR Checker. This article includes competing tools and was prepared with AI assistance. Product-page details were checked on 11 October 2026.

Start with the layout

Write down the content width before opening a compressor. A screenshot displayed in an 800-pixel article column has different requirements from a full-width photograph.

Keep the original privately. Crop a working copy to the useful subject, then create candidate sizes. Compare those candidates at the actual article width. If a screenshot's labels need zooming, a tighter crop or two separate screenshots may communicate more clearly than a larger download.

Choose an output for the content

For a photograph, start with JPEG and compare WebP or AVIF when the publishing stack supports them. For interface screenshots, start with PNG or a lossless alternative and inspect fine text. For an existing vector logo, consider retaining SVG.

The MDN image format guide explains the tradeoffs. There is no format that is smallest and most appropriate for every image.

If a CMS rejects a phone's HEIC file, conversion is a compatibility step. HEIC to JPEG offers a direct photographic output; HEIC to PNG offers a PNG intermediate for subsequent editing. Both describe browser-local conversion and omission of EXIF. Preserve the original if capture metadata matters.

Compare exports with the same dimensions

Use Squoosh for an interactive local comparison, your CMS's image pipeline, or a hosted tool such as TinyImage. Choose the processing model that fits the image and your workflow.

TinyImage documents 250 successful website conversions per month. Its API allowance is a separate one-time trial. Compression and conversion can use temporary server storage; consult its privacy policy before uploading sensitive media.

For a fair first comparison, keep dimensions and output format constant. If one output is half the width, the size difference cannot be attributed to compression alone. Quality slider values from different encoders also need not be equivalent.

Record actual file bytes. Then calculate:

savings_percent = 100 * (original_bytes - output_bytes) / original_bytes

Keep negative values. An export that grows is a useful observation, not a result to discard.

Give the browser appropriate candidates

Here is an illustrative example, not a tested production configuration. Generate the files and adapt the layout values before using it:

<img
  src="/images/workbench-800.jpg"
  srcset="/images/workbench-800.jpg 800w,
          /images/workbench-1600.jpg 1600w"
  sizes="(max-width: 840px) calc(100vw - 32px), 800px"
  width="1600"
  height="1000"
  alt="Woodworking tools arranged on a workbench"
>

The sizes value should match the CSS layout. The dimensions should match the actual aspect ratio. Check the final rendered page rather than assuming the CMS preserves the markup exactly.

Google's image guidance is a useful primary reference for discoverable image elements and descriptive context.

Keep a small evidence log

For each candidate, record source hash, date, tool, browser, output format, dimensions, quality setting, original bytes, output bytes and visual notes. Inspect at article width and at 100% pixel view. Look for halos, unreadable labels, changed colors and broken transparency.

If you time the process, define the start and end events and repeat the run. A single stopwatch result mixes too many variables to support a general claim that one service is faster.

Finally, open the published URL on a narrow screen and a desktop. Check the image, caption, alternative text and download behavior. The goal is a page readers can use comfortably, with measurements that another editor can reproduce.

The expanded Practical Image Workflows resource includes tool-limit tables, metadata considerations and a comparison protocol.