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

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

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

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

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

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

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

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

补充：web前端 , HTML/CSS  ,