Skip to content
Template Empire
Search components
Template Empire menu
ProductsCompareStandardsEnterpriseResources
Browse components

Media Resolution Audit

A free image resolution audit for React that compares source pixels with rendered size at a chosen display density.

Campaign launch · wide artwork

Field Notes campaign

Source pixel coverage

Field Notes campaign artwork

Coral mountain shapes and a pale sun above the Field Notes title
Caller-supplied image · intrinsic dimensions read from the loaded image

Loading image dimensions…

Packaging proof · portrait label

Silver Sage botanical label

Source pixel coverage

Silver Sage botanical label

A green sage sprig above the words Silver Sage on a cream label
Caller-supplied image · intrinsic dimensions read from the loaded image

Loading image dimensions…

Customise

Code

const sourceImage = "/images/campaign-wide.jpg";

<MediaResolutionAudit label="Campaign artwork audit" src={sourceImage} alt="A coral mountain illustration beneath a pale sun" />

Media Resolution Audit is a free image utility for Next.js and React, styled with Tailwind. It compares a loaded image's intrinsic pixel dimensions with its actual rendered CSS size at a selected device pixel ratio, then reports the minimum source dimensions and width and height coverage.

Use the target density presets from 1× through 4× to check campaign artwork, product imagery, editorial graphics and other caller-supplied images. It reads native image metadata and layout dimensions only; it does not inspect image pixels or make sharpness or quality claims.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/media-resolution-audit

Usage

import { MediaResolutionAudit } from "@/components/media-resolution-audit";

export function CampaignArtworkCheck() {
  return (
    <MediaResolutionAudit
      label="Campaign artwork audit"
      src="/images/campaign-wide.jpg"
      alt="A coral mountain illustration beneath a pale sun"
      targetDpr={2}
      className="max-w-3xl"
    />
  );
}

Props

PropTypeDefaultDescription
labelstringrequiredInstance-specific heading and accessible name for the audit region.
srcstringrequiredCaller-supplied image URL loaded by a native img element.
altstringrequiredMeaningful alternative text for the supplied image.
targetDpr1 | 1.5 | 2 | 3 | 42Initial target device pixel ratio. The component's native select remains available to change it.
classNamestringundefinedAdditional classes merged onto the audit panel.

Customisation

Supply a distinct label for each instance. Set the panel width through className or the consumer's layout. The audit measures the loaded image's rendered box after layout and on resize, so its dimensions follow the space your page gives it. Choose an initial density with targetDpr; visitors can change the target in the panel's native select.

<MediaResolutionAudit
  src={productImage}
  alt="Ceramic carafe in a warm studio"
  targetDpr={3}
  label="Product image audit"
  className="w-full max-w-2xl"
/>

Frequently asked questions

Is Media Resolution Audit free for commercial use?
Yes. Media Resolution Audit is MIT licensed. Preserve the licence notice when distributing source code.
Does this audit measure sharpness or image quality?
No. It compares the browser-reported intrinsic image dimensions with the rendered CSS dimensions and selected DPR. It does not read image pixels or determine whether an image looks sharp.
How do I choose a target display density?
Select 1×, 1.5×, 2×, 3× or 4× in the panel. The audit reports the minimum source dimensions for that target and the available source-pixel coverage on each axis.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js templates with considered media and responsive layouts. Browse the paid templates that pair with these free components.Explore Template Empire templates