AI
网站建设
AI
解决方案
案例
百科
我们
400-6446-365
服务
北京
上海
广州
成都
设计
智能
智慧博物馆
想得到的智慧博物馆新玩法,可能都在这里
智慧公园
听说,在智能公园中漫步才是最惬意的事
智慧社区
AI技术加持,社区系统真正互联互通
智慧医院
增强诊前服务、辅助诊中流程、优化诊后交流
AI
网站建设
网站建设
品牌官网建设
集团站群建设
行业门户网站建设
社区网站建设
业务系统定制开发
IT平台整体解决方案
电商网站建设
B2C网站建设
B2B网站建设
B2B2C网站建设
积分商城网站建设
众筹网站建设
移动端、融媒体
手机网站建设
微网站
APP开发
小程序开发
快应用开发
融媒体
网络运营
网站代运营服务
互动营销服务
微信微博运营服务
游戏营销服务
网络推广服务
搜索引擎推广服务
AI
解决方案
智慧博物馆解决方案
智慧公园解决方案
智慧医院解决方案
智慧学校解决方案
智慧党建解决方案
智慧社区解决方案
RPA解决方案
云展厅解决方案
案例
金融行业专题
医疗行业专题
地产行业专题
教育行业专题
博物馆专题
智慧公园专题
百科
网站建设
网络推广
运营维护
我们
媒体报道
加入分形
图像在网站建设中表现技巧
标签:
网站建设
网站设计
网页设计
移动端网站
2017-03-22
第一:
网页访问者往往没有耐心。你的图像可能很酷,但是如果她们对于快速下载来说太丰满,很少有人会坚持到最后以求一睹她们的尊容。幸运的是,
网页设计
者可以使用一些技巧和优化来加速图像和页面的下载。
第二:
不必要的就不要其实没有什么特别的技巧。做其它事之前,从你的页面中把所有多余的图像去掉。这里“多余”不是指你们公司的标志或你们办公室的地图。我们是指那个精明的、在“发邮件”旁边的动画信封。也许在你的页面底部还放着随处可见的NetscapeNavigator和Internet Explorer按钮。说实话,有多少人没听说过这些产品呢?
在网站中减少一个琐碎的10KB的图形文件可能对整个网站改进不大。但是如果你的整个页面才40KB,减少10KB就可以减少25%的下载时间-减少一个跳舞婴儿的按钮还是合算的。
如果你的网页确实需要削减,可以考虑用文本“提交”按钮代替图形“提交”按钮。用静态图形代替动态GIF图形可以减少下载时间。最后,一些神奇的“header”图形可以用<FONT SIZE>和<FONT FACE>标记代替。
第三:
GIF文件和JPEG文件除非你想得到
AR
CHIE或GOPHER一样的火箭速度,你总会用到一些图形。遵守一些创建图像的规则,你的页面下载的时间就会可行。
开始时,确定一个图像用GIF格式还是JPEG格式。这看起来很基本,但是还有一大部分网页犯这样的错误。
GIF用在看起来干脆整洁的小图形上是很完美的,但是不会超过256色。GIF也可存为“透明色”-允许图形有不规则的边界。简单的公司标志、小按钮和导航条是应用GIF图形格式的很好的例子。不象JPEG,GIF是一种无损失的压缩格式,所以你的图形不会变得模糊不清。如果你在扫描有详细细节的地图,应该选择GIF格式。不过,如果图片很大,GIF文件会很大,下载时间也会很长。
你不能从根本上压缩GIF文件,但是可以减少位深,即限制颜色数。给定位深的颜色数等于2的位深次幂(即,8位=256色)。颜色数越少,图像的字节数越少。假设你正在建一个可口可乐的网站,可以把很多标志的位深减少到3或4位(红、白,或许还需要这两种颜色的阴影色来使边界光滑)。可以用Debabelizer软件改变位深。
JPEG文件可以显示几千种颜色,而且压缩率比GIF文件高。它们很适合照片方式的图像。不过压缩成JPEG文件时会损失一些照片的细节。
第四:
合适的尺寸当你使用图形编辑器时,保证图形尺寸(72dpi)与将要在网页上显示的相同。在HTML中,用<IMAGE>标记的WIDTH和HEIGHT属性重述图像的实际尺寸。这可以使浏览器在图像下载时同时呈现页面的其余部分-于是人们在等待图像是有其它东西读-并且保证在“关闭图像”浏览时可以看到正确的页面布局。
如果在页面中使用表格,图像尺寸非常重要:因为没有定义尺寸的图像会迫使浏览器清除和重绘页面。这种情况发生在当浏览器按照<TABLE>和<TD>来建造表格,然后却发现表格单元中的图像没有尺寸参数却太大而不能放在表格中时。浏览器只得重绘表格来容纳如此笨拙的图像。效率低下的页面重绘浪费时间,而且用户看到不断消失和重绘的页面时也会不高兴。
使用WIDTH和HEIGHT时,最重要的是不要用它们调整页面图形的大小或形状。通过HTML调整大小是很差劲的,有两个原因。如果你放大图像,你会得到一幅有锯齿的图片。
用HTML使图像变小不是一直很坏,但在表现上很差。因为浏览器下载的数据比实际要显示的图像多,于是增加了下载时间。
第五:
缓存是你的朋友有一个使图像下载更快的重要技术。那些在网站中重复出现的图像-比如通用标志、页首或导航条-不必一遍一遍地下载。缺省地,Netscape和Internet Explorer在RAM或硬盘上设置缓存来存储最近用到的图像。如果浏览器认识是相同的文件名,它会读缓存,而不是从网上下载。这种方法大大地提高了效率,以至于很多自动记时程序无法识别-你只好用跑表自己测测了。
既然客户端的缓存如此有用,在设计网页时就应考虑到浏览器的缓存。例如,如果网站有大量相似的页首图形,应试图把它进行分割,使其中不变的部分能从缓存中立刻读出来。虽然在每页还要调用一个新图,因为这个图很小,所以下载很快。
TAG标签耗时:0.0018641948699951 秒
010-64928252/400-6446-365
我现在就想找顾问聊聊
上一篇文章:网站建设中的目录结构与链接结构
下一篇文章:静态网页与动态的区别
相关资讯
智慧赋能三峡博物馆,畅享科技魅力
北京网站建站教您如何让“头回客”变为“回头客”
福州平潭首家互联网医院获批上线——"互联网+医疗健康"迈上新台阶
如何选择学校网站建设公司?
移动优先原则下如何提高网站速度
查看更多
社区网站
网站建设
erp系统
crm系统
积分商城
网页设计
新能源
微商城
国企
食品
APP
微网站
海华集团
石油化工
网站建设
网页设计
长安客车
汽车行业
网站建设
网页设计
厦门特房波特曼七星湾酒店
餐饮酒店
网站建设
网页设计
同方计算机
电信通讯
网站建设
网站设计
中科雁栖湖
机构组织
网站建设
定制开发
系统开发
网联清算
金融保险
网站建设
定制开发
更多网站案例
更多解决方案
让决策变的简单
好的开始是成功的一半
立即体验服务
免费电话
在线咨询
官方微信
招聘
您需要 AI+互联网
顾问提供专业咨询
残忍拒绝
立即咨询
AI人工智能 · VR · AR · 智慧博物馆 · 智慧公园 · 景区 · 文创 · 动画
高端网站建设 · 小程序 · APP · 微信 · H5 · 游戏 · 电商 · 年度运营
招聘