Hello!
I am trying to use a Retina Image for Higher Resolution Displays . This will require me to cut the pixel sizes in half. Unfortunately, I am unable to locate the pixel size of the image I am trying to use. When I search in Google photos, the information I get is: 12.2MP
4032 × 3024
379.4 KB
When I inspect the picture, using codepen, I do not see an answer. This question is pretty basic, but can anyone help me find this picture’s pixels so I can cut them in half?
You can use width: 50%; on the image element to reduce the image size in half. It will adjust the height automatically.
Thank you for your reply @ShAfi
Based on your reply, it looks I have taken care of this Retina Image requirement. I have been playing around with flexbox, and the image(see code) has a width of 15% now. Would you happen to know if 15% will work for the Retina Image requirement, or must it be 50%. Thanks! https://codepen.io/danoneil09/pen/XWmXYBg?editors=1100
It is recommended to reduce the images scaling for a high-res display, but you are the one who have to see and decide how much you should scale the image.
Your image is already a high res image, so it would’ve worked fine with a width of 100% (The image wouldn’t have pixelated, and the goal is to not have pixelated image on high-res display).
It looks cool with its current scaling.
Thank you for the clarification.
