在網(wǎng)頁(yè)設(shè)計(jì)處理圖片時(shí),需要考慮到圖片的失真問(wèn)題,網(wǎng)頁(yè)中JPG格式的圖片與GIF格式圖片的失真原理是不同的。網(wǎng)頁(yè)中圖片的不正確比例設(shè)置也可能造成圖片的失真。

1、網(wǎng)頁(yè)中的圖片失真問(wèn)題

網(wǎng)頁(yè)中最常用的兩種圖片格式是JPG格式與GIF格式。在網(wǎng)頁(yè)中使用的圖片,常常需要圖片質(zhì)量的設(shè)置。JPG與GIF兩種格式的圖片質(zhì)量設(shè)置的方法是不同的JPG圖片的失真。在JPG格式中,一般是設(shè)置圖片的保存質(zhì)量,這個(gè)參數(shù)用百分比來(lái)表示。圖片的保存質(zhì)量越高圖片的文件越大,圖片越清晰。

每一張圖片分別在100%、80%、60%、10%等4種不同的圖片質(zhì)量?jī)?yōu)化時(shí)的效果。當(dāng)圖片的保存質(zhì)量過(guò)低時(shí),圖片的細(xì)節(jié)部分就無(wú)法正常顯示,圖片就會(huì)在清晰度方面產(chǎn)生嚴(yán)重的失真。

2、GIF圖片的優(yōu)化

GIF格式的優(yōu)化是按照?qǐng)D片的保存顏色來(lái)計(jì)算的。一張GIF圖片,保存的顏色數(shù)量越多,則圖片越清晰,圖片文件越大。一張GIF圖片,分別在256色、128色、16色、4色的不同顏色設(shè)置時(shí)的預(yù)覽效果。GIF圖片在過(guò)低的顏色數(shù)目下保存時(shí),會(huì)在圖片顏色的方面產(chǎn)生很大的失真,但是圖片的清晰度改變并不是十分明顯。

3、網(wǎng)頁(yè)中的顯示圖片大小與實(shí)際圖片大小的問(wèn)題

在Dreamweaver中插入圖片時(shí),可以設(shè)置圖片的大小。但在插入圖片時(shí),圖片大小的設(shè)置會(huì)使圖片產(chǎn)生一些失真。因此在Dreamweaver中插入圖片時(shí)要注意以下問(wèn)題。圖片設(shè)置的比例要合適,否則會(huì)在圖片的比例方面產(chǎn)生嚴(yán)重的失真,特別是在插入人像時(shí)例失真會(huì)嚴(yán)重影響圖片的效果。網(wǎng)頁(yè)中的圖片就產(chǎn)生了嚴(yán)重的比例失真。正確的做法是,在設(shè)置圖片大小時(shí),要根據(jù)原圖的比例大小進(jìn)行圖片大小的計(jì)算。

圖片過(guò)分放大時(shí),導(dǎo)致圖片效果失真。在 Dreamweaver中設(shè)置圖片大小時(shí),如果把一張小圖片的大小設(shè)置得很大,在顯示這張圖片時(shí),圖片就會(huì)失真。正確的做法是,采用高清晰度的圖片,再合理設(shè)置圖片的大。圖片過(guò)分縮小時(shí),大圖片會(huì)使圖片顯示失真和文件下載緩慢。在處理大圖片時(shí), Dreamweaver可以設(shè)置圖片的寬度和高度,但這只是設(shè)置圖片的顯示大小,并沒(méi)有更改原有的圖片文件大圖片在縮小顯示時(shí),也會(huì)產(chǎn)生失真,并且大圖片的文件可能很大,在打開(kāi)網(wǎng)頁(yè)時(shí)速度會(huì)很慢。數(shù)碼相機(jī)拍攝的圖片文件一般都很大。

網(wǎng)頁(yè)中需要插入這樣的大圖片時(shí),可以用圖片處理軟件對(duì)圖片進(jìn)行壓縮,例如圖11-10所示的方法,可以對(duì)大圖片進(jìn)行大小設(shè)置;另一種方法是用 Fireworks設(shè)置圖片大小來(lái)壓縮圖片。用 Fireworks打開(kāi)圖片,選擇“修改”|“畫布圖像大小”命令,即可對(duì)圖片大小進(jìn)行設(shè)置,如圖11-39所示。在 Photoshop中也可以設(shè)置與壓縮圖片的大小,方法與此相似。

網(wǎng)頁(yè)設(shè)計(jì)時(shí),不僅要制作出符合內(nèi)容要求的網(wǎng)頁(yè),也要考慮到網(wǎng)頁(yè)的效果與網(wǎng)頁(yè)瀏覽時(shí)的性能在網(wǎng)頁(yè)設(shè)計(jì)中,需要注意網(wǎng)頁(yè)中的圖片效果與文件大小的問(wèn)題。在網(wǎng)頁(yè)制作中,需要對(duì)網(wǎng)頁(yè)中的圖片進(jìn)行優(yōu)化與設(shè)置。本章講述了 Dreamweaver的圖片優(yōu)化設(shè)置問(wèn)題,用 Dreamweaver的圖片優(yōu)化設(shè)置功能可以大大簡(jiǎn)化 Fireworks中的圖片處理工作。

本文名稱：網(wǎng)頁(yè)設(shè)計(jì)中的圖片失真問(wèn)題解決辦法
文章來(lái)源：http://chinadenli.net/news/222260.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、動(dòng)態(tài)網(wǎng)站、Google、用戶體驗(yàn)、小程序開(kāi)發(fā)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)