Can You Solve This? HTML Retina Image Display

Discussion in 'Web Design and Development' started by OSMac, Nov 10, 2013.

Most Liked Posts
  1. OSMac, Nov 10, 2013
    Last edited: Nov 10, 2013

    OSMac macrumors 65816

    Joined:
    Jun 14, 2010
    #1
    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>
     
    share
    + Quote Reply
  2. ChanneledDan, Nov 10, 2013

    ChanneledDan macrumors newbie

    Joined:
    Jun 12, 2012
    #2
    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?
     
    share
    + Quote Reply
  3. Apple Key, Nov 11, 2013

    Apple Key macrumors 6502a

    Apple Key

    Joined:
    Jan 4, 2012
    #3
    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.
     
    share
    + Quote Reply
  4. OSMac, Nov 11, 2013
    Last edited: Nov 11, 2013

    OSMac thread starter macrumors 65816

    Joined:
    Jun 14, 2010
    #4
    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.
     
    share
    + Quote Reply
  5. OSMac, Nov 11, 2013

    OSMac thread starter macrumors 65816

    Joined:
    Jun 14, 2010
    #5
    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?
     
    share
    + Quote Reply
  6. ChanneledDan, Nov 12, 2013

    ChanneledDan macrumors newbie

    Joined:
    Jun 12, 2012
    #6
    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
     
    share
    + Quote Reply
  7. aarond12, Nov 13, 2013

    aarond12 macrumors 65816

    aarond12

    Joined:
    May 20, 2002
    Location:
    Dallas, TX USA
    #7
    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.
     
    share
    + Quote Reply
  8. Apple Key, Nov 13, 2013

    Apple Key macrumors 6502a

    Apple Key

    Joined:
    Jan 4, 2012
    #8
    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.
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page