1、控制jpg图片的水平
网站制作时水平高的jpg格式图片比较明确,色彩更鲜艳,不少人就用这种图片来美化header,其实这对速度的影响是非常大的,由于打开一个页面第一加载的就是header,header加载时间太长的话,比较容易使首次来的访客反感,还有一种状况是页面上的小图标,有的站长过于追求美观,于是页面上的小图标也用优质的图片来做,这是非常不必的。
2、尽可能用gif格式
jpg格式在在展示色彩丰富的大图片是成效非常不错,但做网页图标的话,gif才是最好的格式。由于在展示像素级的细节是,gif的成效比jpg好了不知多少倍,可以试试看看。截取一幅含有12px或14px文字的图,分别保存为256色的gif和水平为80的jpg,对比一下文字的显示成效,gif一定比jpg明确不少,而体积却小了不少。所以,在制作小图标或带有小字体的图片时,优先用gif格式,这里还有说到一个颜色数的问题,gif格式能显示的颜色数目最多为256色,其实对不包括很多色彩渐变的图片来讲,已经是很足够了,因此,在制作颜色比较少的gif时,试试看看减少颜色数,只须成效能过得去就好了。
3、怎么样插入装饰性图片
这里要讲的不是简单的用img标签插入图像,用这种办法插入页面小图标等装饰性图片弊病是很大的。第一,用img标签插入的图片不可以通过简单的办法达成变换成效,在这里,美化成效要打个打折,第二,用img插入的图片,假如图片不在浏览器缓存里,而且不重复出现的话,会大大增加http请求数。由于img标签理论上是出现一次载入一次的。其三,用img标签不利于调整图片地方,假如一个图片,需要在header靠右和footer靠左这两个地方出现两次,你就需要为它写两次css。其四,用img标签插入图片不利于整理,整理图片可以大大降低http请求数,到底整理图片有那些技巧呢?看下节。
4、页面背景图片的处置办法
不少人喜欢用图片做页面元素的hover变换成效,但却没把有关的图片整理,致使一些变换成效有事会由于图片载入失败而失色。大家可以把针对某个成效的图片都整理成一个文件,在css里用background-position属性调整图片地方。这种做法有哪些好处是背景仅需一次http请求,图片可以重复调用,也有益于图片变换。看到这里,你了解装饰性图片如何插入了吗?对,用css。
5、插图尽可能用外部链接
因为服务器性能的限制,一般非独立主机都会限制单ip的http请求数,假如一个页面里http请求太多的话,页面总是要等很长时间才能完全载入。尤其是图片,假如太长期不可以加载的话,浏览器就会断开与服务器的链接,这是就需要在点击一下显示图片才能显示出来,有一些最好的支持外部链接的相册。如此做不但能减轻服务器重压,节省流量,更要紧的是我不相信大多数站长用的服务器比那些专业的在线相册快。
6、提升图片传输并行程度
用多个而不是一个域名访问图片,大部分浏览器中,对于同一域名下的并发HTTP请求数是有限制的,一般为几个。当页面中图片数目较多时,可以考虑分配不需要的域名来访问。
7、延迟加载图片
原理非常简单,就是对于标签,先不要写上它的资源地址src(由于只须写上了,浏览器加载到这个img标签,就会去下载src指向的图片资源),可以把它的资源地址先写在一个临时属性里,下面用到的一段js(等于一个js小插件)中写在了一个属性originalSrc里(这个属性叫什么都可以的),然后给
标签们绑定事件,这个事件就是判断其是不是出目前了浏览器的目前显示地区,假如出现了,就把originalSrc指示的资源地址写给
标签的src,src写入后浏览器就会去下载图片资源,这样就达成了图片的延迟加载。
网站名字大连网站设计开发中的一些图片用优化方法推荐