You probably have been told to design with the graceful degradation paradigm. If you have very smart friends, they may even use the « progressive enhancement » in place of graceful degradation. To enable an optimized access to mobile on a website, you probably use css media queries:
header { background-image: url(head-1280px.png) } @media screen and (max-device-width: 480px) { header { background-image: url(head-480px.png) } }
If you’re really smart and don’t care about IE, you may design first for narrow mobiles and then optimize all other use cases:
header { background-image: url(head-320px.png) } @media screen and (min-device-width: 321px) { header { background-image: url(head-480px.png) } } @media screen and (min-device-width: 481px) { header { background-image: url(head-855px.png) } } @media screen and (min-device-width: 856px) { header { background-image: url(head-1280px.png) } }
Sorry, what you has been told is bullshit. You are not optimizing anything. Worse, you are degrading all android user experience (and probably some iphone’s ones).
It’s not your fault, webkit has an horrible bug. It downloads all applicable images, not just the final one. This basically means that downloading only the big 1280px image may even be cheaper than these alternatives with media queries.
Yes, it’s sad, but so is the life. The former is true at least up to Android 2.3.2 so the problem won’t disappear this year.
If you ask me, it’s even worse: Browsers based on 2010’s webkit and lower (including mobile ones) don’t need any media query to be slowed down. You just need the following to download two images instead of one.
p { background-image: url(useless.png); } p { background-image: url(usefull.png); }
There are only three solutions
-
Push the fix on Android (still not there in 2.3.2) and upgrade to the latest firmware (not only on your own mobile, but on everyone’s) - Use the same images for all devices and screen widths AND don’t use the cascade to override previous background-image rules in your stylesheets
- Wrap every background-image rule in a media query and define min and max constraints for each media query so that a device never read more than one block (this mean you will never support IE without CSS hacks) AND don’t use the cascade to override previous background-image rules in your stylesheets
Laisser un commentaire