前言
网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题。
作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Site (http://developer.yahoo.com/performance/rules.html),同时,他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/
我强烈推荐所有的网站开发人员都应该学习这些最佳实践,并结合自己的实际项目情况进行应用。 接下来的一段时间,我将结合ASP.NET这个开发平台,针对这些原则,通过一个系列文章的形式,做些讲解和演绎,以帮助大家更好地理解这些原则,并且更好地使用他们。
准备工作
为了跟随我进行后续的学习,你需要准备如下的开发环境和工具
- Google Chrome 或者firefox ,并且安装 Yslow 这个扩展组件.请注意,这个组件是雅虎提供的,但目前没有针对IE的版本。
- https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
- https://addons.mozilla.org/en-US/firefox/addon/yslow/
- 你应该对这些浏览器的开发人员工具有所了解,你可以通过按下F12键调出这个工具。
- Visaul Studio 2010 SP1 或更高版本,推荐使用Visual Studio 2012
- 你需要对ASP.NET的开发基本流程和核心技术有相当的了解,本系列文章很难对基础知识做普及。
本文要讨论的话题
这一篇我和大家讨论的是第三十一条原则:Do Not Scale Images in HTML (不要在页面中缩放图片)。
老实说,这个错误的设计其实在我早些年做网页设计的时候,也经常会犯(原因在于很多时候,我们都有懒散的心理,图一时的方便)。
有时候,我能得到的图片尺寸并不那么合乎要求(我说过了,我通常不太会自己做图片),但为了在网页中显示出我希望的尺寸,我会很自然地想到通过如下的方式来图片进行缩放:
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
缩放的意思其实是说:
不管mycat.jpg这个图片原始尺寸是多少,我通过明确地设置图片宽度和高度,要求它最终显示出来的尺寸是100px * 100px.
很显然,浏览器下载到原始图片之后,如果原始尺寸与目标尺寸不符,就会需要对图片进行缩放(拉伸或者缩小),以便实现刚才所提到的目的。
所以,请记住并遵守这条原则:你需要在网页中显示什么尺寸的图片,就请图片设计人员提供什么尺寸的图片,而不是在网页中进行缩放。
文章来源:http://www.cnblogs.com/chenxizhang/archive/2013/05/19/3086912.html