Media
5 items
Description
Hover an image to see its displayed size, natural size, file size and format. Click to copy the size. Imgspect answers one question fast: how big is that image, really? Point at any image and a small card follows your cursor with the size on the page, the file's natural size, its weight and its format. No DevTools, no right-click chain, no page reload. WHAT YOU SEE • Displayed — the element's real size on the page, in CSS pixels • Natural — the intrinsic size of the file behind it • Scale — natural vs displayed, graded against your screen's pixel ratio • Ratio — the source aspect ratio, named as 16:9 or 3:2 when it is a common one • For @2x — the size the file would need to stay sharp on a Retina screen • File size — the actual bytes over the wire • Format — identifies the image format automatically • alt — the alt attribute, when the image has one THE SCALE VERDICT The percentage is colour-graded, so a glance is enough: • green — the file matches the space it fills • "low for @2x" — it will look soft on a Retina or HiDPI screen • "upscaled" — the source is smaller than its box; it is already blurry • "oversized" — far more pixels than the layout needs, paid for in bytes That is the part most size viewers leave out: numbers without a verdict still make you do the maths. WORKS WHERE OTHERS STOP • CSS background images, including full-width hero sections • Images sitting under a transparent overlay — a very common gallery pattern • srcset and picture: you get the variant the browser actually chose • canvas, video and inline SVG • data: URIs and lazy-loaded images • images inside iframes CLICK TO COPY Click an image and its size lands on your clipboard as 1280×710, ready to paste into a ticket, a spec or a chat. Alt+click copies the image URL instead. Either one confirms with a small toast and switches the inspector back off, so you are never left with an overlay you have to dismiss. While the inspector is on, clicks on images do not follow the link wrapped around them — no more being thrown onto a product page when you only wanted the dimensions. ON ONLY WHEN YOU ASK Click the toolbar icon, or press ⌘⇧S (Alt+Shift+S on Windows and Linux). An ON badge shows the state, Esc turns it off, and so does any copy. Until you switch it on, the extension does nothing to the page: no overlay, no listeners, no requests. It also works on tabs that were already open before you installed it, and it survives navigation inside single-page apps. PRIVACY Everything runs locally in your browser. Imgspect collects nothing, sends nothing, and has no account, no analytics and no remote server. The only network requests it makes are size lookups (HEAD or a one-byte Range request) for the exact image you are pointing at, sent to that image's own host — and only when the page's own load timings do not already know the answer. FOR Front-end developers checking asset pipelines. Designers verifying export sizes. SEO and performance people hunting oversized images. Anyone who has ever opened DevTools just to read two numbers.