I asked this question on the weaver space forum 3 days ago but nobody has replied, so I thought I would try here.
I’ve just created a test page to see how image compression affects visual quality when saved at retina resolution but something really strange has occurred and I am not sure what is going on.
The page is at http://sunnymede.net/retina/ and if I visit the page using FireFox on a non-retina display the images are sharp but if I use Safari or Chrome they appear sharp for about a second before suddenly becoming softer.
If I click on the edge of the browser window in Safari or Chrome and drag it to make the window wider or narrower it instantly sharpens up until I release the window, at which point it becomes softer again.
This is done using the latest version of Foundation and I have never seen anything like this before in Rapidweaver. The original images are 1000 x 667 and they have all been set as 500 x 333 for browser viewing. They look totally OK when previewed inside RW or when viewed on a retina display.
NB The attached image in the above post appears to have been optimised after uploading to save weight and hides some the clear difference in sharpness between the images.
Hi, @ashleykaryl. The difference is still visible. I would recommend saving images in your image editor at the same size you want them to appear in a browser and set RW to use the original size. Let us know whether that helps, OK?
@Rovertek For images to reproduce sharply on retina displays the files need to be twice the size they appear on screen otherwise they look soft and mushy on something like a retina screened iPad.
Normally that’s not a problem and I’ve done this lots of times before with good results on both retina and non-retina displays, but in this instance I have the problem where the image is sharp in Firefox but not in Chrome or Safari when viewed on a non-retina display. Strangely it’s sharp when previewed inside RW on my non-retina display so nothing here makes sense.
Well, yes, of course. I took it for granted that you would save images at full size AND full resolution (either 72 ppi for normal screens or 144 ppi for retina, or just one high resolution of 144 ppi for both – depending on your needs).
I just have a problem with letting RW or a browser to change the size or the resolution arbitrarily. I save my image at full (actual) size and the resolution at 144 ppi and I don’t allow RW to change (“optimize”) that.
However, the reason why you experience this difficulty with Safari and Chrome and not Firefox is not clear to me. I just assume that Firefox leaves images untouched while Safari and Chrome use some kind of wrong “optimization”? Anyway, if you find out the reason for this behavior, I would be interested to hear about it…
The clear objective here is to have the images reproduce sharply whether on retina or non-retina but at the same physical dimensions on screen.
If I save the image using 144ppi at the desired dimensions it will appear double sized on a non-retina display and you can test this by simply dropping a Jpeg file on an open browser window. Ideally I’d like a system that allows me to serve retina ready images on retina displays but 72ppi on non-retina displays, however Foundation doesn’t allow me to do that. That’s a request I made some time ago.
Saving the images at 72ppi or 144ppi is actually irrelevant because the only thing that matters is the total pixel count. An image sized 200x200 at 144ppi is identical in pixel count to one saved as 400x400 at 72ppi. The display will then reproduce that pixel count on screen. When you save for web in Photoshop it automatically saves files at 72ppi so you have to double the physical dimensions for retina but that shouldn’t be a problem.
On my last site I have saved all my images this way and they look fine across all browsers and displays, which is why this is so strange. I produced that page in the link above shortly after updating Foundation to the latest version so I do not know if that is a factor or something else is going on.
The images are clearly sharp as intended on Firefox but not in Chrome or Safari, yet when I preview the page inside RW on a non-retina display it appears sharp and that is using Safari for previews. I think we need some insight here from Joe or somebody at Realmac.
@zeebe Do you think this is something Joe might understand? I can let you have the project file if that helps but Geoff mentioned on the weaver forum that he is seeing exactly the same problem, so it may well be possible for you to reproduce with your own images.
My main site has used the same method for retina images without problems but this is the first time I have tried this since updating Foundation to the latest version.
I feel your pain, @ashleykaryl, I like my photos to appear as sharp as possible myself, but I can live with a bit less than the highest standard (my knowledge of how things work in RW or in a browser is not high enough).
@Rovertek Unfortunately it’s not the solution and after checking closely I can now see that my other sites are affected as well. Hopefully I’ll hear back from Realmac today because right now the the majority of people visiting sites with retina-ready images are seeing soft images.
@Rovertek@zeebe I’ve been running more tests and found that Windows also has soft images on a non-retina display when looking at those pages, but all the time. Dragging the browser window does not affect it. Firefox and Edge are not affected on Windows, so I’ve filed a bug report with bugzilla after testing the latest nightly build that has the same problem.
It could be weeks or months before a fix appears in a stable release build of Chrome and Safari, so as a short term remedy I think we need to find an image stack that allows us to to load two separate images. One for retina that only emerges when required and one for non-retina on normal displays. It would be great if this could be incorporated into Foundation but I made that request over a year ago.
