consolelog.tools

Image Optimization Calculator

A responsive image planner. Enter your intrinsic dimensions and the largest CSS width an image is displayed at, and instantly get recommended breakpoints (with 1×/2× DPR variants), ready-to-paste <img srcset>, <picture> and Next.js <Image> markup, per-variant weight estimates, and how much you save versus shipping the full-size original.

About this ToolHow it works, benefits & use cases

This is a responsive-image planner. Give it the intrinsic (native) width and height of an image plus the largest CSS width it is ever displayed at, and it works out the source widths you should ship. It starts from a standard ladder (640, 768, 1024, 1280, 1536), keeps the widths up to 2× your display width to cover retina screens, always adds an exact-fit 1× and 2× variant, and caps everything to the intrinsic width so you never upscale. Each recommended breakpoint shows its scaled dimensions, the device-pixel-ratio it primarily serves, and the smallest estimated byte weight across the formats you picked. A savings card compares shipping the full-size original against what a typical max-width viewer actually downloads. Choose any mix of AVIF, WebP, JPEG and PNG and one encoder quality (1–100); the first format drives the primary srcset while JPEG or PNG act as the universal fallback. Switch between ready-to-paste <img srcset>, <picture>, and Next.js <Image> markup, then copy, download, share a link, or pipe the output to another tool. Everything recalculates live as you type.

How to Use

  1. 1Enter the intrinsic Width and Height (px), or load one of the example presets like Hero banner or Avatar.
  2. 2Set the Max CSS display width — the largest width the image is laid out at; breakpoints extend to 2× this for retina.
  3. 3Check the target formats (AVIF, WebP, JPEG, PNG) and drag the encoder quality slider for lossy formats.
  4. 4Read the savings card and breakpoints table for each width, its dimensions, DPR, and best estimated size.
  5. 5Pick the <img srcset>, <picture>, or Next.js markup tab, then copy, download, share, or pipe the generated code.

Key Benefits

  • Recommends source widths from a standard ladder plus exact-fit 1× and 2× retina variants
  • Caps every width to the intrinsic resolution so it never recommends upscaling
  • Estimates per-format byte weight (AVIF, WebP, JPEG, PNG) and shows the smallest per breakpoint
  • Generates copy-ready <img srcset>, <picture>, and Next.js <Image> markup with a matching sizes attribute
  • Shows estimated savings: full original versus what a max-width viewer downloads
  • Live recalculation as you change dimensions, display width, formats, or quality — no submit step
  • Shareable URL state plus copy, download, and pipe-to-another-tool on the output

Common Use Cases

  • Planning a responsive <picture> or srcset setup for a hero or article image before exporting assets
  • Choosing breakpoint widths that cover retina without upscaling past the source resolution
  • Estimating how much weight modern formats like AVIF and WebP would shave off a known image size
  • Producing a starting-point Next.js <Image> snippet with the right width, height, and sizes
  • Handing a ready-to-paste markup snippet to a build pipeline, CMS, or teammate via a shared link

Estimated savings

281.3 KB
Full original
125.0 KB
Responsive set
56%
Saved

Shipping the full 2400×1600 image in AVIF costs about 281.3 KB. With this plan a typical 800px (2× DPR) viewer downloads about 125.0 KB — roughly 156.2 KB less.

Recommended breakpoints (7)

Recommended responsive source widths, their dimensions, the device pixel ratio they primarily serve, and the best estimated byte weight per width.
WidthDimensionsDPRBest size
640w640 × 427×120.0 KB
768w768 × 512×128.8 KB
800w800 × 533×131.2 KB
1024w1024 × 683×151.2 KB
1280w1280 × 853×180.0 KB
1536w1536 × 1024×1115.2 KB
1600w1600 × 1067×2125.0 KB

Copy, download, share, or pipe to another tool

<img
  src="image-800w.jpeg"
  srcset="image-640w.avif 640w,
          image-768w.avif 768w,
          image-800w.avif 800w,
          image-1024w.avif 1024w,
          image-1280w.avif 1280w,
          image-1536w.avif 1536w,
          image-1600w.avif 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  width="2400"
  height="1600"
  alt="Description"
  loading="lazy"
  decoding="async"
/>
sizes attribute(max-width: 800px) 100vw, 800px

Intrinsic dimensions

px
px

The image's native pixel dimensions — the most resolution you have to work with. Source widths are capped here (no upscaling).

Display width

px

The largest CSS width this image is ever laid out at. Breakpoints are recommended up to 2× this width to cover retina (high-DPR) screens.

Target formats

The first selected format (most modern) drives the primary srcset; JPEG or PNG act as the universal fallback in <picture>.

Encoder quality

75

Applied to lossy formats (AVIF/WebP/JPEG). 70–80 is the sweet spot for photos; PNG is lossless and ignores this value.

Examples

Serve the right pixels, not the most pixels

Responsive images let the browser download only the resolution a device actually needs. A srcset lists the same image at several widths; the sizes attribute tells the browser how wide the image will render, so it can pick the smallest source that still looks sharp — including a 2× variant for retina screens. <picture> additionally lets newer formats (AVIF, WebP) be served to browsers that support them with a JPEG/PNG fallback for the rest.

Byte weights here are estimates based on typical photographic bytes-per-pixel for each format and quality — real encoder output varies with image content, chroma, and noise. Use them for relative comparison and planning, then confirm against your own pipeline.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools