2

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?

Community
  • 1
  • 1
mpen
  • 272,448
  • 266
  • 850
  • 1,236

1 Answers1

3

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>

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • When you say "supports HiDPI" do you mean any browser that will use a greater than 1:1 mapping of CSS pixels to physical pixels, or do you mean something else? – mpen Apr 10 '15 at 04:27
  • Okay. Sounds good. I thought so; anything else would be crazy, but I just wanted to confirm :-) – mpen Apr 10 '15 at 04:29
  • Awesome. That screenshot really shows the difference. Thank you. – mpen Apr 10 '15 at 04:35