Recommended Free Tools
To find out what image format a website actually served, inspect the image request in your browser’s Developer Tools and read its Content-Type response header. A URL ending in .jpg is only a clue: a site or CDN can serve a different format under that name. If the header and filename disagree, verify the downloaded image’s contents with a file-identification tool or decoder.
Three ways to identify an image format
There are three different clues, and they do not have equal weight:
- HTTP declaration: the response’s
Content-Typeheader, such asimage/webp. This tells you the format the server declares for the resource. - Filename clue: the URL or saved filename ending, such as
.jpgor.avif. It may reflect the format, but it can be stale, rewritten, or misleading. - Content confirmation: the resource’s bytes or whether an image decoder can successfully read it. This is useful when the name and header conflict, though signatures are not infallible and not every format has a simple magic number.
If all three agree, confidence is high. If they do not, do not treat the filename as proof. Check the actual response and, when the distinction matters, inspect or decode the bytes.
Check the format in Chrome DevTools
The Network panel is the best general method because it shows the resource requested during the page load, along with its response headers. Chrome’s filter syntax includes resource-type:image and MIME-specific filters such as mime-type:image/webp.
#1 Best Overall
- Open the page containing the image.
- Open Developer Tools with F12, or right-click the page and choose Inspect.
- Select the Network panel.
- Reload the page while Network is open so the image requests are recorded.
- Filter to image requests. You can use the image-type filter in the panel or enter
resource-type:image. To narrow results to WebP, for example, trymime-type:image/webp. - Select the request matching the image. If there are several, compare the request URL and preview with the image you mean.
- Inspect the response headers and find
Content-Type. Values such asimage/jpeg,image/png,image/webp, orimage/avifidentify the server-declared media type.
The Network panel may show several related image requests, including thumbnails, alternate sizes, or images loaded only after scrolling. Select the particular request used for the image you are investigating rather than assuming the first image-like URL is the right one.
What the common MIME types mean
| Format | Typical MIME type | Common filename ending |
|---|---|---|
| JPEG | image/jpeg |
.jpg or .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 |
Often .apng or .png |
These are common mappings, not a guarantee that an extension matches the response. In particular, an APNG can use a .png ending, and a URL can retain an old extension after a CDN changes the delivered format.
Check a loaded image in the Sources panel
Chrome’s Sources panel lists resources used by a page and can open an image in a preview. This is handy when you want to locate and visually confirm a loaded resource. The preview tells you which image resource you opened, but it does not replace checking the Network response’s Content-Type when you need to establish the declared format.
- Open Developer Tools and choose Sources.
- Browse the page’s listed resources and locate the image.
- Open it in the preview and compare it with the image on the page.
- If you need the format rather than just the visual asset, find the matching request in Network and inspect its response header.
Why the URL extension can be wrong
A filename ending in .jpg does not prove that the browser received JPEG data. Sites can use a CDN, responsive-image selection, content negotiation, or asset transformations to serve a different representation. A URL can stay the same while the delivered bytes vary by browser, request, device, or viewport.
Browsers use the MIME type, not the file extension, to determine how to process a URL. In practical terms, use the extension to find or recognize a likely resource, then check the response header to learn what the server declared for the page load you are examining.
DevTools reports the resource used in that particular load. If you are checking a mobile layout, a particular device size, or an image that changes as the page responds to viewport width, repeat the inspection at the relevant viewport and reload. The page may select a different image resource for a different layout.
Resolve a disagreement by checking the image contents
If the extension and Content-Type disagree, or if you need stronger confirmation than the server’s declaration, obtain the resource and inspect its bytes with a trusted file-identification utility or try decoding it. Content-based checking is independent of the filename. It is also not magic: signatures can be incomplete or ambiguous, and some formats do not have a simple identifying signature.
For example, the PNG signature begins with the bytes 89 50 4E 47; a GIF signature begins with bytes such as 47 49 46 38 39. Such signatures are useful clues, not a universal test that settles every format. A successful decode by a format-aware tool can provide additional evidence.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- Header says WebP, URL ends in .jpg: the server declares WebP for that response. The URL ending may simply be a naming convention or a transformed asset route.
- Header says JPEG, but a tool identifies another format: treat this as a disagreement worth investigating. Check that you inspected the matching request, and verify the downloaded bytes rather than relying on a stale preview or a different variant.
- Header is absent or unexpected: use the image’s actual response and bytes as evidence. Do not infer a format solely from the URL.
Check response metadata with JavaScript
A page script can fetch an image resource and read the response’s Content-Type. This example logs the HTTP declaration; replace the URL with an image URL you are permitted to request from the page’s origin.
async function checkImageType(url) {
const response = await fetch(url);
console.log("HTTP status:", response.status);
console.log("Content-Type:", response.headers.get("Content-Type"));
}
checkImageType("/path/to/image");This reads response metadata, not the image’s decoded identity. A cross-origin request may be blocked by the browser’s CORS rules, or the server may not expose the header to page JavaScript. In those cases, inspect the request in DevTools instead.
If you already have a Blob, its type property is only supporting evidence. A browser may infer it from the filename, and it can be an empty string; it is not a substitute for inspecting the network response or contents.
Common problems and fixes
The image request is missing from Network
Open Network before reloading, then reload the page. Some images are lazy-loaded only when they approach the visible area, so scroll to the image and check the request list again. If the page changed after loading, repeat the capture at the state where the image appears.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →There are many image requests
Filter to image resources, then match the URL and preview to the visible image. A page may request a thumbnail, a logo, a CSS background, and multiple responsive variants. Do not assume a request is the correct one just because it is near the top of the list.
The extension and header do not match
Use the header to determine what the server declared for that response, and verify the actual bytes if the distinction matters. A CDN or transformation can explain a different delivered format; the filename alone cannot settle it.
JavaScript cannot read the header
Check whether the request is cross-origin or whether the server makes the response header readable to page code. Use DevTools Network, which can inspect the browser’s request directly, rather than treating a failed script fetch as evidence about the image format.
The image changes across devices or page sizes
Repeat the check at the viewport or device size you care about. Responsive selection can result in another URL and another delivered format; a check at one size does not establish what the page serves at every size.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteBest Value
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server, not an image-format detector: use DevTools or inspect the image response when you need the source image’s format. If you also need a clean screenshot of the page as it appears, one GET request can capture it. The following cURL example saves a WebP screenshot of Stripe; replace the URL and add your API key.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Before the capture, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up free for ScreenshotNeo: 1,000 screenshots a month, no card required.
For details about ScreenshotNeo, see its product site.
Frequently Asked Questions
Does a WebP or AVIF image look different in DevTools just because I use a particular browser?
The format check concerns the resource selected and returned for that page load. Browser, viewport, or request differences can affect which resource is selected, so inspect the relevant load rather than assuming one result applies everywhere.
Can I tell whether an image is animated from its MIME type alone?
The MIME type is a format declaration, not a full description of every property of the image. If animation matters, inspect or decode the resource with a tool that can identify that property.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
