How to make Responsive Images for mobile experiences

Question

UPDATE

---

I have Fullscreen background image. This creates problems for mobile browsing for the images are large and hi-res.

Next problem is with things like retina display how does a design/programmer prepare to deal with this issue? I see lot of article about how to switch between images. But then I get overly confused with pixel density vs resolution. The when and where it is needed and the how and why to target them.

Example:

*Fullscreen background image at 1900x1080 resolution & 72dpi. For best optimization, How many images should there be per resolution/pixel density? Furthermore, Given this scenario which library/plugin/symantics would be best on tackling this situation?

Lastly, If i use media queries to target and switch background images will it download all the images? or just when the requirements have been met?

@media (min-device-width : 768px) 
and (max-device-width : 1024px) {
background-image:url('paper1024.png');
}

@media only screen 
and (min-width : 1824px) {
background-image:url('paper1900.png');
 } 

Thanks stack

---

//old question didnt wnat to remove it for comment purposes//

So I'm making a responsive website with fullscreen images. The problem I've been running across is that the orginal images are far to large for mobile to download.

Being new to responsive design, I had no idea that this was a problem and discouvered it on my own accord. I read a few article

The best being:
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/

My problem is that: I dont believe <picture> tag is open to the public? I cant find any any more info on this.

Does anyone know if this is allowed? Furthermore, more information/documentation on how to use it correctly.

If picture is non-applicable. Is there any " standard " persay on making images responsive with out bloating mobile bandwidth?

Answer 1

This is the way i did retinafying in my last project:

First set images for desktop in an ordinary css using background-image:

#bg {
  background: image-url('wallpaper_desktop.jpg') center top;
  background-size: 1024px 768px;
}

Then, I adress mobile phones eg iphone:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
  #bg {
    background: image-url('wallpaper_mobile.jpg') center top;
    background-size: 320px 480px;
  }
}

Then it comes to retina image handling. Use an image, doubled in size (see the "@2x" in filename):

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #bg {
    background: image-url('wallpaper_mobile@2x.jpg') center top;
    background-size: 320px 480px; // Original size
  }
}

Since there are also iPads and MacBooks with Retina Displays, we should consider to serve them larger and hi res versions in comparison to hi res phones:

@media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
  background: image-url('wallpaper_desktop@2x.jpg') center top;
  background-size: 1024px 768px;
}

So, usually I'm using 4 versions per image. 2 desktop versions (one with doubled size for retina displays) and 2 mobile versions (also one with doubled size for retina displays)

By the way: There are no additional requests, when using media queries for additional images.