JPG is primarily used for continuous tone images such as photographs, which will better hide any artifacts from the lossy compression. If you use JPG on flat areas of colour with detailed text, you risk seeing some artifacts over your text.

PNG can be had in two formats, index colour, which supports up to a 256 colour palette, and full 32bit which has 24bits of colour (16.7 million like JPG) and 8bit alpha (256 levels of transparency). Both formats are non-lossy meaning the compression they use does not alter the pixel information when they're displayed.

An index PNG is great for when you have relatively few colours in your image, including large areas of the same colour, such as interface images like the one you posted. A truecolour PNG (32bit) is great as a master copy of artwork like photos or paintings or any time you need smooth transparent gradients.

Keep your source files and you can generate a PDF multiple times over and compare to see which one you prefer.