cssdpihdpidevice-width

Will images look sharper on HiDPI devices if their native width is above their CSS width?

The iPhone 6 has a resolution of 1334x750px but has a CSS-width of 375px.

What I want to know is if I make an image 750px wide, but set its width to 375px with CSS or HTML, will it look sharper than a native 375px image?

Solution

  • Yes, it will if the browser supports HiDPI, which is true for Safari on iOS. CSS pixels only affect CSS layout calculations; they do not affect the rendering of images.

    Here's a quick demo I threw together and tested in Safari on iOS Simulator to show you what I mean. You can see that the 500x250 image appears sharper than the 250x125 image even though both are the same size in CSS pixels (with the blue div for comparison).

    <!DOCTYPE html>
<meta name=viewport content="width=device-width">
<style>
img { display: block; margin: 1em 0; }
div { width: 250px; height: 125px; background-color: blue; }
</style>
<div>250x125 CSS pixels</div>
<img src=http://placehold.it/500x250 height=125 width=250 alt=HiDPI>
<img src=http://placehold.it/250x125 height=125 width=250 alt=Regular>