Website banner pixelated after saving

The ppi number is completely irrelevant on screen/web. 72, 300, 1000, 5/6, makes no difference. Disregard and forget it.

All that matters is the number of pixels. They will display on screen according to your screen resolution - one image pixel displayed by one screen pixel.

In other words, an image 1920 pixels wide, should display perfectly on a screen that is 1920 pixels wide (if it fills the screen).

However, there are complications, and some of them may be outside your control. One is known as "responsive web design" (aka the image killer). This means the site is coded so that images are automatically scaled according to the size of the browser window on screen. The idea is to display on a wide range of devices at different screen sizes - but the downside is that the scaling is often of poor quality, and destroys image sharpness.

But this is something else in addition. Here it looks like the image has first been scaled down, and then scaled right up again with responsive design.

So what you need to do here is double check the original image size, in pixels!, and make sure the site isn't doing any scaling on its own to the source images. That happens.

Again, ignore ppi. Just make sure you have a sensible pixel size in the original image.

You have some color management issues in addition, but let's leave that for now.