深圳网站建设公司易捷网络科技
深圳易捷网络科技有限公司logo易捷网络

企业网站建设中图片的优化方法

信息来源:深圳网站建设公司易捷网络
添加时间:2019-04-02

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请求太多的话,页面往往要等很久才能完全载入。特别是图片,如果太长时间不能加载的话,浏览器就会断开与服务器的链接,这是就需要在点击一下显示图片才能显示出来,比较好的支持外链的相册有picasa、flickr和国内的yupoo等。这样做不但能减轻服务器压力,节约流量,更重要的是,我不相信大部分站长用的服务器比那些专业的在线相册快。
6,提高图片传输并行程度
使用多个而不是一个域名访问图片
大多数浏览器中,对于同一域名下的并发HTTP请求数是有限制的,一般为几个。当页面中图片数量较多时,可以考虑分配不用的域名来访问。比如,原本的图片托管域名为image.fractal-technology.com,可以考虑增加几个子域名,如image-1.fractal-technology.com、image-2.fractal-technology.com等,将他们都CNAME到image.fractal-technology.com。然后在你的页面中,当需要访问图片时,随机分配所用的域名。
7,延迟加载图片
原理很简单,就是对于<img>标签,先不要写上它的资源地址src(因为只要写上了,浏览器加载到这个img标签,就会去下载src指向的图片资源),可以把它的资源地址先写在一个临时属性里,下面用到的一段js(相当于一个js小插件)中写在了一个属性originalSrc里(这个属性叫啥都可以的),然后给<img>标签们绑定事件,这个事件就是判断其是否出现在了浏览器的当前显示区域,如果出现了,就把originalSrc指示的资源地址写给<img>标签的src,src写入后浏览器就会去下载图片资源,如此就实现了图片的延迟加载。










电子外贸行业网站制作案例 Gainshine Technology 网站首页制作效果图
电子外贸行业网站制作案例 Gainshine Technology 网站首页制作效果图
网站建设最新资讯推荐
建站视频
工商财务行业网站制作如何才能排名靠前
快速导航
首页
建站套餐
模板案例
建站方案
制作费用
视频中心
常见问题
联系我们
企业网站制作套餐
基本型网站制作套餐
标准型网站制作套餐
品牌型网站制作套餐
综合型网站制作套餐
企业网站制作教程
网站建设常见问题
网站制作常见问题
网站设计常见问题
网站优化常见问题
企业邮箱常见问题
网站备案常见问题
联系方式
联系人:赵经理
电话:0755-61603557
邮箱:info@fantodo.com
手机:13714247375
地址:广东.深圳宝安西乡宝源路鸿源大厦1009
网站建设公司联系人二维码
微信扫码咨询
深圳市易捷网络科技有限公司版权所有