CSS - how to make responsive images

Question

I've been just dabbling with responsive web design. I'm trying to change my existing site so that it wil work on mobile devices as well as on a desktop. I've been reviewing some examples on the internet such as http://2012.inspireconf.com/.

My question this - when it comes to images... what's the proper way to make them scale to different browser sizes? I've tried the following test in my css:

 @media only screen and (max-width: 980px) {        
.hero-unit {
  background: url("../img/1.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
.hero-unit {
  background: url("../img/2.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
.hero-unit {
  background: url("../img/3.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
.hero-unit {
  background: url("../img/4.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

The image files are just simple pictures with different numbers - starting from 1-4. This was just to give me a visual queue as to which image file is being loaded. As I resize my browser on my desktop, i can see that my media queries are working... the different images are being loaded.

But then it struck me that if i were doing this for a real site, this would mean that I would have to create 5 different versions of the same picture!

So is the "proper" way to do this to create one massive picture / image, and then shrink it as I go along? Meaning, should my css look like this instead:

 @media only screen and (max-width: 980px) {        
.hero-unit {
  background: url("../img/1.jpg") 40% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
.hero-unit {
  background: url("../img/1.jpg") 60% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
.hero-unit {
  background: url("../img/1.jpg") 80% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

 @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
.hero-unit {
  background: url("../img/1.jpg") 100% no-repeat;
  height: 7em;
  width: 14em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}   
 }

I tried this but the image didn't seem to scale but I'm not sure if it's just because I didn't create the image properly in the first place. (I'm not a graphic designer).

Thanks!

You should check out cssgrid.net. I just got into responsive web design myself, and I found digging into their responsive template, and fiddling around with the code to be very helpful. — mcriecken
– mcriecken, Commented Nov 8, 2012 at 19:45
This question is really more about background images - because getting images to scale is easier - modern browser support some background image scaling but IE won't resize a background image. — Andy
– Andy, Commented Nov 8, 2012 at 19:46

imwill · Accepted Answer · 2014-01-25 21:53:39Z

1

Solution 1: CSS Media Queries

If you don't care about bandwidth for devices which will match a smaller resolution you could just work with this solution.

It's not necessary to override the same css properties for every media query. You can set border, margin, padding etc. once for .hero-unit and all the media queries will inherit from it.

The background-size property has the contain keyword. It scales images to fit in the container. The background image resizes proportionally.

contain:

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

Depending on the kind of images your're dealing with you could also try to experiment with the cover keyword of background-size property.

cover:

This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

Example:

background-size: contain;

I also set up a working demo for you here http://jsfiddle.net/qBuzR/5/

Solution 2: Javascript and Server Side resizing (self hosted)

If you care about bandwidth you should resize the photos on the server side depending on the resolution the clients will request.

There is a library called Adaptive Images which works quite good with PHP on the server side for me. I guess you can find libraries for any language you need.

Solution 3: Javascript and Server Side resizing (Third party)

If you're lazy to setup you could try a third party service like mobify.com API. In other words I would call it Resizing-as-a-Service.

Example:

http://ir0.mobify.com/jpg80/100/100/http://farm4.staticflickr.com/3113/3831295511_2c004d9059_o.jpg

This API call transforms the image to image format JPG with quality level of 80% at maximum height and width of 100px.

edited Jan 25, 2014 at 21:53

answered Nov 8, 2012 at 20:39

imwill

6189 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dot Over a year ago

When you say "just work with this solution"... are you referring to my first code example, or the second one? thanks!

imwill Over a year ago

@dot your second example cause in this case you always load the same image(1.jpg), right?

dot Over a year ago

yes that's correct. The second solution always loads the same picture. I guess I really should care about bandwidth... it would the best design practice, would it not?

imwill Over a year ago

Yep, definitely important in my opinion. Loading times for mobile users will be much better and this will result in more happy users for sure.

Franva Over a year ago

@imwill Hi , my pic is in png format and I use the solution 1 and it doesn't work for me. Could you please make it clear about Cover keyword? I haven't found any html attributes with Cover inside.

Collectives™ on Stack Overflow

CSS - how to make responsive images

1 Answer 1

Solution 1: CSS Media Queries

Example:

Solution 2: Javascript and Server Side resizing (self hosted)

Solution 3: Javascript and Server Side resizing (Third party)

Example:

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution 1: CSS Media Queries

Example:

Solution 2: Javascript and Server Side resizing (self hosted)

Solution 3: Javascript and Server Side resizing (Third party)

Example:

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related