Image Dimensions Viewer
Note: Setting width and height on the tag is what lets the browser reserve space before the file arrives. Without them everything below the image jumps when it loads — a measured layout shift, fixed by two attributes.
Bytes per pixel is the figure worth looking at first, because it is comparable across images of different sizes. A well-compressed JPEG photograph lands somewhere between 0.1 and 0.3. A PNG screenshot of mostly flat colour might be 0.05 and is fine. A PNG holding a photograph is often above 1.0, and that is the signal that the format is wrong rather than the compression — the fix is to convert it, not to squeeze it harder.
Drop several files at once and they are listed together, which is the practical way to audit a folder before uploading it. Sorting by weight puts the offenders at the top, and it is usually one or two files rather than the average that is causing the problem.
For each image you also get a ready-made img tag with width and height set. Those two attributes are not decoration: without them the browser cannot reserve space before the image loads, so everything below it jumps down when it arrives. That is a layout shift, it is measured, and setting two attributes is the entire fix.
Frequently Asked Questions
Why should I set width and height when CSS controls the size anyway?
Because they let the browser reserve the correct space before the file arrives. Without them, the space collapses to zero and everything below jumps when the image loads — a layout shift that counts against Core Web Vitals. Modern browsers use the two attributes only to compute the ratio, so CSS still controls the actual size.
What is a good bytes-per-pixel figure?
Roughly 0.1 to 0.3 for a photographic JPEG or WebP, and much lower for flat graphics. Above about 1.0 usually means a photograph is stored as PNG, where the fix is converting the format rather than compressing harder.
Are my images uploaded?
No. Each file is read locally through an object URL and measured once the browser has decoded it. Nothing is transmitted, so you can safely check client work or unreleased assets.
Why does an SVG show no pixel dimensions?
Because it often has none — a vector file may define only a viewBox and scale to whatever box it is placed in. Where a width and height are declared, those are reported; where they are not, the ratio from the viewBox is all there is to show.
