图片大小适配方法整理

1、H5 data-fullsrc属性

<img src="small.jpg" data-fullsrc="large.jpg">

Date-fullsrc是html5中的一个定义文件的属性，宽度超过480px的屏幕，就会加载较大分辨率的图片（large.jpg），小屏幕分辨率的就会加载较小的图片（small.jpg）。

Reference:http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

DEMO：https://www.filamentgroup.com/examples/responsive-images/

主要代码：

JS（https://www.filamentgroup.com/examples/responsive-images/responsiveimgs.js）

HTML: <img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />  "?"前后分别是小图大图

 

2、其他 Here are 6 different takes on Responsive Images. （http://bechster.com/responsive-images-6-techniques/）

1. Picturefill

 

A little history: In November 2011, Bruce Lawson got frustrated over the lack of standards for marking up adaptive images. Therefore, he proposed to re-use the syntax of the HTML5<video> element in the form of a <picture> element. The <picture> element makes it possible to define multiple image sources. By using media queries you can then control under which circumstances an images should be displayed to the user.

 

The <picture> element is still on the drawing board, unsupported in all browsers, and therefore as of yet unusable.

 

However, Scott Jehl thought it was such a good idea, that he made the polyfill, Picturefill, which makes a similar syntax work with JavaScript:

<div data-picture="" data-alt="">
  <div data-src="small.jpg"></div>
  <div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
  <div data-src="large.jpg" data-media="(min-width: 800px)"></div>
  <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
  <!-- Fallback content for non-JS browsers -->
  <noscript>
    <img src="small.jpg" alt="">
  </noscript>
</div>

Advantages: Lightweight, easy implementation of the script.
Drawbacks: Requires a great deal of extra mark up, which makes it hard to implement retrospectively on existing content.
Demo: http://scottjehl.github.io/picturefill/
Download & documentation: https://github.com/scottjehl/picturefill

 

2. HiSRC

HiSRC is a jQuery plugin for adaptive images, written by Christopher Schmitt. It tries to take into account the screen size as well as the bandwidth. Images are placed in the HTML document with the usual <img> tag and alternative image sources are then defined with data attributes:

<div class="hisrc">
  <img alt="" src="small.jpg" data-1x="medium.jpg" data-2x="large.jpg" />
</div>

Advantages: Clean and semantically valid code, lightweight.
Drawbacks: Requires extra mark up and data attributes on the <img> element, which makes it hard to implement on existing content.
Download & documentation: https://github.com/teleject/hisrc

 

3. Responsive-Enhance

Responsive Enhance is a tiny JavaScript, written by Josh Emerson. The script works on <img>elements together with data attributes:

<img id="demo" src="medium.jpg" alt="" data-fullsrc="large.jpg">
<script>responsiveEnhance(document.getElementById('demo'), 400);</script>

Advantages: Clean and semantically valid code, lightweight.
Drawbacks: Requires extra mark up and data attributes on the <img> element, which makes it hard to implement on existing content. Downloads 2 images on large displays.
Download & documentation: https://github.com/joshje/Responsive-Enhance

 

4. Adaptive Images

Adaptive Images is primarily a server-side technique, which “sniffs” the users’ screen size and automatically scales, caches and provides appropriate versions of the websites’ images. It does so by using .htaccess, a php file and a single line of JavaScript, completely without editing any existing markup. Adaptive Images is written by Matt Wilcox.

Advantages: Clean and semantically valid code, easy to implement on existing content.
Drawbacks: Sets a cookie in the user’s browser, requires server-side setup; Apache, PHP and .htaccess.
Demo, download & documentation: http://adaptive-images.com/

 

5. Compressive Images (my favorite)

More details, fewer kilobytes: This technique is about providing only one version af the image to the user regardless of screen size, but in return compressing it heavily. Daan Jobsis has made experiments which show a very limited loss of quality (sometimes even an improvement), when large, heavily compressed images are squeezed together in just half of their original dimensions. See also Filament Group’s post on the same subject.

Example: A .jpg with the dimensions 1280 × 1024 pixels is squeezed down to 640 × 512 pixels or less.

Practically, you will set the image sizes in CSS with max-width: 100%; (The Fluid Images technique).

Low res 301 × 200 pixels, jpeg quality 80%, 34kb.	Hi res 602 × 400 pixels, jpeg quality 25%, 27kb.

In other words, you are not able to see the compression. This method is my favorite so far, because it is so incredibly simple.

Advantages: Very simple. In some cases even better results. Perfect for retina-displays. Small file sizes.
Drawbacks: Implementing in a CMS requires setting up some image compression on the server.
Demo & documentation: http://blog.netvlies.nl/design-interactie/retina-revolution/

6. Responsive Images Clown Car (SVG embedding)

Rather experimental: The Clown Car technique is developed by Estelle Weyl and is about taking advantage of the possibilities in the SVG format. The reference to the SVG file is placed in the usual <img> element:

<img src="image.svg" alt="responsive image">

It is in the SVG file the magic is happening. The technique is based on the fact, that SVG already supports both bitmap graphics and media queries:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
 <title>Clown Car Technique</title>
 <style> 
  svg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
  } 
 @media screen and (max-width: 400px) {
  svg {background-image: url(images/small.png");}
 } 
 @media screen and (min-width: 401px) and (max-width: 700px) {
  svg {background-image: url(images/medium.png);}
 } 
 @media screen and (min-width: 701px) and (max-width: 1000px) {
  svg {background-image: url(images/big.png);}
 } 
 @media screen and (min-width: 1001px) {
  svg {background-image: url(images/huge.png);}
 }
 </style>
</svg>

Advantages: Media queries are baked in to SVG, SVG supports bitmap graphics. Only the necessary image is downloaded. All logic lies inside the SVG image.
Drawbacks: SVG is unsupported in IE8. Import of external bitmap images are blocked by the Content Security Policy of most browsers.
Demo: http://estelle.github.io/clowncar/bgonly.html
Documentation: http://www.standardista.com/responsive-images-clown-car-technique/