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

来源:设计经验分享网
添加时间:2024年02月
摘要:

深圳网站设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让深圳网站设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小,节省下载时间、有效的减少服务器的负担。
以深圳网站设计师较常用的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格式。

 

平面设计相关资讯推荐阅读:


广州网页建设的目的是什么手机网页界面设计的方法网页设计软件一般有哪些类型外国、港澳台企业可注册CN域名吗怎样注册域名这种事宜要了解网页设计色彩风格的搭配原则营销型网页建设应该注意哪些问题深圳网页建设中必须重视网页*页布局人们在企业网页中实际寻找的内容深圳企业网页建设的战略意义是什么为什么企业都喜欢使用定制网页和小程序他们的优势在哪里可靠的网页设计制作包含哪些内容旅游业网页建设方案公司的外贸网页建设应考虑什么因素微信小程序的方便之处期权软件定制开发都有什么注意事项什么构成了网页设计网页制作中样式规划怎么做为什么不可一世的人人为何沦为“看客”来看!网页建设如何才能让页面高大上完成网页建设后有五点规整的工作做旅游网页建设意义和重要性!现代企业为什么要建网页有哪些好处如何建设一个高端大气的企业网页网页制作的主要部分介绍如何做推广网页,网页推广有哪些好方法易捷网络讲解网页建设和优化方法什么个人网页设计模板较为新奇关键词排名高是否归功于网页优化推广好公司网页建设需要考虑同行建站模板吗网页建设如何做才可以给客户带来信任感网页建设初期需要注意的细节深圳福田企业网页建设方案,网页建设步骤是什么浅谈建立网页要多少钱才算不冤枉分析企业网页对用户的潜在吸引力的增强技巧科技-定制网页建设以什么优势来吸引搜索引擎蜘蛛营销型网页建设的执行步骤软件定制开发差别大了解清楚再决定!网页设计完成后排版步骤深圳网页建设告诉你如何正确处理网络公司与客户间的关系网页页面布局技巧让效果达到最佳P2P市场规模扩大,未来收益率趋势如何定制软件开发的公司哪家好,谁能给推荐一下静态网页与动态网页的特点网上怎样才能找到优秀的网页设计 高端网页设计选哪家永不过时!布局独特的单色网页浅谈企业营销网页建设的特点4G网络建设挤压宽带网络建设FTTH如何发展 建站时不可忽视的网页结构细节官网对公司的影响响应式网页建设:手机商城建设网页的意义和价值Flash网页建设需要注意哪些事项网页跳出率高的原因分析与SEO优化的建议深圳网页建设公司哪家好如何制作一个优秀的外贸网页建设网页建设中网页排名没有变化时,要注意哪些内容如何做网页推广超过好的实际效果以下内容要高度重视2021年深圳网页建设的避坑攻略!网页设计在公司的3个重要原因
网站备案号:豫ICP备2024041165号