Jpg is lossy and throws away information every time it is used, that’s why you get the “deep fried effect” when you re-encode something repeatedly. PNG is lossless so it’s a perfect replica of whatever image you encode with it. It does take up more space however.

JPEG is for real life photos and document scans, using it for anything else is just lossy compression.

whereas png is better for graphics type elements with defined colors and edges?

The reason for that is rather surprising, but PNGs are basically zipped BMPs with an optional filter step to arrange the pixels in a way that compresses better.

And that’s why if you give it a photo with lots of details, it’s not very effective and just gives you a rather big file. PNG barely does anything compared to JPEG and other formats. That’s also why it’s great for small things like icons: it decompresses fast and still manages a fairly good compression ratio when a good chunk of the image is transparent or flat background.

Jpg is better for photographs. Png is better when there are a lot of homogeneous pixels, like cartoons or rasterized vector graphics.

Jpg is really bad for anything with sharp lines, such as text. It also doesn’t support alpha channel (transparency) which is reasonably important in modern web design.

PNG is loseless, which is great for… anything other than storage/bandwidth due to file size. There’s even an animated PNG standard, similar to animated GIF, but you never see that used anywhere.

PNG is lossless and JPEG is not. JPEG is about a sliding scale of “quality” (at the cost of file size) and minimizing how much it fucks with the visual end result.