PNG MIME Type – Free, Online, Private

What .png is

PNG is a lossless raster image. The signature is the eight bytes 89 50 4E 47 0D 0A 1A 0A. After that come chunks. IHDR is first and carries width, height, bit depth, and color type. IDAT holds the compressed pixels. IEND ends the file. Color type 6 is RGBA, which is why PNG is the usual choice for a screenshot or a logo that needs a transparent pixel. It is a poor choice for a photograph, where JPEG, WebP, or AVIF is smaller. The type is image/png. There is no charset and no official image/x-png that you should send.

IANA registers image/png for the Portable Network Graphics format. The media type is image/png. Extensions that use it on this page: .png. A client compares the type, not the filename, once the response has arrived. The filename still matters on disk and in Content-Disposition, which is why a wrong extension and a wrong header are two different bugs.

What sends image/png

What sends image/png: Send image/png for a .png file, a canvas export, and an API that returns a chart. An img element and a CSS background both rely on the type only as a fallback. They decode the bytes. A service worker or a strict fetch().blob() consumer does use the header, and a download attribute uses it to name the file. If you generate the PNG in a route that does not end in .png, set the header explicitly. Add Content-Length when the buffer is complete so the browser can reserve the layout if you also send the width and height in HTML. The file on disk is still .png. Once the response exists, a client trusts image/png, not the filename. Compression inside PNG is deflate, in the IDAT chunks. Content-Encoding: gzip on top of that rarely pays for itself and can confuse a cache that stores the encoded bytes without the matching header. Leave the type as image/png either way. If you serve user uploads, reject a file whose signature is not the PNG signature even when the multipart filename ends in .png.

Content-Type for .png

Send image/png and do not add a charset parameter. The body is binary. A charset tells a text decoder to reinterpret bytes that are not text, which corrupts a download and does not help a browser sniff the format.

Content-TypeContent-Type: image/png

nginx, Apache, and Express

These snippets map .png to image/png. nginx reads the types block when it picks a type from the URL's extension. A location that sets default_type, or an application that sets the header itself, overrides that map. Apache AddType applies in the directory context where you put it. The Express static example writes the header for files ending in .png so a stale mime database in the framework cannot disagree with the type on this page.

nginx# /etc/nginx/mime.types, inside the types { } block
image/png                   png;

ApacheAddType image/png .png

Expressimport express from "express";

const app = express();
app.use(express.static("public", {
  setHeaders(res, filePath) {
    if (filePath.endsWith(".png")) {
      res.setHeader("Content-Type", "image/png");
    }
  },
}));

Pitfalls for image/png

Pitfalls that show up for image/png, and not for a neighboring type with a similar extension: The common server bug is a types table that maps .png to application/octet-stream after a partial mime.types overwrite. The image then downloads instead of displaying. The common app bug is sending image/png for a JPEG because the route is named /avatar.png and the encoder wrote JPEG bytes. Check the signature. A second trap is treating PNG as always opaque. Color type 2 has no alpha. A third is recompressing a PNG through a JPEG pipeline to 'make it smaller', which adds artifacts and drops the alpha channel. Use a PNG optimizer if you need a smaller lossless file.

• APNG is an animated PNG. The type stays image/png. Browsers that understand the acTL chunk animate it. Others show the first frame.
• A UTF-8 BOM or a newline before the signature breaks decoders. The signature has to be byte zero.
• image/x-png shows up in old mailers. Current browsers accept it inconsistently. Send image/png.
• Cross-origin canvas use taints the canvas unless the image is served with CORS headers. The type does not grant that. Access-Control-Allow-Origin does.