Soft images in Safari or Chrome but fine in Firefox


#1

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.

Any ideas?


#2

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.


(Rob D) #3

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?


#4

@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.


(Rob D) #5

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…


#6

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.


(Rob D) #7

I agree. The input from those two sources would be very important.


#8

I’ve just had a reply on the weaver space forum and it turns out I am not alone in seeing this problem. https://weavers.space/content/perma?id=8841


#9

@nikf @zeebe Any ideas why these images are appearing soft in Chrome and Safari on non-retina displays?


(Robert Ziebol 🖖🏼) #10

Actually no, not a clue.


#11

@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.


(Robert Ziebol 🖖🏼) #12

Sure, send in a ticket.


#13

Done that just now and received the automated reply.


#14

@Rovertek Tried using the blank theme and fluid image but it has exactly the same problem. http://sunnymede.net/blank/


(Rob D) #15

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).


#16

It seems that users of another app called web flow have experienced the same issue and that a bit of CSS can fix it. I am working on this.


(Rob D) #17

Thanks for sharing, @ashleykaryl!


#18

@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.


#19

@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.


(Brad Halstead) #20

@ashleykaryl

Do you have the same issues with the Yuzoolthemes Retinify Stack demo page?

Brad