Use PNG when:

• You need sharp lines and text (like logos, UI elements, icons).

• The image has transparency (e.g., a logo over a background).

• You want lossless quality (no compression artefacts).

• Small graphics with few colours (e.g., flat designs) — file size will still be small.

Use JPG when:

• You’re working with photographs or complex gradients.

• File size matters more than perfect quality.

• You don’t need transparency.

• You want faster loading for large images.

Rule of thumb for websites:

• Logos, icons, graphics → PNG (or even SVG if possible).

• Photos, banners, backgrounds → JPG (or WebP for best of both worlds).