A way to prevent a mobile browser from downloading and displaying images

Question

Hey,

Is there a simple way to prevent browser from downloading and displaying images, best would be via some magic style tag or javasctipe.

The thing is, I'd like to tweak the company's website a bit to be more usable via mobile devices. The company is a gaming one, there's like 5MBs of images on it's main page (and those can't be touched). They alredy display deadly slow on my dsl, and they can be killers to someone who's paying for his GPRS per MB ;)

The code of the page is not mine and shouldn't be touched too (in fact, it should be written from scratch, but it's not in my gesture to do it now) :)

I was thinking about two solutions:

1) If there was some kind of style-tag (or maybe a javascript? the one that would work on mobile browsers tho) that would prevent browser from downloading images and force to display alt-parameter instead I could simply attach this style if I discovered a user-agent to be some known mobile thing. or 2) I could tweak the webserver a bit to check the User-agent header and if client requests an image (.png, .gif and .jpg) send 404 instead. That has a downside tho - I'd like to allow the user to view images if he actually wants to.

It seems that first solution would be best - what you guys think? And is there a javascript way to do it?

I could try building document DOM, then get all <img> elements, and replace their src with some placeholder even but will that work on most mobile browsers (Opera Mini I suppose, the Windows Mobile thingy, the basic Symbian browser from Nokia)? And would playing with document DOM be a good solution on a mobile device (I'm not sure about it's memory-and-cpu requirements to be honest).

Answer 1

I would not rely on javascript or any other client side method with mobile browsers. Most mobile browsers just don't support javascript well enough.

Some server side "branching" is probably the way to go. And don't forget to disable the css background images while you're at it.

Answer 2

Why not use alternative style sheets? I just don't know how well they are supported by mobile browsers.

You can specify a seperate css for mobile devices:

<link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css">
<link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">

In that css you override the display of <img> and all background pictures.

Answer 3

You can use htaccess to redirect image requests made from mobile browser users. I haven't tested this but it should work:

RewriteCond %{HTTP_USER_AGENT} (nokia¦symbian¦iphone¦blackberry) [NC] 
RewriteCond %{REQUEST_URI} !^/images/$
RewriteRule (.*) /blank.jpg [L]

This code redirects all requests made to files in image folder by nokia,symbian,iphone and blackberry to a blank image file.

Answer 4

My Blackberry still show my "screen" stylesheet. How to disable it? Some of the smartphones these days want to show the screen CSS. Any modern updated thoughts?

Answer 5

That's like spoofing your user agent. If they really want the full version, just give it to them. Maybe add a suggestion to Blackberry users to complain with the manufacturer about the lack of such an option.