欢迎进入北大青鸟(广州网耀)全国IT职业教育示范中心

学历不是敲门砖,技术才是硬道理

咨询热线:4006-1122-06

网页设计-图片优化技巧

发布时间: 2016-03-01 15:15:58   作者:本站编辑   来源: 本站原创   浏览次数:

在网页设计过程中,经常需要处理网站性能和美观如何平衡的问题,随着如今网页设计越来越漂亮绚丽,不可避免地在实现的过程中需要用到大量的图片,而图片的体积往往会影响页面的加载速度,因此作为一名网页设计师,必须时刻注意图片的大小,使你的网页加载越快越好。

 

1. 将图片保存成Web所用格式

在网页设计中,输出图像的大小是越小越好。因此完如何平衡图片的质量与文件大小是个重要的技能。

新手容易犯的一个错误是直接“另存为”图片,而不是使用“存储为Web所用格式”。

“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式,包括图像质量、图像分辨率、浏览器兼容性和文件大小。

这一命令会有一个对话框,你可以用来微调你的图像。当你调整图像的设置时,它会显示出文件的大小和图像的质量。

相比之下,“另存为”虽然可以选择压缩等级,但往往会输出体积较大的图像。

 

2. 尝试使用Web安全色

Web安全色在大多数浏览器和显示器上都能够正确显示,这确保了你的网页无论在哪里看起来都有相同的效果。

在拾色器窗口的左下角勾选“只有Web颜色”选项。这将使窗口只显示出Web安全色。

将颜色转换为Web安全色

在拾色器窗口中点击小方块,可以将任何颜色转换成Web安全色。

 

3. 使用JPG “逐行扫描”选项

JPG格式是摄影和高分辨率图像的理想选择。根据目标受众,逐行扫描有时候是个不错的选择。在网站加载时,这种格式的图像会逐渐呈现。这使用户在图像完全加载之前便可快速预览到,令人感觉网页反应更快。

 

4. 请注意“下载时间”这一信息

确保一个站点快速加载并且看上去很漂亮,这是非常重要的。这也体现了保存和优化图片的重要性。

比较好的方法就是:降低图像质量,直到你发现图像显示质量明显降低。

当你在优化图像时,要时刻关注“下载时间”,这将会显示在“存储为Web所用格式”对话窗口的左下角。

 

广州北大青鸟目前开设有前端课程,系统学习html+css+javaScript,适合零基础人群学习。

想了解更多关于前端开发的知识,请关注我们北大青鸟天河网耀校区(公众号:bdqngz),随时为您推送。想了解关于前端培训课程内容,可与我们在线专业老师咨询。

 

分享到:
我来说两句
评论内容:
验  证  码:
 
(网友评论仅供其表达个人看法,并不表明本站同意其观点或证实其描述。)
评论列表
已有 0 条评论(查看更多评论)