Blurry images on stock android browser

Question

I\'ve been trying to figure this out for weeks and have found no real solutions. I discovered one workaround but I find it very annoying.

The images load blurry on m

Answer 1

I notice from your screenshots that you're currently testing this over your 4G (ie: mobile connection).

Have you tried repeating the tests over wifi instead? You need to ensure you don't pull cache when comparing so it's also worth dropping your browser into private browsing/incognito mode - this will force it to grab fresh assets from the host rather than using internally-cached assets (much easier than wiping your browser cache every time).

The reason I mention the device internet connection is that I came across a really similar issue last year and, after much hunting, came to the realisation that it was the network's proxy compressing the images prior to delivery to save on bandwidth.

I might be way off the mark but it's certainly something you should check so that you can at least cross that possibility off your list.

If it does turn out to be the case, tere's a really interesting discussion on the whole thing: http://blog.sebcante.com/2012/01/prevent-image-compression-from-3g.html

The bad news is that mobile networks don't always pay attention to no-cache http headers.

The three most simple options available are:

• serve your images via https - the network won't cache encrypted traffic;
• serve your images via different http port;
• use data-url to embed the images in-line (although there are browser-support implications at that point).

Finally, there is a partial-workaround in the htaccess file of the HTML5 boilerplate which go some way to mitigating these effects. In the htaccess file:

# ----------------------------------------------------------------------
# Prevent mobile network providers from modifying your site
# ----------------------------------------------------------------------

# The following header prevents modification of your code over 3G on some
# European providers.
# This is the official 'bypass' suggested by O2 in the UK.


Header set Cache-Control "no-transform"

This works with the couple of the UK networks I've tested, but your results may vary..