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)