How do I add a PNG to my website?

Use the <code><img></code> tag: <code><img src="/path.png" alt="description"></code>. Set <code>width</code> and <code>height</code> attributes to prevent layout shift.

Should I lazy-load PNGs?

Yes for below-the-fold images: <code><img loading="lazy" decoding="async"></code>. Don't lazy-load the LCP (largest hero) image — set <code>fetchpriority="high"</code> instead.

How do I serve WebP with PNG fallback?

Use <code><picture></code>: <code><picture><source type="image/webp" srcset="img.webp"><img src="img.png" alt="…"></picture></code>. Modern browsers pick WebP; old ones fall back to PNG.

How do I make PNGs responsive?

Use <code>srcset</code> + <code>sizes</code>: <code><img srcset="img-300.png 300w, img-900.png 900w" sizes="(max-width:600px) 300px, 900px"></code>. The browser picks the right size.

Should icons be PNG or SVG?

SVG for UI icons (smaller, scales). PNG for detailed/photographic graphics. See <a href="/faq/png-format-quality/png-vs-svg">PNG vs SVG</a>.

What alt text should I write for PNGs?

Describe the image's content and purpose. "Free transparent flower PNG image with red petals" beats "flower". Keep under ~125 chars and avoid "image of" prefixes.

How do I shrink PNG file size?

Run through <a href="https://tinypng.com">TinyPNG</a> or <code>oxipng</code> (lossless). Convert to WebP for the web. Use the right resolution — don't ship a 4K PNG to a 300px slot.

Can I use a PNG as a favicon?

Yes: <code><link rel="icon" type="image/png" href="/favicon.png"></code>. Use 32×32 or 48×48 for crisp display in all browsers.

What cache headers for PNGs?

<code>Cache-Control: public, max-age=31536000, immutable</code> for hashed filenames. The browser caches forever; if you change the image, change the URL.

Should I host PNGs on a CDN?

Yes for production. Cloudflare, Bunny, Fastly all work great. Our own <a href="/about-us">infrastructure</a> uses Wasabi+Bunny.

Web Development

Q: How do I add a PNG to my website?

Use the <code>&lt;img&gt;</code> tag: <code>&lt;img src="/path.png" alt="description"&gt;</code>. Set <code>width</code> and <code>height</code> attributes to prevent layout shift.

Q: Should I lazy-load PNGs?

Yes for below-the-fold images: <code>&lt;img loading="lazy" decoding="async"&gt;</code>. Don't lazy-load the LCP (largest hero) image — set <code>fetchpriority="high"</code> instead.

Q: How do I serve WebP with PNG fallback?

Use <code>&lt;picture&gt;</code>: <code>&lt;picture&gt;&lt;source type="image/webp" srcset="img.webp"&gt;&lt;img src="img.png" alt="…"&gt;&lt;/picture&gt;</code>. Modern browsers pick WebP; old ones fall back to PNG.

Q: How do I make PNGs responsive?

Use <code>srcset</code> + <code>sizes</code>: <code>&lt;img srcset="img-300.png 300w, img-900.png 900w" sizes="(max-width:600px) 300px, 900px"&gt;</code>. The browser picks the right size.

Q: Can I use a PNG as a favicon?

Yes: <code>&lt;link rel="icon" type="image/png" href="/favicon.png"&gt;</code>. Use 32×32 or 48×48 for crisp display in all browsers.

Best practices for using PNG images on websites: performance, accessibility, modern formats.

How do I add a PNG to my website?

Use the <img> tag: <img src="/path.png" alt="description">. Set width and height attributes to prevent layout shift.
Should I lazy-load PNGs?

Yes for below-the-fold images: <img loading="lazy" decoding="async">. Don't lazy-load the LCP (largest hero) image — set fetchpriority="high" instead.
How do I serve WebP with PNG fallback?

Use <picture>: <picture><source type="image/webp" srcset="img.webp"><img src="img.png" alt="…"></picture>. Modern browsers pick WebP; old ones fall back to PNG.
How do I make PNGs responsive?

Use srcset + sizes: <img srcset="img-300.png 300w, img-900.png 900w" sizes="(max-width:600px) 300px, 900px">. The browser picks the right size.
Should icons be PNG or SVG?

SVG for UI icons (smaller, scales). PNG for detailed/photographic graphics. See PNG vs SVG.
What alt text should I write for PNGs?

Describe the image's content and purpose. "Free transparent flower PNG image with red petals" beats "flower". Keep under ~125 chars and avoid "image of" prefixes.
How do I shrink PNG file size?

Run through TinyPNG or oxipng (lossless). Convert to WebP for the web. Use the right resolution — don't ship a 4K PNG to a 300px slot.
Can I use a PNG as a favicon?

Yes: <link rel="icon" type="image/png" href="/favicon.png">. Use 32×32 or 48×48 for crisp display in all browsers.
What cache headers for PNGs?

Cache-Control: public, max-age=31536000, immutable for hashed filenames. The browser caches forever; if you change the image, change the URL.
Should I host PNGs on a CDN?

Yes for production. Cloudflare, Bunny, Fastly all work great. Our own infrastructure uses Wasabi+Bunny.