Bad image quality for website

I’m quite new to creating responsive websites and I’m finding it difficult to put a good quality image in my website page.

I have a 4000x4000px image I want to put on the homepage, and I’m trying to downscale it to a more reasonable 1000x1000px (I need it to be big and in good quality).

The problem is that every time I try to resize it, the quality becomes very bad.

These are the things I did try to resize it in Photoshop:

• resize it down with automatic resample
• resize it down with Bicubic sharpener resample
• resize it down with no resample
• resize it down using only drag and drop

Had no luck with any of these methods. Any help? Thanks in advance.

The best way to downscale image or export graphics for web with Photoshop - is Save For Web And Devices (it's legacy option, but still available in file > export) or Export As option. There you'll be able to select the quality, format and change the size of your graphic.

Anyway, if you want to add hi-res images (to use it for retina displays for example) to your website, the best way to implement it is to use srcset: responsive images

Good luck :)