The website I'm creating (test6.lazyfoxdesign.co.uk) is responsive and makes heavy use of images for the background. I use high resolution images and scale them down using CSS for smaller resolutions. In all web browsers, except desktop Safari images are nice and sharp.
I attached screenshot of the issue. Google Chrome on left and Safari on right.
Source: https://i.stack.imgur.com/CKhFd.jpg
(Enlarge the imgur image to see difference.)
In the screenshot below (actual size) Chrome is top, Safari is bottom:
@media only screen and (max-width: 1366px) {.element {background:url(sprite-sm.png);}}
and@media only screen and (max-width: 2600px) {.element {background:url(sprite-bg.png);}}
or opt to use SVG for true noloss rescaling but you might not have those files done as vectors.