Pages: [1]   Go Down

Author Topic: Optimising website images for Retina display  (Read 15378 times)

Derryck

  • Full Member
  • ***
  • Offline Offline
  • Posts: 170
    • http://www.derryckmenere.com
Optimising website images for Retina display
« on: March 30, 2013, 09:34:04 pm »

I just spent a stupid amount of money on the top of the line MacBook Pro with Retina display and now of course when I look at my blog or website the images which used to appear sharp now look like they've been passed through a potato masher.

I'm wondering if anyone has changed the way they format their images for the web now that more and more people are viewing your work on a high definition screen?

I'm currently using "Save For Web" in Photoshop and try to get the file down to a size that isn't going to take ages for the viewer to download but still keeps an acceptable level of quality.

I'm interested to know if anyone has found that balance of quality and file size, and what settings i.e. dpi you are using.

Thanks,

Derryck.


Logged

Bart_van_der_Wolf

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 8913
Re: Optimising website images for Retina display
« Reply #1 on: March 31, 2013, 08:37:20 am »

I'm currently using "Save For Web" in Photoshop and try to get the file down to a size that isn't going to take ages for the viewer to download but still keeps an acceptable level of quality.

I'm interested to know if anyone has found that balance of quality and file size, and what settings i.e. dpi you are using.

Hi Derryck,

A pixel is still a pixel, even if they are displayed in a more densely packed manner. What you may be seeing is the result of improper resampling. When the images don't look smaller on your Retina display, then upsampling is used, and you need to down-sample less when exporting your forWeb images (which means slower loading).

Maybe the Blog or Web software can silently download (preload) a choice between two versions of the file, and display the larger one only when viewed on a Retina (or any higher resolution) display?

Cheers,
Bart
Logged
== If you do what you did, you'll get what you got. ==

Derryck

  • Full Member
  • ***
  • Offline Offline
  • Posts: 170
    • http://www.derryckmenere.com
Re: Optimising website images for Retina display
« Reply #2 on: April 01, 2013, 10:23:10 am »

Thanks Bart,

appreciate your reply. I've been trying to upload various image sizes to my blog to test but unfortunately they're just coming out as different sized images based on 72dpi screen resolution. Will chat with the designer who's updating my site.

Logged

Wayne Fox

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 4237
    • waynefox.com
Re: Optimising website images for Retina display
« Reply #3 on: April 02, 2013, 11:54:31 am »

Odd.  What resolution do you have your retina display set for?  I really don't see much difference, since the display is simply oversampling.  How are you downsampling your images and what is the final resolution?
Logged

Derryck

  • Full Member
  • ***
  • Offline Offline
  • Posts: 170
    • http://www.derryckmenere.com
Re: Optimising website images for Retina display
« Reply #4 on: April 03, 2013, 05:22:14 am »

I'm probably exaggerating the difference it's just that's so noticeable when looking comparing it to the super crisp vector text that I'm now getting used to with this higher resolution display.

I spoke with my designer and he basically said that if we wanted to go down this path it would mean uploading two copies of each image to the site (72dpi and 150dpi) and depending on the viewers screen it would switch between one or the other. Probably not something that's really necessary at this stage.
Logged

SZRitter

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 384
Re: Optimising website images for Retina display
« Reply #5 on: April 08, 2013, 01:36:21 pm »

So, I was testing this just the other day for work (I'm a web developer by trade).

I came to the conclusion that by doubling pixels and using a high compression (say 15% in the "Save for Web" dialog or 1 or 2 in the normal save as dialog) you could get a file with the same file size that handles both retina and resizing better. What happens, is as the browser scales it down the jpeg artifacts kind of disappear, leaving a visually sharper image.
Logged

riddell

  • Newbie
  • *
  • Offline Offline
  • Posts: 30
  • Pro photographer Hertfordshire
    • Commercial photographer London / Hertfordshire
Re: Optimising website images for Retina display
« Reply #6 on: April 11, 2013, 08:19:56 am »

As others have said a pixel is just a pixel. And a properly set photo will look just as good on any display. I expect something is failing in your post process.

Also don't worry about DPI. Its one the biggest mistakes people keep making DPI has absolutely no baring on anything when viewed on any kind of viewing device. Google around to read about this.

Paul.
www.photographybyriddell.co.uk

hjulenissen

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 2051
Re: Optimising website images for Retina display
« Reply #7 on: April 11, 2013, 08:40:28 am »

Various image formats allow interlacing or similar "pyramidal" encoding. I.e. users with a slow connection get to see a (lowres) image fast. After a longer wait, they will see a high-quality image.

This was important in the days of modems, perhaps it is made important again by tablets with retina resolution and cellular connectivity.

As the retina displays are supposedly operating on the limit of what human vision can sense, one might not need the same "per-pixel-quality" as in lower resolution displays. I.e. harsh(er) compression can be tolerated as long as it is only the high-frequency, low-contrast information that is compromised.

Your point about text is a good one: when you have high-resolution material to compare with, you might notice softness that would otherwise be tolerated.

-h
Logged

Derryck

  • Full Member
  • ***
  • Offline Offline
  • Posts: 170
    • http://www.derryckmenere.com
Re: Optimising website images for Retina display
« Reply #8 on: April 12, 2013, 06:28:22 am »

Thanks for the replies.

I certainly understand "pixels being pixels", I guess my problem is that unless I have my screen set to native resolution (i.e. scaled to "More Space" in display settings) the images on websites are going to be scaled up to match the size people would see them on non-retina display's.

For example if I want someone to see an image on their screen measuring 20cm x 30cm on a non-retina display then I would save an image at those dimensions @72dpi. But given that a Retina display has 4x the pixel density then I would need to save the same image at 150dpi or more so the resolution would be more in line with the super crisp vector text we are now seeing on a retina display. You only need to look at the LuLa banner at the top of this forum to see that it now appears slightly fuzzy on a retina display.

The problem is that Wordpress and I suspect many other web applications simply increase the size of 150dpi images to match what has been a standard 72dpi screen resolution rather than displaying at the same physical screen dimensions but increased pixel density. (I hope that made some kind of sense).

I suspect that it's only people like us who work with images for a living that even notice the difference ;) Of course I may be just making a rod for my back seeking to use higher resolution images on my site when I have to contend with the "Great Firewall of China" and an internet that is slower than it should be.

Derryck.



Logged

Bart_van_der_Wolf

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 8913
Re: Optimising website images for Retina display
« Reply #9 on: April 12, 2013, 07:38:14 am »

For example if I want someone to see an image on their screen measuring 20cm x 30cm on a non-retina display then I would save an image at those dimensions @72dpi. But given that a Retina display has 4x the pixel density then I would need to save the same image at 150dpi or more so the resolution would be more in line with the super crisp vector text we are now seeing on a retina display. You only need to look at the LuLa banner at the top of this forum to see that it now appears slightly fuzzy on a retina display.

The problem is that Wordpress and I suspect many other web applications simply increase the size of 150dpi images to match what has been a standard 72dpi screen resolution rather than displaying at the same physical screen dimensions but increased pixel density. (I hope that made some kind of sense).

Hi Derryck,

First of all, most displays are 96 PPI or better, so I'd start with estimating output size based on that.

Then indeed, higher PPI displays will show smaller images because the pixels are displayed more densely. This has also to do with how the HTML page is setup. The usual way is by defining the pixel size of the displayed image ahead of time, because that allows the page layout to reserve space for the image as it is still being downloaded, without the page layout constantly changing as the images come in.

Another way to dimension images is not absolute by pixels but relative by defining a percentage of page size, and possibly adjust the percentage by screen resolution. That may require a bit more tweaking with Custom Style Sheets than a standard web publishing application routinely offers. The quality drawback is that the resizing that the browser does, is of lower quality than what we can do when the exact pixel dimensions are known.

The best way would be to load different pixel size images, based on display PPI, which requires a bit more elaborate web page design.

Cheers,
Bart
« Last Edit: April 12, 2013, 09:01:16 am by BartvanderWolf »
Logged
== If you do what you did, you'll get what you got. ==

madmanchan

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 2115
    • Web
Re: Optimising website images for Retina display
« Reply #10 on: April 12, 2013, 08:44:06 am »

On "Hi DPI" displays like the MBP Retina and iPad 3 there are effectively two coordinate systems:  the "logical space" or "user space" which is what we normally think of as the number of pixels in the user interface, and the "device space" which is the actual number of pixels on the physical screen.  On the MBP Retina the standard setup is 1440 x 900 pixels in "user space" and 2880 x 1800 pixels in "device space".  So, for every pixel in user space there are 4 pixels in device space.

To optimize images for Retina display, you should double the width and height of the web image (for device space), but in the web page markup specify the user-space dimensions for the image.

This is easier to understand with an example.  Suppose you normally display web image using 800 pixels on the long edge.  For Retina, you supply an image at twice the width and height, so instead of a 800 x 600 image you would provide a 1600 x 1200 image.  But in the web page you would display it as 800 x 600, e.g., using markup like

width="800px"
height="600px"

(The disadvantage of this setup is that you would be consuming more bandwidth since you're delivering a higher-res image even on standard (non-Hi DPI) displays.  This can be overcome using smarter logic that sends a standard-res image to standard displays and the high-res image only to Hi DPI displays, but that's beyond the scope ...)
Logged
Eric Chan

hjulenissen

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 2051
Re: Optimising website images for Retina display
« Reply #11 on: April 12, 2013, 10:07:43 am »

I think the world will be a considerably simpler place once we oversample enough to drop terms like "pixels" or "dpi", and can instead focus on layout (I want this image to fill 50% of the screen/paper real-estate, centered).

-h
Logged

Bart_van_der_Wolf

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 8913
Re: Optimising website images for Retina display
« Reply #12 on: April 12, 2013, 11:01:02 am »

Hi,

Here is a CSS3 'background image' method to fit the (Retina pixel sized) image e.g. into a <div></div> HTML page section. The <div> can be given a size (with correct aspect ratio) itself. That will automatically resize the image to fit the bounding box, and should be compatible in all current browsers (possible exception is Opera-mini).

Cheers,
Bart
« Last Edit: April 12, 2013, 11:08:30 am by BartvanderWolf »
Logged
== If you do what you did, you'll get what you got. ==

Derryck

  • Full Member
  • ***
  • Offline Offline
  • Posts: 170
    • http://www.derryckmenere.com
Re: Optimising website images for Retina display
« Reply #13 on: April 12, 2013, 08:56:52 pm »

Thanks guys, there's some really good information here. Will definitely try putting it to use.
Logged

SZRitter

  • Sr. Member
  • ****
  • Offline Offline
  • Posts: 384
Re: Optimising website images for Retina display
« Reply #14 on: April 15, 2013, 12:39:02 pm »

I don't see it in the linked thread on CSS, but you can use max-width:100% and height:auto to make an image go to the max width of the container and maintain it's correct aspect ratio.

So, for example:

img.responsive {
   max-width:100%;
   height:auto;
}

And if you had a fixed height container, you could go with the opposite:

img.responsiveHeight {
   max-height:100%;
   width:auto;
}
Logged

riddell

  • Newbie
  • *
  • Offline Offline
  • Posts: 30
  • Pro photographer Hertfordshire
    • Commercial photographer London / Hertfordshire
Re: Optimising website images for Retina display
« Reply #15 on: April 16, 2013, 01:10:48 pm »


DPI has has absolutely nothing to do with screen viewed images. It won't make any difference weather you set it to 72DPI, 2DPI or 1000DPI.

Its such a common mistake people make. And the only reason this mistake is so often made is because amateurs keep repeating it on the internet.

If you don't believe me try it for your self. Save the same image with the same pixel dimensions but with different DPI and view in on a screen. It will be the same size.

Pages: [1]   Go Up