为什么不建议用img标签来控制图片大小

  曾经有客户跟我说在网站后台上传了新闻图片,是相机拍摄的,传上去了但是超出了网页显示的范围,出现了滚动条,问我怎么处理,我告诉他先用图片处理软件将图片处理到合适的大小然后再上传,比如处理成600像素的宽度,高度按比例缩放,他告诉我说之前的网站都不用处理图片,传上去大小都是一样的,不会出现这种情况,后来经过一番解释他明白这样做的好处。

  在用div和css制作网站内容页的模板时,我们会对其中的一些内容进行样式固定,比如标题用几号字、什么颜色,发布时间用什么字体、什么颜色等等,内容页面中自然也少不了图片,这些图片是通过相应的网站内容管理系统上传到服务器上的,在内容页中用img标签做了引用得以在网页上显示。

  用相机拍摄的图片像素一般远远超过了网页内容区域浏览范围的大小,而图片本身的大小也在1M左右,8630.html">有时候为了方便,直接把图片传上去,然后用css来统一控制图片的宽度,高度自动适应,但是这样做仅仅能让网页浏览者看到的图片像素变小了,似乎与内容很协调,实际上网页已经加载了这张1M左右的图片,如果一页有好几张新闻图,就要连续加载好多1M大小的图片,这时网页打开的速度明显变慢,而且有些图片会有一定程度的失真。

  另外,如果把内容中图片的尺寸写死,有时候上传一些附件时,在附件前会有一个小图标,由于这个小图标也是用img标签引入的,因此也会被“放大”,要解决这个问题又必须要单独修改这个图标的样式,很是麻烦,而且一般内容的更新人员往往不懂这些技术活。

  当网站进行改版时,可能不是原来的公司负责了,而这些上传到服务器上的图片如果是没有处理过的,“图片加载慢”的问题仍然会的不到解决,因为负责改版的人员不可能对你所有的图片一一进行处理。

  从技术上能实现的效果有很多,但不是所有的方案都是合理的,因此,作为网站建设的技术人员,要养成这种对于图片先处理、后上传的习惯,即网页显示需要多少像素,就事先处理成多少像素再上传,不但可以节约磁盘空间,而且提高了浏览者的打开页面的速度。

  本文来自:http://www.sunfei.net

时间: 2024-09-30 08:51:41

为什么不建议用img标签来控制图片大小的相关文章

{dede:field name='image' }控制图片大小设置

今天风信网络将针对dedecms中{dede:field http://www.aliyun.com/zixun/aggregation/11696.html">name='image' }标签控制图片大小教大家如何进行设置. 控制图片大小的方法通常采用CSS进行控制,但我们更希望能更过修改模板标签中的代码实现: dedecms中{dede:field name=\image\ }标签控制图片大小   方法一: 找到模板中代码的位置如: <div class="picvie

网页里控制图片大小的相关代码_JavaScript

1.用鼠标拖动来改变大小 <SCRIPT LANGUAGE="JavaScript">function resizeImage(evt,obj){newX=evt.xnewY=evt.yobj.width=newXobj.height=newY}</script><img src="7say.gif" ondrag="resizeImage(event,this)"> 2.用鼠标滚动控制图片大小 <img

Android实现通过手势控制图片大小缩放的方法_Android

本文实例讲述了Android实现通过手势控制图片大小缩放的方法.分享给大家供大家参考,具体如下: 该程序实现的是通过手势来缩放图片,从左向右挥动图片时图片被放大,从右向左挥动图片时图片被缩小,挥动速度越快,缩放比越大.程序思路如下:在界面中定义一个ImageView来显示图片,使用一个GestureDetector来检测用户的手势,并根据用户的手势在横向的速度来缩放图片. 在介绍这个实例前,先介绍一下Android中处理手势触摸事件的大概框架. 一.添加语句实现OnGestureListener

Android实现通过手势控制图片大小缩放的方法

本文实例讲述了Android实现通过手势控制图片大小缩放的方法.分享给大家供大家参考,具体如下: 该程序实现的是通过手势来缩放图片,从左向右挥动图片时图片被放大,从右向左挥动图片时图片被缩小,挥动速度越快,缩放比越大.程序思路如下:在界面中定义一个ImageView来显示图片,使用一个GestureDetector来检测用户的手势,并根据用户的手势在横向的速度来缩放图片. 在介绍这个实例前,先介绍一下Android中处理手势触摸事件的大概框架. 一.添加语句实现OnGestureListener

Flash制作控制图片大小和暗亮动画效果

控制 原文件:点击下载控制图片.rar(只适合FLASH2004,不适合FLASH6.0) 制作方法:把图片导入后实例名改为tp 然后添加4个按钮分别为大.小.暗.亮 然后就是为按钮添加代码了! 大的按钮的代码:on(release){   tp._xscale+=10;   tp._yscale=tp._xscale+10;  }  小的按钮的代码:on(release){   tp._xscale-=10;   tp._yscale=tp._xscale-10;  } 暗的按钮代码: on(

CSS控制图片大小-适应宽度_经验交流

不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px;} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的.     那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看:  复制代码 代码如下: img{width:expression(this.width>500?"500px":t

控制图片大小的js代码不兼容ie6 什么原因?

问题描述 <scriptlanguage="javascript">functionImages(){varimgs=document.getElementsByTagName("img");for(vari=0;i<imgs.length;i++){imgs[i].className="thumbImage";//可能是这个imgs[i].className的原因}}</script><styletype=&

css+js完美控制图片大小_javascript技巧

用css来控制图片大小显示的实现方法与代码_经验交流

有时候图片太大,会破环网页整齐的布局.这时可以用css来强制按比例压缩图片的高度或宽度 css代码如下: img,a img{ border:0;  margin:0;  padding:0; max-width:590px; width:expression(this.width>590?"590px":this.width); max-height:590px; height:expression(this.height>590?"590px":th