Website Image Size Checker: A Practical Guide

By Image Size Checker · Published September 30, 2026

To check a website image, find the actual source file and compare it with the space it occupies on the page. Its source dimensions, displayed dimensions and file size answer three different questions.

This guide helps you inspect a website image in your browser. The checker measures a saved image file locally, one file at a time. It does not scan a website address or inspect every image on a page.

Check a saved website image →

1. Find the image’s source file

1. Open the page at the screen width you want to check. Scroll the image into view so a lazy-loaded image has time to appear.
2. For a normal image, right-click it and choose Open image in new tab when that option is available.
3. Save the image from its own tab. Choose the actual image file rather than a screenshot or a page thumbnail.
4. Choose that saved file in the image dimensions checker. Read its width, height, format and exact bytes.

If the image menu is unavailable, use your browser’s Inspect command. Select the image element in the Elements panel and inspect the source it uses. For a responsive image, the source can differ from the value written in its src attribute.

A CDN or website can resize or convert images before delivery. Measure the file your browser received. The original photo on the publisher’s computer can have different dimensions or a different format.

2. Compare source dimensions with displayed size

Source dimensions describe the saved raster file’s pixel grid. Displayed dimensions describe how much space the image occupies in the website layout, usually in CSS pixels. A website can show a large source image inside a much smaller area.

Both have a 3:2 ratio. The source has four times as many pixels in each direction, but this does not imply a fixed byte size or compression saving. High-density displays may benefit from more source pixels than CSS pixels; the useful size depends on the layout and intended devices.

In Chrome DevTools, inspect the image and use its layout or image preview information to review the displayed and intrinsic dimensions. The browser’s naturalWidth is an intrinsic, density-corrected value in CSS pixels. With density descriptors or browser adjustments it can differ from the saved file’s raw pixel width. Measure the saved file when you need an exact upload dimension.

Reference: MDN on intrinsic image dimensions.

3. Check the file actually used at that viewport

Responsive images

An image using srcset or <picture> can deliver a different file for a phone, a desktop or a high-density screen. Check the image at the intended viewport and save the selected candidate. The currentSrc property identifies the source URL selected by the browser; it is not a file-size measurement.

For a closer check, open DevTools’ Network panel, filter image requests and reload the page. Select the relevant request to confirm its URL and preview. See Chrome’s Network panel reference and MDN on the selected image source.

CSS backgrounds and cropped images

A CSS background may not offer an image-specific context menu. Inspect the element’s background-image or locate the image request in the Network panel, then open and save that resource. With background-size: cover or object-fit: cover, the page can crop the image. The visible rectangle does not tell you the source file’s dimensions.

SVGs, canvas and generated images

An SVG’s layout size and viewBox describe a vector graphic, not a fixed raster pixel grid. Canvas or generated images may require an export from the application that created them. Check that exported file rather than assuming the on-screen size describes its storage size.

4. Check website image file size in KB and MB

Choose the saved source in the image file size checker. It shows exact bytes along with KB and MB. The file-size readout uses 1,024 bytes per KB; upload-limit checks can use 1,000 or 1,024.

A network transfer figure can reflect cache behavior and HTTP overhead, so it may differ from a saved file’s size. Use the saved file’s byte count for a file upload rule. Use the Network panel when you want to understand requests and delivery on the page.

There is no universal maximum KB value for every website image. A small icon and a detailed full-width photograph serve different purposes. Use the site’s upload rules or performance budget, then review image quality at the intended display size.

Check a 200 KB maximum → Check a 500 KB maximum →

5. Prepare and verify the file you will publish

1. Record the intended display area and the site’s accepted format, pixel requirements and file-size limit.
2. Check the actual source file. If it does not meet those rules, resize or compress a separate copy in the checker.
3. Read Download checks for the generated file’s actual dimensions, format and bytes. Review the preview before saving.
4. Publish that file using your site’s normal workflow, then check the delivered image again. The CMS or CDN may transform it.
5. Keep the original and include the checker report with a design handoff when the recipient needs the measurements.

Inspect a saved source image →

Related: file size and upload limits · image size on a computer or phone · tool capabilities