为不同的屏幕尺寸提供不同的图片(为那些没有必要下载全尺寸大图的设备节省带宽)

为不同的屏幕尺寸提供不同的图片

  现在我们可以让图片完美缩放,而且也知道了如何限制特定图片的显示尺寸。图片尺寸必须比其显示尺寸更大以保证渲染效果,否则的话图片可能看起来很糟糕。基于这个原因,图片文件的体积就永远比实

际显示所需的大。

  很多人都在研究这个问题,尝试为较小的屏幕尺寸提供较小的图片。接下来我们就看一看如何利用该技术实现图片自适应。

  实现 Adaptive Images解决方案需要 Apache 2、PHP 5.x和 GD库,也就是说需要 Web服务器端编程。首先,在其网站上下载.zip文件开始配置:

  解压文件,然后将其中的 adaptive-images.php 和 .htaccess 文件拷贝到网站的根目录。如果你网站的根目录下已经有一个 .htaccess 文件了,不要覆盖它。参考下载包中的 instructions.htm 文件看看怎么做合适。接着在网站根目录下创建一个名为 ai-cache的文件夹。

  用你最喜欢的 FTP客户端软件设置该文件夹的权限为 777 。然后把如下 JavaScript代码复制到每个需要自适应图片的网页的头部:

<script>document.cookie=‘resolution=‘+Math.max(screen.width,screen.height)+‘;path=/‘;/script>

  

  如果你没有使用 HTML5(在下一章会改用 HTML5),想让页面通过标准验证,则需要追加 type属性。所以 script标签应如下所示:

<script type="text/javascript">document.cookie=‘resolution=‘+Math.maxscreen.width,screen.height)+‘; path=/‘;</script>

  切记这段 JavaScript 代码要放在页面头部(最好作为第一个脚本),因为它需要在页面加载完成之前,而且要在发出图片请求之前运行。

把背景图片放在其他地方

  过去,我通常将所有图片都放在一个名如 images或 img的文件夹中,不论是用做 CSS背景的图片,还是通过标签插入的图片。但是在使用自适应图片方案时,建议将那些用于CSS的背景图片(或者那些你不想被缩放的图片)放在另一个目录。自适应图片方案默认为此创建的目录是 assets 。如果你不想缩放某张图片,把它丢进这个文件夹即可。如果你想将这类图片存在其他(或更多)文件夹中,则需要像下面这样修改 .htaccess 文件。

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images --------------------------------------------------------
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !bkg
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images -----------------------------------------------------
</IfModule>
上面的代码设定了存在 assets 或 bkg 文件夹中的图片不会被缩放。反之,如果你想显式声明只允许某个特定文件夹中的图片被缩放,那么将设置规则中的感叹号去掉即可。

  例如,如果我只想让网站根目录下名为 andthewinnerisnt 的文件夹中的图片被缩放,则修改后的代码如下所示:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images ------------------------------------------------------
RewriteCond %{REQUEST_URI} andthewinnerisnt
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images --------------------------------------------------
</IfModule>

  这就是要设置的全部内容。检查是否能正确生成自适应图片的最简单办法,就是在网页中插入一张大图片,然后用手机访问这个页面。之后用 FTP软件检查 ai-cache 文件夹中的内容,你应该可以看到一堆文件,以及使用屏幕尺寸断点命名的文件夹,如 480 (如下图):

  Adaptive Images方案不仅限于静态网站,它也可以被用于内容管理系统,而且在 JavaScript被禁用的情况下依然有效。自适应图片方案给我们提供了一种方法,可以根据屏幕尺寸提供完全不同的图片,为那些没有必要下载全尺寸大图的设备节省带宽。

原文地址:https://www.cnblogs.com/lishenghao/p/tuPianZiShiYing.html

时间: 2024-10-29 12:48:20

为不同的屏幕尺寸提供不同的图片(为那些没有必要下载全尺寸大图的设备节省带宽)的相关文章

jQ处理页面中尺寸过大的图片

这是一个非常实用的功能,在网页里难免会出现一些尺寸过大的图片,会将页面撑开或者图片被部分隐藏,我们通常会用css的max-width来加以 控制,但ie6却不吃这套.我在做一个站时,就遇到这种困惑,因为最近也在学习jQuery,就想到用jq来处理这个问题.经过一番思索,觉得这个问题其 实并不难,下面就具体来说: 一.思路: 要解决尺寸问题,首先要先获取图片的宽和高,然后定义一个最大宽度,进行判断,如果实际宽度大于设定的最大宽度,那么就让实际宽度等于最大宽度,至于高度就按照高宽比进行比例缩小即可.

如何设置全尺寸角标

1.新建一个透明背景的画布 新建画布,设置好分辨率,背景内容选择透明. 2.插入角标并调整好位置 3.保存全通透的角标图片 如图,一个带通道的全尺寸角标就生成了 原文地址:https://www.cnblogs.com/cocobing/p/10183660.html

怎样区分图片的实际像素、分辨率和尺寸大小

为什么设计师给的设计图到前端开发师手里要除以二? A:像素分为物理像素和逻辑像素,设计师提供的是物理像素,而我们使用的是逻辑像素. 物理像素并不代表css中使用的像素. 如iphone5s的逻辑分辨率是320×568,而物理分辨率是640×1136,像素倍率是2倍. 1.实际像素:在数码产品上图像时由点构成的,也就是说同一块大的尺寸,上面的点越多,他的实际像素就越大.比如一张屏幕分辨率为1024*768的照片,大概就是约80万像素,也就是说横向由1024个点构成,纵向由768个点构成.也就是说有

ionic生成全尺寸icon和splash

http://www.jianshu.com/p/eda363eb28d3 1. icon 提供1024*1024的icon.png图片, 放到根目录下的resources目录下, 执行命令就能生成各个尺寸的图片了 ionic cordova resources --ionic 2. splash 先安装插件 $ ionic cordova plugin add cordova-plugin-splashscreen 同样的提供2732*2732的splash.png图片, 执行命名 ionic

根据屏幕大小换不同背景图片

今天遇到了全屏翻滚的网站首页,自然客户要求图片不能大量变形,于是,我通过写两个不同的类(每个类里面的background-images属性值URL不同),在页面里面通过jq判断屏幕大小,添加和删除自定义类. jq代码如下: $(function () { //判断是否宽屏 var winWide = window.screen.width; var wideScreen = false; if (winWide <= 1199) {//1199及以下分辨率 $(".swiper-wrapp

循环播放一张图片,如果图片大小小于屏幕,继续使用该图片进行填充

场景: 需要做出来的效果差不多如标题所述,即如果屏幕宽度为720,而图片的宽度只有150,现在需要从中间开始,往两边移动该图片, 我们现在以往右边移动为例,如果往右移动了150,此时绘制了一整个完整图形,继续移动,此时不仅要从中间绘制出新的图形,已经绘制的完整图形也得向右移动.进而达到动画的效果. 分析: 为了达到上面的效果,最开始想到的是使用动画,但是发现: 1)如果选择平移动画,只能移动图片,不会保留之前图片走过的路径,这样的话背景图就不会出现连续的情况,而只是有单张图,并不是这里想要的.

JavaScript实现图片预加载,自适应指定尺寸容器

<!DOCTYPE html> <html> <head> <title>javascript</title> <meta type="viewport" content="width=device-width,initial-scale:1.0,user-scalable:no"/> </head> <body> <input type="button&

进博会指定传神提供智能翻译硬件 多举措保障语言服务全覆盖

11月5日,一场全球瞩目的贸易盛宴--首届中国国际进口博览会(以下简称"进博会")在上海隆重开幕.对于前来参展的130个国家和地区的3000多家展商来说,进博会是一个全新渠道,可以与超过16万采购商洽谈商贸合作,共同维护加强多边贸易体系.印度尼西亚.越南.巴基斯坦.南非.埃及.俄罗斯.英国.匈牙利.德国.加拿大.巴西.墨西哥等12个主宾国均设立了独具特色的展馆.各参展国各显神通,展示各自贸易投资领域亮点以及各国的特色产品. 为了保证来自全球各国的贸易伙伴高效顺畅的达成合作,解决语言沟通

根据手机屏幕的旋转,调整图片

function exchangeWindow(){ if(window.orientation == 0) { $('#helpimg').attr("src","/images/road/help_0.jpg"); } else{ $('#helpimg').attr("src","/images/road/help_90.jpg"); } } window.addEventListener("orientati