Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Can You Solve This? HTML Retina Image Display

O

OSMac

macrumors 65816
Original poster
Jun 14, 2010
1,456
8
I read a simple way to display an image on a webpage
without scaling when viewed on a retina device
is to simply half it's actual dimensions in the <img> tag.

Made a quick test can be viewed here:
Simple Retina Display Test

The original png image is 404x298,
within it's border are alternating black and white pixels.
Displayed without scaling it should look smooth. No circles within.

On the test webpage it's first displayed using its full dimensions :

Code: 
<img src="images/RetinaTest.png" alt="Actual" height="298" width="404">

Then its displayed using half sizes:
Code: 
<img src="images/RetinaTest.png" alt="Half" height="149" width="202">

The half size tagged image displays correctly with Safari on a retina MacBook Pro,
but not on the retina iPad where scaling artifacts are seen?

Any simple fix?

Here's the full code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
 <head>
  <title>Retina Code Test</title>
 </head>

<body style="margin: 30px;">
<p style="font-size:20px">

<br>
RETINA IMAGE DISPLAY TEST<br>
<br><br>
PNG Tagged with actual 404x298 dimensions
<br>
<img src="images/RetinaTest.png" alt="Actual" height="298" width="404">
<br>
<br>
PNG Tagged with half of actual 404x298 dimensions<br>
If image is rendering correctly on a retina iPad it should be clean, no dots.
<br>
<img src="images/RetinaTest.png" alt="Half" height="149" width="202">
<br>
<br>
</p>
</body>
</html>
 
Last edited:
The simplest way is to serve up a different image. You can do this by using media queries and displaying a different div, or an image with a different class and hiding the original one.
 
Apple Key said:
The simplest way is to serve up a different image. You can do this by using media queries and displaying a different div, or an image with a different class and hiding the original one.
Click to expand...

Thanks. In this case, I am not trying to serve multiple images for retina and non retina devices.
I just wanted to test that the iPad does correctly display a image 1:1 and if possible find code that can display images 1:1 on either retina device.

I can't seem to get that image RetinaTest.png to display correctly on the retina iPad using the standard 1/2 dimension tag method that works on the retina MacBook Pro.

It's a good image to test for any scaling as even the slightest scale will reveal a interference pattern within.

The only way I was able to get it to view correctly on the retina iPad was to set the page width to exactly 2048px. Then the entire page renders 1:1.

Example: Working iPad Retina Test

Of course that method does not work on the retina MBP.

Be great to find something that works on both.
 
Last edited:
ChanneledDan said:
I'm guessing the only ways to fix that are to use an image not so susceptible to downscaling artifacts. Have you tried something like https://github.com/imulus/retinajs/ or some other script designed to accomodate retina displays to see if it does anything special?
Click to expand...

Thanks for the suggestion.
retinajs wants the images at /images ,
that's not the case where mine are hosted.
Probably possible to change the retinajs code but I'm not that versed at javascript.

I choose the test image as it's a good way to see any scaling.
I have many images that have been edited to the pixel level,
I'd like to keep those edits while displaying on retina devices.

Found a way to do it on the retina Macbook and a way on the iPad but they are different.

I'm not sure why the 1/2 width 1/2 height method that works on the rMBP is not working on the iPad.
I think it should?
 
OSMac said:
...
The only way I was able to get it to view correctly on the retina iPad was to set the page width to exactly 2048px. Then the entire page renders 1:1.
...
Click to expand...

Ah, this seems to be the problem then. If the page doesn't fit the screen exactly then there has to be scaling going on.

I'm not exactly sure what kind of website / web app you're trying to develop here, but isn't it possible to just use some principles of responsive web design and serve a slightly different page to an iPad that always has a width of exactly 2048px?

You could do this using @media in your CSS to present different page properties based on screen size. Also potentially useful CSS is "min-resolution:" and "-webkit-min-device-pixel-ratio:"

See if either of these help:
http://stephen.io/mediaqueries/

https://gist.github.com/marcedwards/3446599
 
Apple's own site uses not just 2, but 3 different sizes for its graphics, each with a different class (small, medium, large). I'm not so sure there's an easy way around this, other than looking at the device's resolution and/or user agent string to determine which graphic to display.
 
I think my post got lost the other day. Have you tried using the meta viewport tag to specify the width on the device? There is a good likelihood that it should solve the issue for you.


Example for 1000px wide page:
<meta name="viewport" content="width=1000" />

By the way, I looked at the source for retina.js and it doesn't seem to look for images in the /images path. It appears to look for images in the same directory as the original image file specified in your html document.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back