网站图片处理技巧
新闻 2024-9-20编辑:深圳网站建设阅读()标签:
网站图片处理技巧
网站建设公司在进行网站设计的时候,通常会【huì】对网站的图片进【jìn】行【háng】处理,但是很多【duō】程序加过之后图片【piàn】就变形【xíng】了【le】,所【suǒ】以,今【jīn】天小编【biān】就来为大【dà】家【jiā】分享下
网站图片处理技巧。
1、在网【wǎng】站设计之初【chū】,就先要【yào】做好规划。比如背景图片如【rú】何使用等等,做到心中有数。
2、编辑图片的时候,要【yào】做好【hǎo】裁【cái】剪【jiǎn】,只展示必要的、重要【yào】的、同内容相关的【de】部分。
3、在输出【chū】图【tú】片的时候,图片大【dà】小要设置妥当,长【zhǎng】宽像素就设成你【nǐ】所需要【yào】的大小,而不【bú】要输出大图片,然后【hòu】使用的【de】时候,再指【zhǐ】定较小的长宽,缩【suō】小图片。
4、尽量组合【hé】装饰性的图片【piàn】,以节省http请求数,在具【jù】体【tǐ】使用时,采【cǎi】用CSS sprite的方式。
5、页面上的边【biān】框,背景,尽可能的使用CSS的方式来【lái】展示【shì】,而不要【yào】用【yòng】图【tú】片。
6、图片使用上【shàng】,能用png格式的尽量【liàng】用,以【yǐ】替代过去常用的【de】gif和jpeg格式。在保证质量的情【qíng】况下【xià】,用最小的【de】文件【jiàn】。
7、在html中明确指定图片的大小。
8、若使用【yòng】photoshop的话,缩放图片通【tōng】常会【huì】让图【tú】像模【mó】糊【hú】,可以用【yòng】smart sharpen来让图片更为出色。
9、对于【yú】GIF和【hé】PNG文件格式,最小化颜色【sè】位数,可使文件更小。
10、对于GIF和【hé】PNG文件,最小化dithering,可使文件更小。
11、如果【guǒ】图【tú】片上要添加文字,可能的话,就不要把文字嵌【qiàn】入到图片中,而【ér】是采【cǎi】用【yòng】透【tòu】明【míng】背景图【tú】片或者CSS定位让文字覆盖在图【tú】片上【shàng】,既能获得相【xiàng】等的效【xiào】果,还能把【bǎ】图片更大程度的压缩。
12、在较小的GIF和PNG图片上,可以使用有损【sǔn】压缩【suō】。
13、可【kě】能【néng】的【de】话,使用局【jú】部压缩,保证前景清楚的基础上,较大【dà】程度的压缩【suō】背景【jǐng】。
14、图片在优化之前,若【ruò】能降噪的【de】话,可以获得【dé】额【é】外的20%多的压缩【suō】。
15、jpg图【tú】片也可以【yǐ】模糊背景,然后【hòu】压【yā】缩的时候【hòu】,可以压缩的更多。
16、网站中所有的【de】背【bèi】景图都放在一【yī】张图片上面,降【jiàng】低图【tú】片加载【zǎi】时长,提高【gāo】网站打开速【sù】度。
17、网【wǎng】站中的图片尽量【liàng】使用GIF格式【shì】的图片,以【yǐ】降低【dī】图片的体积大小。
18、网站中【zhōng】存在jpg的图片【piàn】,需要在储存【cún】jpg图【tú】片的时候,选用品质高、格式基线【xiàn】已【yǐ】优化模式。
19、网【wǎng】站中存在png的图片,如果png背景【jǐng】透明,应该加入防止IE6 png背景【jǐng】透明【míng】失效的JS代码。
20、网站中纯【chún】色【sè】的背景图【tú】片,应该使用CSS的方法控制,尽量减少图片的使【shǐ】用【yòng】。