在網頁設計處理圖片時,需要考慮到圖片的失真問題,網頁中JPG格式的圖片與GIF格式圖片的失真原理是不同的。網頁中圖片的不正確比例設置也可能造成圖片的失真。

1、網頁中的圖片失真問題

網頁中最常用的兩種圖片格式是JPG格式與GIF格式。在網頁中使用的圖片,常常需要圖片質量的設置。JPG與GIF兩種格式的圖片質量設置的方法是不同的JPG圖片的失真。在JPG格式中,一般是設置圖片的保存質量,這個參數用百分比來表示。圖片的保存質量越高圖片的文件越大,圖片越清晰。

每一張圖片分別在100%、80%、60%、10%等4種不同的圖片質量優化時的效果。當圖片的保存質量過低時,圖片的細節部分就無法正常顯示,圖片就會在清晰度方面產生嚴重的失真。

2、GIF圖片的優化

GIF格式的優化是按照圖片的保存顏色來計算的。一張GIF圖片,保存的顏色數量越多,則圖片越清晰,圖片文件越大。一張GIF圖片,分別在256色、128色、16色、4色的不同顏色設置時的預覽效果。GIF圖片在過低的顏色數目下保存時,會在圖片顏色的方面產生很大的失真,但是圖片的清晰度改變并不是十分明顯。

3、網頁中的顯示圖片大小與實際圖片大小的問題

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

圖片過分放大時,導致圖片效果失真。在 Dreamweaver中設置圖片大小時,如果把一張小圖片的大小設置得很大,在顯示這張圖片時,圖片就會失真。正確的做法是,采用高清晰度的圖片,再合理設置圖片的大。圖片過分縮小時,大圖片會使圖片顯示失真和文件下載緩慢。在處理大圖片時, Dreamweaver可以設置圖片的寬度和高度,但這只是設置圖片的顯示大小,并沒有更改原有的圖片文件大圖片在縮小顯示時,也會產生失真,并且大圖片的文件可能很大,在打開網頁時速度會很慢。數碼相機拍攝的圖片文件一般都很大。

網頁中需要插入這樣的大圖片時,可以用圖片處理軟件對圖片進行壓縮,例如圖11-10所示的方法,可以對大圖片進行大小設置;另一種方法是用 Fireworks設置圖片大小來壓縮圖片。用 Fireworks打開圖片,選擇“修改”|“畫布圖像大小”命令,即可對圖片大小進行設置,如圖11-39所示。在 Photoshop中也可以設置與壓縮圖片的大小,方法與此相似。

網頁設計時,不僅要制作出符合內容要求的網頁,也要考慮到網頁的效果與網頁瀏覽時的性能在網頁設計中,需要注意網頁中的圖片效果與文件大小的問題。在網頁制作中,需要對網頁中的圖片進行優化與設置。本章講述了 Dreamweaver的圖片優化設置問題,用 Dreamweaver的圖片優化設置功能可以大大簡化 Fireworks中的圖片處理工作。

新聞標題：網頁設計中的圖片失真問題解決辦法
網站鏈接：http://www.js-pz168.com/news10/222260.html

成都網站建設公司_創新互聯，為您提供虛擬主機、微信公眾號、網站制作、App設計、品牌網站建設、企業網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯