So. I have an image that is 1004 x 2292 and I have resized it to 230 x 525. I used a custom class to set the size of 230 x 525 so it is scaled, when you click on it, it pops up with the full resolution image. The problem is the image is blurry before you click on it to load the full resolution photo. Unless I use a high resolution image and then scale it down (Which I’m trying to avoid), the images are blurry.
Anyone know a workaround or where I am going wrong?
Are you using a non retina display and have you checked this in different browsers, such as Firefox to see if the problem persists? I have a suspicion this is a webkit rendering bug that I reported a couple years ago, but since then it has only become worse.
Alternatively, if you are using a Retina display it’s likely that it is looking blurry because the file dimensions need to be bigger to account for the higher screen resolution.
I’ve think I’ve figured it out. I’m doing more testing today with it.
@1x = Small Mobile (I Presume)
@2x = Desktop
@3x = iPhone
I’ve resized my images appropriately and it seems to be working ok, with @3x being 3x the size of @1x (or even bigger in some cases but as I said I’m playing around with it still), only thing is I can’t work out why @3x is for an iPhone but @2x is for a 5K iMac. Anyhow, it doesn’t seem to have any effect on page speed or size and the images are crisp sharp.
It’s difficult to comment without seeing this live and how everything is set up on the page. You are juggling with screen resolution, but it then becomes tricky when taking account of different browsers that each impact how images are displayed.
Blocs is actually helpful in offering x1, x2 and x3 options, which are then displayed according to the users’s device. If you want to maintain more control you might need to duplicate blocs for different device sizes and use visibility settings to dictate what is displayed. Assuming your images are properly optimised and you have a decent server it’s unlikely you’ll see obvious performance issues.
A couple years ago I had a built a website using Rapidweaver with all the images set at 2x resolution for retina devices. Everything was fine, until they were suddenly all looking blurry a couple months later on non-retina displays in the latest versions of Safari and Chrome. The images hadn’t changed, but the browsers had…
A lot of research and tinkering eventually led to a script that I have added to this post as a zipped file. You could try taking the retina.css file and adding it as a page attachment to see if that makes any difference, but check it in web browsers, rather than Blocs.
When I first reached this point after a lot of experimentation I found that Firefox was still best, but Chrome was pretty good at this point. Safari suffered from slightly jagged edges on diagonal lines, but overall a big improvement on the softness without the script.
Recently I took another look at this and concluded the situation was actually worse than before, so Apple are clearly not too fussed about pleasing users of non-retina displays. Firefox is the only one that really gets this right. You shouldn’t be having any problems at all though on retina displays, assuming the source file is high enough resolution.
retina.css.zip (850 Bytes)
As a quick follow up, this is not so much about physical screen dimensions as screen resolution. It’s always a case of compromise though with so many variables that are beyond your control.
Blocs could use x1 for a standard resolution older or cheaper desktop display. I think pretty much all recent mobiles are higher resolution, so 2x would be a reasonable compromise. While you might be able to use x3 on an iPhone it may not be practical for visitors on a mobile connection, so you might even decide to skip x3 files for that reason. There are lots of factors to juggle.
100% agreed.
I just thought it was strange how a 8 Plus gets the @3x and a 5K iMac gets a @2x image. My images are very optimised and the max image is probably 60kb. Either way using the @1x, @2x and @3x definitely helps