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.
- 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)
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.
freewaytalk mailing list
Update your subscriptions at: