When I first started working on a web app project I had never worked with CSS “Media Queries” before.  One of the blog posts I found online about how they work was this one:

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

The author argues that CSS Media Queries are “Fool’s Gold” because they don’t really deliver the optimizations for mobile that they promised.  In particular that even if an image was set to “display:none” or if you hid an element with a background image the image file would still get downloaded.  It was that last part that concerned me.

My preferred methods for dealing with images and multiple screen sizes is a one-two punch with both CSS and Javascript.  Here’s my plan:

1. Place images into the HTML with standard <img> tags, giving each image an ID so I can target it directly.  This is the default image that gets downloaded and is used for non-decorative illustrative images so I don’t deprive legacy browsers and users who have turned off CSS and Javascript from seeing relevant content.  I can presume those users have resource-strapped systems so the default images are the smallest, lowest resolution ones I also use for phone screens.

2. Use Javascript to swap out the source of that image tag depending on screen size.  It can also be set up in a function that reads “onresize” or “onorientationchange” events to swap out again, but only IF the browser is resized or the device is rotated.  Rotate or resize back and it should just pull the image from the local cache the next time.

3. For decorative images, or ones that really don’t add material to the content (for example a portrait photo of the author or subject of the article, which is nice to have but isn’t content in the same way as an exploded diagram or chart would be), I set those as background images with CSS.  I then swap out those backgrounds for different screen sizes with Media Queries.

My web app is supposed to be usable by everything from a phone screen (320×480) up to large desktop screens (1600+ pixels wide).  After reading the aforementioned blog about unnecessary images still getting downloaded I was concerned that phone users would also still be downloading the gigantic, high-res images intended for desktop viewers with HD monitors.   So I opened up both the iOS simulator and the Android Emulator and pointed them to my web app on my Dev Server.  Then I took a look at the server access log to see what files they were requesting.

To make things more interesting I added a purposely gigantic image file to my largest screen target media query with a funny name I could easily pick out of the log file.  Then I accessed my app again with both emulators and noted that neither of them – whether emulating phones or tablets – ever requested the giant file.  I also checked it in Chrome and Safari on the desktop and at smaller widths it still didn’t request the giant file.  Expand the browser to full screen width of 1920 pixels and the giant file was requested from the server.

In other words the CSS media queries are working EXACTLY the way they are supposed to.  It’s only requesting the background images for the current screen size.

Granted the blog post I’m referencing was talking about HIDING images from mobile viewers not swapping them out, but did provide a solution for that as well which involved nesting the element with the background image inside another element and setting the parent to “display:none.”  It also occurs to me that my Javascript swap-out method could default to all images initially being set to display the same tiny, clear GIF image and only swap that out with actual images at larger screen sizes.

I should also note that I was testing this in RECENT browsers.  Chrome 13, Safari 5, iOS 4.3, Android Gingerbread 2.3.3, so perhaps the issue with unnecessary images being downloaded was a bug that got fixed, I don’t know.  What I can say is that, as of today, my method seems to work correctly. 🙂