易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

分享!网页设计中图片格式选择技巧

来源:网站建设行业资讯网
添加时间:2022-01-17

深圳网站设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让深圳网站设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小,节省下载时间、有效的减少服务器的负担。
以深圳网站设计师较常用的Photoshop以及Illustrator为例,都提供了「储存为网页用…」的功能。与默认的存盘模式不同,在这个模式中,软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项:

相信许多人都知道深圳网站设计中较常用的格式不外乎JPG、GIF、PNG等格式,但并非所有的人都知道他们之前的实际差别跟到底何时该选择何种格式。经常发生的情况是,选择GIF后的输出结果看起来变得很糟,于是PNG(24)似乎突然间风行了起来,不论图档尺寸是不是因此多了好几倍。

JPEG:
由于旧型计算机系统以及文件系统的限制,计算机档案文件名与扩展名被规定为8.3的格式,因此JPEG的附档名被缩写为.JPG。JPEG可以说是人们较熟悉的图档格式了,相信在数字相机普及的现在,几乎每台数字相机、照相手机都可以(甚至只能)输出JPEG格式的图档。JPEG是一种很典型的使用破坏性压缩(lossycompression)的图档格式,也就是说使用者每次进行JPEG的存档动作后,图档的内容都会遭到破坏,这个特性在肉眼辨识下并不明显,但却可以有效的降0图档的档案大小。
就如这些使用JPEG的设备一样,JPEG非常适合作为储存像素色彩丰富的图片、例如照片等等,这些图片即使有些微的失真也不容易轻易的察觉:而反过来说JPEG并不适合用来储存线条图、图标或文字等等有清晰边缘的图片
多次重复进行JPEG的图档的储存将会有效性地破坏图片中的细节。

GIF:
Gif在许多特性与表现上都与JPEG有着相对的特性。GIF使用无损压缩格式(LosslessCompression),但却限制了色彩表现能力、能够有效地节省档案尺寸。GIF只拥有8位的颜色深度信息,所谓的8位是指2的8次方也就是256色,当你的图片中出现的色彩在256色以内时,使用GIF可以得到相当好的输出质量、同时兼顾了档案大小。因此GIF非常适合用来表现图标、UI接口、线条插画、文字等部分的输出。另外GIF同时还支持透明背景、以及动画图档格式,并且几乎不用担心支持性的问题:几乎100%的浏览器都支持它。由于JPEG与GIF有着如此不同的特性,因此我们可以很轻易的选择何时该用哪一种格式来输出我们需要的图档。

当图片拥有丰富的色彩时,并且没有明显锐利反差的边缘线条时,选择JPEG可以得到较好的输出结果,像是照片就是较好的例子:

(左图:Photoshop输出JPEG默认值:品质:高,压缩质量60%、优化输出。右图:Photoshop输出GIF默认值:256色、扩散性混色)

当图片是拥有明确边缘的线条图、没有使用太多色彩、甚至可能需要透明背景时,GIF是很好的选择,档案小、画质又精美。

(上图:Photoshop输出GIF:64色、扩散性混色。下图:Photoshop输出JPEG默认值:品质:高,压缩质量60%、优化输出)

PNG:
PNG较初的开发目的是为了作为GIF的替代方案的,作为做新开发的影像传输文件格式,PNG同样使用了无损压缩格式,事实上PNG的开发就是因为GIF所使用的无损压缩格式专利问题而诞生的。
PNG分为PNG-8以及PNG-24两种格式,PNG-8的特性很接近GIF,支持256色以及透明背景的特性。而PNG-24则支持了多达160万个色彩。

虽然PNG不支持动画,但是PNG-24支持了Alpha透明效果,这可以说是PNG-24较令人眼睛一亮的地方了。也就是说使用PNG输出图档时,可以有效的支持不同的透明度效果了。这对网页设计师来说无疑是一个好消息,像这张图片其实是使用了三张PNG-24的图片在网页中排版出来的效果:

在大部分的情况下,深圳网站设计师必须根据图片需求来选择不同的图档格式,并且对其做适当的调整。虽然PNG-24看起来很好,但是相应的当然就是档案大小的增加。另外还有就是浏览器支持度的问题,虽然现在几乎大部分的浏览器都支持了PNG-24格式,但不幸的是IE6是不支持透明PNG图档的,现在依然有相当的使用者在使用IE6或更早的版本,虽然比例会越来越少,但是设计师多少必须将其考虑其内,是否考虑使用GIF替代,或是在程序端透过script的方式来支持透明PNG格式。

网站建设计最新案例赏析:


江苏天兴环保股份网站制作首页设计效果图
江苏天兴环保股份
广州波士特实验室设备网站制作首页设计效果图
广州波士特实验室设备
广州捷伦达实验室设备网站制作首页设计效果图
广州捷伦达实验室设备
西斯科戈雅企业形象设计网站制作首页设计效果图
西斯科戈雅企业形象设计
江苏小太阳机械科技网站制作首页设计效果图
江苏小太阳机械科技
欧马腾会展科技网站制作首页设计效果图
欧马腾会展科技
千瑞文化信息有限公司网站制作首页设计效果图
千瑞文化信息有限公司
山东博纳电气网站制作首页设计效果图
山东博纳电气
河南赛唯家具网站制作首页设计效果图
河南赛唯家具
东莞索诚电子网站制作首页设计效果图
东莞索诚电子
 

网站建设行业资讯推荐阅读:


个人网站如何备案啊网站改版原来网站的数据百度还能搜索到吗国际域名.COM的优势及相关知识如何在谷歌Analytics(分析)来跟踪4低4错误2低13年网站推广SEO技巧移动端设计布局和适用场景是怎么样的非营利性网站设计的关键要素网页设计制作的时候如何确保表单的可浏览性呢深圳网站建设步骤现在比较流行的网站设计风格是什么深圳网站建设之网站在什么情况下需要改版常见的网站遭攻击方式和解决方案网站关键词优化排名要如何稳定深圳网站建设中网站设计版面布局的平衡性企业的网站建设需要那些基本功能网站建设公司如何才能更加专业深圳专业网站设计公司,政府网站建设存在这哪些问题如何把握网站建设不同时期文章的原创深圳网站建设提高用户体验(中)企业网站建设应注意常见的问题如何在网站建设中做到成功引流深圳福田企业网站设计,如何设计网站来提高网站的竞争力呢为您分享,高端网站制作技巧深圳门户网站制作与普通网站制作差异在哪里深圳福田网站制作需要多少钱,大型网站制作要如何进行深圳网站建设公司的生存与发展和地域的关系网站建设对于企业的作用关于企业建站,企业应当如何定位移动端要怎么设计才能更好地提升用户的体验SEO告诉用户什么价值网页设计中网页分页导航优化细节分享教你如何选择模板建站和定制开发建设网站为什么要利用网络平台提升品牌价值网站文章优化技巧电子商务,品牌的命脉怎么为初创企业设计网站定制网站建设如何获得客户需要注意什么企业门户网站建设流程及门户网站的特点解析!创业公司如何建设大众化网站为何建设大众化官网微官网建设策划需要注意哪些问题科技告诉你网站建设备案如何顺利通过百度蜘蛛抓取不喜欢哪几类内容 有关网站设计提升的多个方法 巧用字体排版的先进网页设计(二) 很好的网站设计专业定制 深圳网站建设的优质基础需求 好口碑的网站设计制作公司专业定制 怎么用自然风光背景的网页设计 很好的网站设计制作公司定做 尽可能减少对象 服务专业的网站设计制作公司报价单 什么构成了一个网站设计要素 html页面设计联系电话 分享如何找出企业精准网络营销的突破口深圳网站建设不用怕,这些小技巧来帮你网站设计有哪些内容需要策划聊聊关于如何更新SEO优化思路移动端网站建设有哪些是需要注意的微信标题怎么写才能吸引人网站界面应该要如何设计深圳网站设计
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询