Serve different versions of same image for cell, tablet, desktop, how to code?

HTML & CSS
1

I have a main page with a big background image in background. File is 1600x815 px and 191kb. I guess is acceptable for a destkop pc, but I’ d like to have and serve smaller images (versions of the same image), so that users accessing my website with tablets or cellphones receive a lighter version of that background image ok?

The .css file has this:

#banner {

background-attachment: scroll, scroll, scroll, fixed;

background-color: #645862;

background-image: url("images/light-bl.svg"), 
url("images/light-br.svg"), url("images/overlay.png"), 
url("../../images/banner.jpg");

background-position: bottom left, bottom right, top left, top center;

background-repeat: no-repeat, no-repeat, repeat, no-repeat;

background-size: 25em, 25em, auto, cover;

color: #fff;

cursor: default;

padding: 6em 0;

text-align: center;

}

The important one is the one called “banner.jpg”, that’s the big image on background I started talking about.
(the other files are simple thin lines to condiment the design)

I made this versions of my background image:

  1. banner.jpg (1600x815)
  2. banner1200.jpg (1200x611)
  3. banner640.jpg (640x326)
  4. banner320.jpg (320x163)
  5. bannerhd.jpg (1600x815 this one has almost no compression so better quality image than my original banner.jpg)

In my html page, the code has this tag

<section id="banner"></section> I belive (and I’m not an expert) that, this is the part who calls the image from the css file.

The big question is:
How do I do to “serve” banner640.jpg, or banner320.jpg and so on, depending on page be accessed by a cellphone, tablet, etc

A sample code would be great!

Thank you in advance!

2

For background images, media queries can be used to dish out different version of an image for different size screens.
A media query can look like this:-

some default css rules

@media screen and (max-width: 500px)  {
    some other css rules that apply only to screens 500px and smaller
    the default rules may be overridden
}

So for backgrounds you may have something like:-

#banner { background-image: url(images/myFullScreenImage.jpg) }

@media screen and (max-width: 500px)  {
    #banner { background-image: url(images/mySmallScreenImage.jpg) }
}

You can do it the other way around if you prefer and have the small one as default, by using min-width in the query (known as mobile first).

#banner { background-image: url(images/mySmallScreenImage.jpg) }

@media screen and (min-width: 500px)  {
    #banner { background-image: url(images/myFullScreenImage.jpg) }
}

Or you could have a combination of queries, maybe starting with a medium size default and both min and max width queries to give larger and smaller images.

1 Like
3

This might be one of the few use cases where device-width rather than max-width would be useful? (just for the image url of course)

You don’t want a desktop user loading 3 or 4 images each time he opens and closes the browser. We are more interested in resources rather than display area here. The rest of the media queries should be min or max-width as per usual.

4 Likes
4

Thank you and sorry for my ignorance.
Here http://goo.gl/8ISCUf2 is the case: the css called main has @media screen at bottom
I see several #banner so I’m confused

Where is suppoused I add the #banner { background-image: url(images/myMediumImage.jpg) } ?

5

That link is giving me 404.

6

Strange, it worked yesterday. But here is the already tested link , again: http://bit.ly/1THZ1gC

7

It’s probably best if you just add some new rules at the bottom of the css file seeing as you are unfamiliar with media queries and add this:

@media screen and (max-width: 1200px)  {
	#banner{
		background-image: url("images/light-bl.svg"), url("images/light-br.svg"), url("images/overlay.png"), url("images/banner1200.jpg");
	}
}
@media screen and (max-width: 640px)  {
	#banner{
		background-image: url("images/light-bl.svg"), url("images/light-br.svg"), url("images/overlay.png"), url("images/banner640.jpg");
	}
}
@media screen and (max-width: 320px)  {
	#banner{
		background-image: url("images/light-bl.svg"), url("images/light-br.svg"), url("images/overlay.png"), url("images/banner320.jpg");
	}
}

As I mentioned previously that will also change desktop screens when resized (as well as device screens) which may be what you want but if you want to target by device then use max-device-width instead of max-width. Probably best to stick with max-width for now.

8

It could be useful for testing purposes on the desktop. You can switch to max-device-width once you are happy it’s all working.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.