Blurry Image on Website

[Ochysam]

I am a photoshop beginner..  I designed a banner for my website on photoshop, but the image always appear blurry when I uploaded it on my banner from photoshop even when I used the diffrent method of saving to save. Can someone help please? Or what can I do to have good images

Below are original image from photoshop and image on my website 

 Original Image above

Image on website

Thanks

[Nancy OShea]

I can't tell much from your screenshots.  It could be the image or it could be the code (HTML and CSS). 

What's the URL to the problem page?

[Ochysam]

My url is https://afrosentail.co.nz/. 

[Nancy OShea]

The native image is not distorted. 

https://afrosentail.co.nz/wp-content/uploads/2020/05/clour-background-4.jpg

27.11 KB

1,400px × 550px

But the WordPress Theme around it is causing distortion.  In other words, the background image is getting stretched & clipped to fit the container.

In contrast, this image contains ample space around the central motif.  The image quality is higher and the dimensions are different.

https://afrosentail.co.nz/wp-content/uploads/2019/10/P01-2.jpg

111.65 KB

1,349px × 600px

Ask your web developer what size images you should use.

[Ochysam]

Thanks. Will do