Need help to understand dimension and resolution of image for my landing page
Tldr; I need an image (a)1216x646 px for my landing page. I have an image which is (b) 4868x2584 with the resolution of 288 ppi. When I resize image b using preview(mac tool) to dimensions of a, I am also losing the clarity although I see the resolution is retained 288(which is kinda strange, as resizing using pixel dimension should impact on ppi(?), but I think this is what I am trying to understand)
Btw I have googled and also read quite a few articles on 'dimension resizing and retaining quality' but nothing has helped me get the output I want. Any valuable links are always welcome.
- I use Figma to make my designs and export using 1x - 4x
- I use resizing using preview / gimp OS tool
Here are the 2 files for reference;
Banner gimp is the image a
banner is image b
I can't give you a technical explanation, unfortunately, but isn't this because when you make the image smaller more pixels need to fit in an inch why some will get lost? I'd be very interested in a technical explanation as well... What might help a little bit is creating a canvas in Gimp of 1216x646 and putting only the iPad in it and scaling down.
What size is it, when you export it 1x?