320x50 and 300x50

Pixels are pixels, and there's no magic to get around that. If 50 pixels is the set height, then 50 pixels is what you have to work with. This is just how raster images work.

The best way to deal with this is to separate the two - live html text on top of the raster image. But this obviously has to be done natively on the site. If you have just been given a 300 x 50 slot to fill with a png, this is probably not an option.

Now, in most cases a website displays at 100%, so it'll amount to the same thing - screen pixels equal image pixels. But live text can be scaled up and is only limited by the screen resolution, not the image resolution. So for instance on a retina/4K screen there should be an improvement, because web browsers usually scale images up 2x for those screens. Live text should then scale up maintaining full screen resolution.

I'm by no means an expert in web design and how to build a site, so others may have more to say on this. But I do know what a pixel is, and 50 pixels isn't much to go around.