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


2268 views

2017-02-01 05:26:07

曾经有客户跟我说在网站后台上传了新闻图片,是相机拍摄的,传上去了但是超出了网页显示的范围,出现了滚动条,问我怎么处理,我告诉他先用图片处理软件将图片处理到合适的大小然后再上传,比如处理成 600 像素的宽度,高度按比例缩放,他告诉我说之前的网站都不用处理图片,传上去大小都是一样的,不会出现这种情况,后来经过一番解释他明白这样做的好处。 在用 div 和 css 制作网站内容页的模板时,我们会对其中的一些内容进行样式固定,比如标题用几号字、什么颜色,发布时间用什么字体、什么颜色等等,内容页面中自然也少不了图片,这些图片是通过相应的网站内容管理系统上传到服务器上的,在内容页中用 img 标签做了引用得以在网页上显示。 用相机拍摄的图片像素一般远远超过了网页内容区域浏览范围的大小,而图片本身的大小也在 1M 左右,有时候为了方便,直接把图片传上去,然后用 css 来统一控制图片的宽度,高度自动适应,但是这样做仅仅能让网页浏览者看到的图片像素变小了,似乎与内容很协调,实际上网页已经加载了这张 1M 左右的图片,如果一页有好几张新闻图,就要连续加载好多 1M 大小的图片,这时网页打开的速度明显变慢,而且有些图片会有一定程度的失真。 另外,如果把内容中图片的尺寸写死,有时候上传一些附件时,在附件前会有一个小图标,由于这个小图标也是用 img 标签引入的,因此也会被“放大”,要解决这个问题又必须要单独修改这个图标的样式,很是麻烦,而且一般内容的更新人员往往不懂这些技术活。 当网站进行改版时,可能不是原来的公司负责了,而这些上传到服务器上的图片如果是没有处理过的,“图片加载慢”的问题仍然会的不到解决,因为负责改版的人员不可能对你所有的图片一一进行处理。 从技术上能实现的效果有很多,但不是所有的方案都是合理的,因此,作为网站建设的技术人员,要养成这种对于图片先处理、后上传的习惯,即网页显示需要多少像素,就事先处理成多少像素再上传,不但可以节约磁盘空间,而且提高了浏览者的打开页面的速度。

上一篇:得承认我们有点讨厌比自己好的同学

下一篇:我们不小心成为了窥视者

扫码与我联系

★ ★ ★ ★ ★

“感谢你的鼓励与陪伴,我们的坚持才有意义”

创新与发展 – 优客记录保留所有权利

站内搜索 鄂ICP备16016329号-1 鄂公网安备42022202000038号