image/png MIME Type — PNG Content-Type & Transparency Guide
Portable Network Graphics. A lossless compression format that supports transparency (alpha channel). Best for logos, icons, screenshots, and images with sharp edges or text. Lossless means larger file sizes than JPEG for photographs.
Used For
- Logos and brand assets (transparency needed)
- Icons and UI elements
- Screenshots
- Images with text overlays
HTTP Header Example
HTTP/1.1 200 OK
Content-Type: image/png
Cache-Control: public, max-age=31536000Code Examples
// Express
app.get('/logo.png', (req, res) => {
res
.set('Content-Type', 'image/png')
.set('Cache-Control', 'public, max-age=31536000')
.sendFile('logo.png', { root: './public' })
})
// Generate PNG server-side using canvas / sharp
import sharp from 'sharp'
const png = await sharp(inputBuffer).png().toBuffer()
res.set('Content-Type', 'image/png').send(png)Related MIME Types
Frequently Asked Questions
What is the image/png MIME type?
Portable Network Graphics. A lossless compression format that supports transparency (alpha channel). Best for logos, icons, screenshots, and images with sharp edges or text. Lossless means larger file sizes than JPEG for photographs.
When should I set Content-Type: image/png?
Set Content-Type: image/png on HTTP responses that contain PNG Image data. Logos and brand assets (transparency needed).
What file extensions use image/png?
Files with image/png content typically use these extensions: .png.
What happens if I serve this with the wrong Content-Type?
Browsers use the Content-Type header to decide how to handle the response. Serving image/png content with an incorrect MIME type can cause browsers to display it incorrectly, refuse to execute it (scripts), or prompt an unintended download. Modern browsers respect X-Content-Type-Options: nosniff and will not attempt to auto-detect the type.