All was well until changes were made a few months ago to webkit browsers and suddenly everything was mushy on Safari or Chrome. The CSS script I applied just about fixes it. I’ve not used Sparkle but this problem is browser based, therefore it’s the same for everybody.
In Rapidweaver there are various stacks and scripts that will load a non-retina image initially then serve up a retina version if they detect a retina resolution image. I tried a couple options but was never entirely satisfied.
Sparkle does indeed use state of the art techniques to load the appropriate image, based on the browser used. This is more or less what it boils down to, the mix of HTML, CSS, Javascript and experimentation to nail this is quite a bit of work:
- on Chrome 25+, Safari 10+ webp images are served directly, these are about 25% smaller than corresponding JPGs or PNGs (this is via picture element with mime type qualifier)
- on Safari 9+ and Firefox 38+ the exact image, both in resolution and density, is served to the browser, and no other unneeded asset is downloaded (this is via the picture element)
- on earlier browsers the smallest image of any device is specified in the HTML, and as soon as Javascript kicks in the correct size/resolution image is loaded (this is equivalent to using picturefill but a lot more lightweight)
If you’re doing this manually you’ll be tempted to brush it off and say “meh that’s good enough”. In that case… more power to you?
There are lots of additional factors to consider if performance is an issue, such as the way files are delivered via http or http2 and CloudFlare Pro offers a brilliant algorithm for compressing images without loss of quality, but that is a whole different topic.
http2 actually only interleaves requests potentially reducing latency (but since servers aren’t optimized for short jobs it actually ends up increasing latency of smaller resources on average), CloudFlare’s Polish does compress images but most likely nothing you couldn’t do yourself.
Duncan
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options