Should I use CSS3 media queries to deliver different image sizes for retina display devices?

问题

Many similar questions have been asked here before. I believe mine is slightly unique. I have developed a mobile app with JQM + Cordova/PhoneGap.

Originally I used big images (targeted towards retina display devices) and used responsive css to scale image down as needed. The problem with this approach that older devices end up having to download big images and these devices would not have the same processing 'grunt' that newer retina devices have - causing unnecessary overheads.

I decided to use css background images because I have heard they load faster than image HTML tags (as everything is loaded in css first) and then use css3 media queries like below:

@media 
(-webkit-min-device-pixel-ratio: 1), 
(max-resolution: 163dpi) { 
.pic #point1 {background-image: url(../img/baby/nonretina/Baby-TP1-Role-Models.jpg); border: 2px solid #ccc;}
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 326dpi) { 
.pic #point1 {background-image: url(../img/baby/retina/Baby-TP1-Role-Models.jpg); border: 2px solid #ccc;}
}

Now comes the issue, I have got stacks of images within my app (hundreds) so my css file is going to be quite large. Considering my app will need to load the css in the first page/view (index.html), will this negatively impact on my app load time? Should I still use this approach or revert to the former approach?

I just feel like a big css file with heaps of media queries may not be the answer to optimise images within my app for both retina and non retina devices...

回答1:

Putting every image in your CSS can be burdensome. I've used ralph.m's method for small images. But the new W3C standard, the picture element, already supported on Chrome, Firefox and Opera. It will let devices decide the best image to download. The PictureFill polyfill lets you use the picture element now on any Javascript-enabled device.

<picture>
  <source media="(min-width: 40em)" srcset="nonretinaBaby.jpg 1x,
    retinaBaby.jpg 2x">
  <source srcset="nonretinaBaby.jpg 1x, retinaBaby.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

来源：https://stackoverflow.com/questions/24358259/should-i-use-css3-media-queries-to-deliver-different-image-sizes-for-retina-disp

标签

css

css3

cordova

media-queries