My rule of thumb: If the image has few colours, PNG is typically better as you can retain maximum quality with little degradation compared to JPG (e.g. a logo, an illustration). If the image is complex with a lot of colours/shades (e.g. a photograph, an illustration with dozens of colours), JPEG is typically better.

Any time it's a photographic image (rather than a drawing, diagram or rasterised vector image).

This. Here's a quick guide:

JPG - Use for photographic images only.

GIF/PNG-8 - Use for line-art, logos, etc.

PNG-24 - This is a a lossless format/TIFF replacement and generally shouldn't be used for production sites.

> PNG-24 - ... generally shouldn't be used for production sites.

But it is sometimes of course, particularly when the designer does not want the PNG restricted to 256 colors. For example, suppose that your logo is a single lowercase letter with an overlaid multicolor gradient rainbow, the banding in the transitions becomes super pronounced in PNG-8.

Beyond that, SVG can replace a lot of what PNG has been used for on the web for the past couple decades.

Some images get better compression with JPEG than PNG - photographs in particular.

Pretty much everywhere where you're not forced to use PNG. JPEG is significantly smaller and on most devices faster to decode.

It totally depends on the situation, JPEG isn't always smaller, and it's lossy unlike PNG. Flat colour images like logos will be smaller as PNG, and look better too. PNGs also support transparency.

Yes, this is kinda what I mean with "where you're not forced to use PNG". If you need transparency or you have tiny flat colored icons, PNG is better. For any kind of complex images JPEG tends to be even 10x or so smaller.