Let’s say you’ve designed a web page and it makes use of a full page background image. You really like the way the site looks with this background image. It looks amazing. But the image is 350k. You’ve decided that, while you know this is heavy, it’s worth it.
But then you start thinking about mobile. This large background image doesn’t add as much to the design on the small screen, and 350k especially cumbersome on the probably-lower-bandwidth and probably-slower-in-general device. Then consider that mobile browsers often have far more limited cache so even that won’t help. Mobile traffic is 2% of your overall traffic.
You could of course use media queries to not show the background image when a screen is narrow, but that doesn’t help much because that resource will still be downloaded. So you are in a pickle:
Do you use the 350k image and revel in the beauty, accepting the significant consequences for 2% of your users? Or ditch the image and deal with the page being a bit uglier-but-faster?
The poll (in the sidebar) will only have the two choices, forcing you to choose. But if you have a third option you think you’d go with, please leave it as a comment.
Somehow I became completely convinced that background images referenced in CSS, even if they are under a not-currently-active @media query were still downloaded by the browser. I feel like I had run test cases, talked with folks about it, etc, but either I must have been dreaming or browsers have fixed that issue. In this test case by reader Ruben you can test that even background images that are removed by @media queries don’t load.
So this poll is basically invalid… the correct answer would be that you always remove the 350k image via @media queries.
Interesting question. I said keep it, but I really think it depends on what the site is for. If it’s a gallery style site where people expect to wait for large graphics, then I think it’s okay. However, if it’s a site where people need information fast…then I would avoid it.
“You could of course use media queries to not show the background image when a screen is narrow, but that doesn’t help much because that resource will still be downloaded. ”
If the image is applied as a background image through CSS, you can set your media queries up to be mobile first. Having the image only applied in the desktop media query would prevent it from being downloaded on a mobile device. Problem solved?
I’m fairly sure that’s not true. All resources in CSS, whether the media query is in effect or not, are downloaded. I believe it’s that way on purpose so that should another media query suddenly become in effect, the change can happen very quickly.
Not ‘all’ resources, but all applicable resources*. Just to clarify for some people that are just grasping the concept of CSS! If you put a 5mb image as a background to a div that isn’t part of the page you’re loading, that image won’t be downloaded.
Incorrect Chris. One of the reasons behind mobile first design is that assets defined in desktop media queries will not be downloaded by the browser. You can test this easily by using the NET tab in Chrome or Firefox.
It’s a great feature
Check out 320 and up it’s essentially a refined version of the Less CSS framework that accomplishes this.
It is true. You can test it here. Please correct this article: media fragments do solve the problem.
@Graham: no shim needed, just “@media only”.
You’re right, it IS true.
I’ll correct this. Now I’m interested in how I came to this incorrect understanding. I wonder if in earlier versions of browsers that supported media queries they would download all assets if applicable or not, or, if I just assumed that incorrectly.
I think you need to add another option in there for some kind of query to show it or not. Most sites these days are built on some kind of platform and I think you could do a win-win by only query the image for web and not mobile. Or another option could be using jQuery to use it or not.
Either or, I think the poll should have an “other” option for a few different routes as the two you provided aren’t necessarily the only two options you have.
/my 2 cents! :)
Add the style inline, and hide it from mobile devices using server-side agent/browser sniffing. Yeah, it breaks just about every rule (inline styles, browser sniffing) but it works.
Alternatively, your server-side sniffing code could just simply add a class to the element, instead of using inline styles.
I like Matt Wilcox’s solution: http://adaptive-images.com/
It requires a little PHP and .htaccess, but its drop in to any existing project so you don’t have to recode your site.
Agreed! Adaptive Images is definitely a very elegant solution to solve this problem!
I would use some form of server-side (php) program to load or not load the image.
What RussellUresti said.
Chris, are you sure that if you override the background-image for mobile, it will still get downloaded?
nice job dude
http://adaptive-images.com/ is the way to go. It takes just a few minutes to implement and works awesome.
First Chris, I’m a big fan. Great stuff.
Second. At a certain point don’t you just need to rely on modified browsers and increasing processing speed with future mobile phones? Opera Mini and apparently (fingers crossed it’s good) Amazon Silk downsample images with different techniques to deliver them faster for mobile. Most people I see on older phones don’t even try and get on the internet any more because ALL websites load embarrassingly slow.
Plus, since they are almost giving new smart-phones away in gift bags at this point, I think the turnover is much higher than someone clutching to an old machine running Windows XP.
So, I say forget about it and make it look good. Responsive design should be for better reading not quicker download. Just my opinion.
It really depends on the purpose of the website, I think.
Like Jonathan says, it’s not a good idea for informational websites.
But I would use it if the main goal of the website is fun/entertainment, or when the websites ‘charisma’ is more important then functionality!
I get that you’ve purposefully limited the options to force a decision, but as seems to be the general consensus in the comments, the best option (for me at least) is some form of adaptive image server side trickery.
I vote to keep it.
I believe in lean and efficient code, but also realize that in today’s Internet-browsing society with the use of broadband and 4G connectivity spreading like wildfire, 350k isn’t really too big a problem.
I’d probably use some JS to detect screen width on load, then retrieve the correct image. If I wanted to be fancy I’d probably hook into the browser resize event, and dynamically update the image as needed. Is there anything wrong with this approach? Seems straightforward to me.
Look at it:
As it’s a background image, why not use JS to add a class to the body for desktop and create a css rule around that?
“I’m fairly sure that’s not true. All resources in CSS, whether the media query is in effect or not, are downloaded.”
No. Remember hover CSS images? They’re only used when the hover actually triggers.
I use the image, and create a much more streamlined, lightweight, mobile edition for my blog. :)
For a fullpage background image I would use the mobile first approach: use a smaller file and replace it with a higher resolution if the browser/user benefits from it.
Here’s the test. Watch how the huge image doesn’t load, using your browser network inspector.
Then change the max-width to 20 and see how it does.
if it’s desktop add Css background image even chose image with visitor screen width and height for reduce image size. and compress image with save for device and web option in photoshop.