You could perhaps get away with using a Visibility (or a more elegant solution with BryOwnDesign’s Showhide stack) setup to show different images for large screen sizes.
@Turtle
I sent in a pre-sales enquiry just a minute before you posted but I can now see the Retinafy stack has the same issue. Some images show this effect in a more pronounced manner but none of the Retinafy images on your page look that great here on a non-retina display.
The great mystery in all of this is why it still appears OK when previewed inside Rapidweaver, which makes me wonder if Rapidweaver itself is the cause. I know that sounds unlikely but something doesn’t add up here. Right now the majority of site visitors are seeing my images looking soft.
Looking through the thread, I have seen no mention of RapidWeaver settings…
Is this enabled by chance in your site or your testing site?
Brad
1 Like
No I don’t have that option enabled and all my images are warehoused on the server.
1 Like
Do you know of any websites that the desired effect works as expected?
I honestly can’t see it being RapidWeaver since your images are warehoused, but I could be wrong.
What about your host? Is it compressing images to affect the end result?
Does Safari Tech Preview do the same?
Just trying to give you directions to look…
Brad
@ashleykaryl Not to discount what you are seeing, but maybe it is my eyes, I really can not tell that huge of a difference from what you are seeing and really would not have noticed it if I would have went to your site if you had not pointed it out. I really think you are making a mountain out of a molehill as 99% of the people who visit your site who do not know about it probably do not notice it either. Again, not trying to say what you see or are saying is wrong, but I think if you hadn’t pointed it out, most people here would not have noticed.
@zeebe I understand your point and perhaps the average person wouldn’t notice unless the images were placed next to each other. The problem is that the people viewing my sites are generally photographers or art directors etc and if the images don’t appear really crisp none of them will think it is just the browser.
OK I have just done a screenshot showing Safari on top and Preview inside RW at the bottom. The difference in sharpness is pretty clear. You may need to click on the image twice to see it full size. NB It looks a bit dark because the app I’ve used to create the screenshot saved the image as a generic RGB profile rather than sRGB and I didn’t want to mess with it for these purposes.
It’s worth pointing out that the image seen in the Preview of RW is also warehoused and connecting directly to the server.
@Turtle I am looking into all these points but the image I just posted showing the difference between the preview and published image shows the difference.
EDIT Update: Yes the latest nightly build of Webkit does the same.
@ashleykaryl Wow, that’s a huge difference to my eyes. To be fair, I don’t expect web browsers to meet my quality standards when it comes to serving images. But at the least it would be useful to know why there’s such a difference.
To most folks the difference will be trivial or unimportant, but I understand how the difference makes a big difference in your usage scenario.
To me, this is more proof that it is a browser issue and not a RapidWeaver or theme issue. But being compared like that, again, it is noticeable (very much so), but would it be if they were not next to each other (to the standard person, I understand to someone in photography, yes).
Just wondering, have you asked anyone you know involved in photography who does NOT know about this issue to look at your site without telling them about the images?? What do they say.
About RapidWeaver using Safari, you are wrong, it uses WebKit which is what Safari uses, but it does NOT use Safari inside RapidWeaver preview.
@zeebe Not if it previews properly in RW from the same warehoused images.
Yes RW uses webkit to preview. Both Safari and Chrome are based on webkit.
I don’t think it’s necessarily a theme issue either.
That does not mean that previewing inside of RapidWeaver will be the same as what it does in Safari. Have you tried previewing your site FROM RapidWeaver to Safari?? Command-P does this.
It looks soft the moment it it previewed as you suggest but that doesn’t really prove your point either. It sure would be good if we could have some input from Realmac though… That was the 33rd message in this thread and they haven’t said a word. I emailed them a support request yesterday with the project file and there was no reply to that either.
probably because it is not a RapidWeaver issue. How does previewing it in Safari and it comes out soft NOT prove my point?!? You can do the same with other browsers as well, check the menus, it is preview in browser or something (do not have RapidWeaver open right now). If it is soft in those previews, then it is the browser…
I am not totally discounting that this may be a browser issue. That is why I filed a bug reports with bugzilla and through Apple. Given that RW uses webkit for previews though we need to establish why there is a difference since all the images are warehoused. That may tell us the real cause.
After a day of research I found that adding this CSS to the page improves the situation somewhat, though Safari now appears a bit gritty. Chrome is pretty good with this.
/* applies to Jpg images; avoids blurry edges */
img[src$=".jpg"] {
image-rendering: -moz-crisp-edges; /* Firefox /
image-rendering: -o-crisp-edges; / Opera /
image-rendering: -webkit-optimize-contrast;/ Webkit (non-standard naming) /
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; / IE (non-standard property) */
}
It would be good to get some feedback from others. I am still experimenting with these parameters.
4 Likes
2 Likes
I’ve just thrown up a comparison page at http://sunnymede.net/css/ which is the same as the previous page but with the css added.
It’s strange that the CSS changes can also be seen in the preview of Rapidweaver that are notably sharper now, yet there was a clear difference before adding the code.
I am glad to see that bugzilla have now listed this bug for internal tracking, so it should be fixed properly in time.
In the meantime this is not a perfect solution and curves in particular can look somewhat jagged in Safari. If you want to use retina resolution images though this is the best trade off I have been able to see.
One thing I am certain off though is that this is a recent problem that has occurred because the retina-ready images were previously looking much better not so long ago or I would have already seen this.
EDIT: After further testing I can see that Firefox actually looked worse with that CSS change and became over sharpened so it was correct without it and I have now removed that line of code.
Chrome now looking pretty good on both Mac & Windows. Definitely better than Safari that is tending to look jagged on curved edges. I still need to test Opera a little more but try this:
/* applies to Jpg images; avoids blurry edges */
img[src$=".jpg"] {
image-rendering: -o-crisp-edges; /* Opera /
image-rendering: -webkit-optimize-contrast;/ Webkit (non-standard naming) /
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; / IE (non-standard property) */
}
2 Likes
Was this issue ever resolved? I’m having the same problem.