the images i have on my site now looks grainy/bad on Mac and Iphones. (Retina displays with 2DPI?).

Im using NextJS Image component. I guess I need to export 2x version and maybe 3x version of the images im using? And then set the width and height down? so f.ex if i have a 500x500 image i need to use a 1500x1500 one and then set it as <Image width={500} height={500} src={imagewith1500x1500.jpg....? Or should I do something more?