<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 byMatt 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 Jobsishas 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 withmax-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 byEstelle Weyland is about taking advantage of the possibilities in theSVGformat. 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/
优质内容筛选与推荐>>
1、(数据结构课程设计)稀疏矩阵运算器2、在java程序中连接数据库3、SQL Server日期计算【转】4、构造函数详解5、Linux文件检索
长按二维码向我转账
受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。
阅读
好看
已推荐到看一看
你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
取消
分享想法到看一看
确定
最多200字,当前共字
微信扫一扫
关注该公众号