How can I fix a blurry image on my homepage?

Hi there! Currently the image on my homepage is quite blurry and im not sure how to change that. You can view the image on the homepage at https://pekoproduce.com/. It looks like this (The blur isn’t replicated as much in the image, please view it with the link:

I am comfortable with editing code, thank you!

@williamk0601 - please open the home page in customize settings and check if you have an option to set image size large.. because right now image is been rendered as smaller size and hence it is been stretched

@williamk0601 It is due to the image size is uploaded small. Please create the image in 2000px in photoshop, figma or xd then set in the shopify.

@williamk0601 To improve the quality of the image on your homepage, you can try increasing the size of the image file. A larger image file will generally have more pixels and therefore be able to display more detail, resulting in a clearer and more crisp image

Keep in mind that increasing the size of an image may also increase the file size, which could affect the loading time of your website.

Another option is to use a higher-resolution version of the image. A higher-resolution image will have more pixels per inch and will generally be of higher quality than a lower-resolution image.

In addition to increasing the size of the image file, you may also want to consider optimizing the image for the web.

This can involve reducing the file size of the image through techniques such as compression or resizing the image to a smaller size while maintaining the aspect ratio.

I hope this helps! Let me know if you have any questions.

Hi there! So currently I have the image uploaded at a good resolution, however I’m applying the css rule min-width: 100vw to reach both ends of the page. It looks like this without the rule:

After applying min-width: vw
I get the full image reaching the end of the page however it distorts the image. Am i doing something wrong here perhaps?