How to make responsive images for mobile events

Question

UPDATE

---

I have a full screen background image. This creates problems for viewing on mobile devices, as the images are large and welcoming.

The next problem is related to such things as retina display, how is the design / programmer preparing to solve this problem? I see a lot of articles on how to switch between images. But then I get excessive confusion with pixel density and resolution. When and where is necessary, and how and why to target them.

Example:

* Full screen background image with a resolution of 1900x1080 and 72dpi. For better optimization, how many images should be per resolution / pixel density? Also, given this scenario, which library / plugin / symantics would be best in dealing with this situation?

Finally, if I use media queries to target and switch background images, will it load all the images? or only when the requirements were 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 didnt wnat question to remove it for comments //

So, I am making a responsive website with full-screen images. The problem I am facing is that the original images can be downloaded for mobile devices.

Being a novice in responsive design, I had no idea that this was a problem, and abandoned it on my own. I read some articles

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

My problem is that: I do not believe that the <picture> open to the public? I can not find more information about this.

Does anyone know if this is allowed? In addition, more information / documentation on how to use it properly.

If picture not applicable. Is there any “standard” problem in making images responsive with swelling mobile bandwidth?

Answer 1

This is exactly how I did retinafying in my last project:

First set the desktop images in plain css using background-image:

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

Then I turn to mobile phones, for example. 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 retinal imaging. Use the image doubled in size (see "@ 2x" in the file name):

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

Since there are also iPads and MacBooks with Retina Displays, we should consider serving their larger and welcoming versions compared to hello phones:

 @media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) { background: image-url(' [e-mail] ') center top; background-size: 1024px 768px; } 

So, usually I use 4 versions for each image. 2 desktop versions (one with double size for retina displays) and 2 mobile versions (also one with double size for retina displays)

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