How to Check an Image’s Format on a Website
Use DevTools to check an image’s Content-Type, then compare its URL and file bytes when they disagree.
To check the format of an image a website actually loaded, open your browser’s developer tools, find the image request in the Network panel, and inspect its Content-Type response header. Values such as image/jpeg, image/png, image/webp, and image/avif identify the format the server declared. A filename ending in .jpg is only a clue: a CDN may serve a different format, and browsers use the MIME type rather than the file extension to decide how to process a URL.MDN
1. Check the image in browser DevTools
- Open the page containing the image.
- Open developer tools with F12 or right-click the page and select Inspect.
- Choose the Network panel, then reload the page so its requests appear.
- Filter to image requests. In Chrome, try
resource-type:image. To narrow the list to a format, use a filter such asmime-type:image/webp. - Select the image request and inspect its response headers. Read
Content-Type.
For example, Content-Type: image/avif means the response is declared as AVIF, even if the request URL ends in .jpg. Chrome documents Network filters for resource type and MIME type in its Network panel reference.
Check the resource the page really loaded
A page may choose different image resources for different viewport sizes, device pixel ratios, or browser capabilities. DevTools shows the request made during that page load. If you need to know what a phone-sized layout serves, repeat the check with that viewport or device emulation selected, then reload.
The Sources panel can also list page resources and preview a loaded image. Use that to locate the resource; use the Network response header to check how it was declared. A preview by itself does not establish the HTTP Content-Type. See Chrome’s Sources panel documentation.
2. Interpret the three format clues
| Clue | What it tells you | How much to trust it |
|---|---|---|
HTTP Content-Type |
The format declared for the response, such as image/webp. |
Strong evidence of what the server sent, but a mistaken server header is possible. |
| URL or filename extension | A name-based hint, such as .png or .avif. |
Weak evidence. Rewrites, CDNs, and inaccurate names can make it misleading. |
| File bytes or successful decoding | The format represented by the content itself. | Useful to resolve disagreement; signatures are not available or infallible for every format. |
When the header, extension, and bytes agree, confidence is high. If they conflict, give more weight to the bytes and a successful decoder than to the filename. Treat the header as evidence of the server’s declaration, not an unbreakable guarantee that the bytes match it. MDN explains that browsers use MIME types rather than filename extensions to process URLs, and describes the limits of file signatures in its guide to MIME types.
Common image MIME types
| Format | MIME type | Common extension |
|---|---|---|
| JPEG | image/jpeg |
.jpg, .jpeg |
| PNG | image/png |
.png |
| GIF | image/gif |
.gif |
| SVG | image/svg+xml |
.svg |
| WebP | image/webp |
.webp |
| AVIF | image/avif |
.avif |
| APNG | image/apng |
.apng, sometimes .png |
These are common mappings, not an exhaustive list of image formats. MIME type definitions and format notes are available in MDN’s guide to image file types.
3. Resolve a mismatch by checking the response body
If the extension and Content-Type disagree, inspect the downloaded response rather than renaming it based on the URL. Use a trusted file-identification tool or a decoder that reports the detected format. Some formats have recognizable signatures: for example, PNG begins with bytes 89 50 4E 47, while GIF has a signature beginning 47 49 46 38. A signature is a useful clue, but not a universal or infallible test. MDN covers both the use and limitations of MIME checks and file signatures.
For a quick manual check, save the image from the Network request or open its request URL in a new tab, then inspect the saved file with a local identification utility. Avoid assuming that changing .jpg to .webp converts the image; renaming changes the name, not the encoded content.
4. Read image response metadata with JavaScript
For a URL your page is allowed to fetch, JavaScript can print the HTTP declaration. Run this in a page context or adapt it in your application:
async function inspectImage(url) {
const response = await fetch(url);
console.log("HTTP status:", response.status);
console.log("Content-Type:", response.headers.get("Content-Type"));
console.log("Final URL:", response.url);
}
inspectImage("https://example.com/image").catch(console.error);This reads the response header; it does not independently prove that the body is a valid image of that format. Cross-origin restrictions may prevent page JavaScript from reading a remote response unless that server allows the request through CORS. In that case, use DevTools or a request from an environment with access.
A Blob also has a type property, but do not treat it as definitive format detection. Browsers may infer it from the filename, and it may be empty. MDN documents Blob.type and the response header on Response.headers.
5. Why the URL says JPG but the browser serves WebP
A URL is not proof of the bytes it returns. A CDN or image service can negotiate or transform an asset and return WebP or AVIF while keeping a source-looking URL. A responsive page can also select a different image resource based on viewport or device pixel ratio. Check the actual request and its response headers in the page state you care about. If the question is whether the body truly contains WebP, confirm it with a decoder or content-based identification too.
6. Troubleshooting
| Problem | Likely cause | What to do |
|---|---|---|
| No image request appears | The Network panel was opened after loading, the list is filtered, or the image has not loaded yet. | Clear the filter, reload with DevTools open, and scroll to trigger lazy loading. |
| The request URL has no extension | The site uses an endpoint, generated URL, or CDN route. | Inspect Content-Type; extensions are optional and not authoritative. |
| The header says one format but the file tool says another | The server header may be wrong, or a proxy or transformation changed the body. | Check the bytes with another trusted decoder and report the discrepancy to the asset or server owner. |
| JavaScript reports a CORS error | The remote server does not grant your page permission to read the response. | Inspect in DevTools, or make the request from a server-side environment you control. |
Blob.type is empty or unexpected |
The browser may not know a MIME type or may have inferred it from a name. | Read the HTTP response header and, if needed, inspect the bytes. |
| The format changes between desktop and mobile | Responsive image selection or device-specific delivery chose another resource. | Repeat the capture at the viewport and device pixel ratio that matters. |
| The image request is blocked or fails | The image may require authentication, be blocked by policy, or have a network error. | Check the request status and initiator; use the authorized page session and retry after the underlying network issue is resolved. |
7. Performance and reliability
For one image, DevTools is usually the quickest method and adds no separate download if the page already loaded it. For repeatable checks across many URLs, automate a request and record the status, final URL, and Content-Type; fetch the body only when you need content-based verification. Be mindful that a transformed image may vary with request headers, viewport, or cache state, so record the conditions relevant to the result.
For a high-confidence answer, combine the response declaration with a decoder or signature check. Neither a filename nor a MIME header alone establishes that the bytes are valid. If you only need to know what the browser was told to process, the response header is the direct answer.
8. Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. A screenshot can preserve the page for visual inspection, but it does not replace DevTools when you need the original image response’s exact Content-Type. The API returns a clean screenshot or PDF; see the ScreenshotNeo documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month, with no card required.
FAQ
Can I check an image format without downloading it?
Yes. Inspect the image request’s Content-Type in DevTools. That tells you the server’s declared type; checking the actual bytes requires fetching or saving the response.
Is WebP always smaller than JPEG?
No single format is always smaller for every image and encoding setting. This check identifies the delivered format; it does not compare file size or visual quality.
Does a screenshot reveal the original image file format?
No. A screenshot captures the rendered page as an output image. Use the original image request in Network to inspect its response metadata.
