網(wǎng)頁設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用

莊麗君

摘? ?要：文章主要以圖像處理技術(shù)為出發(fā)點(diǎn)，分析常見處理技術(shù)如增強(qiáng)處理、去噪處理及壓縮處理，并以此為基礎(chǔ)，通過圖像格式選擇、網(wǎng)頁風(fēng)格設(shè)計(jì)、網(wǎng)頁標(biāo)識(shí)設(shè)計(jì)、其他網(wǎng)頁設(shè)計(jì)等，探究網(wǎng)頁設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用措施，以期為相關(guān)工作者提供參考。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì);計(jì)算機(jī);圖像處理;應(yīng)用

隨著科技的不斷發(fā)展，圖像處理技術(shù)愈發(fā)完善，并被廣泛應(yīng)用于各行各業(yè)中。目前，網(wǎng)頁設(shè)計(jì)最具時(shí)代特色，包含眾多圖像處理內(nèi)容，如何將圖像處理技術(shù)正確應(yīng)用到網(wǎng)絡(luò)設(shè)計(jì)中，并將兩者完美融合，呈現(xiàn)精美圖像吸引更多消費(fèi)者目光，調(diào)動(dòng)人們積極性，已經(jīng)成為現(xiàn)階段的研究熱點(diǎn)[1]。因此，相關(guān)工作者應(yīng)當(dāng)重視網(wǎng)頁設(shè)計(jì)中圖像處理技術(shù)的應(yīng)用，讓網(wǎng)頁設(shè)計(jì)更具美感及藝術(shù)感，促進(jìn)整體效果的提高。

1? ? 圖像處理技術(shù)概述

計(jì)算機(jī)圖像處理主要是加工、分析、處理圖像，讓其能夠滿足人們心理及視覺方面要求的技術(shù)。圖像處理作為圖像中信號(hào)處理的應(yīng)用之一，通常以數(shù)字形式存儲(chǔ)，處理內(nèi)容包含調(diào)整大小、色彩、亮度，優(yōu)化圖片，文字編排，保存及輸出圖片等，主要有以下技術(shù)。

1.1? 增強(qiáng)處理

圖像增強(qiáng)處理主要在于“淡化瑕疵、突出重點(diǎn)”，此部分的圖像處理包含圖像變換、添加濾鏡、銳化、剪切等，借助有關(guān)軟件處理可增強(qiáng)計(jì)算機(jī)圖像的某種特性，達(dá)到處理意義。以處理技術(shù)視角而言，最佳方式是對(duì)圖像色彩及清晰度的調(diào)整[2]。可借鑒偽色彩處理技術(shù)，將傳統(tǒng)的黑白失真像片轉(zhuǎn)變?yōu)椴噬?，并利用銳化的手段，通過濾波處理及差分運(yùn)算處理，讓圖片結(jié)合深度更加“清晰、尖銳”。此種增強(qiáng)技術(shù)可與視覺光學(xué)效應(yīng)相結(jié)合，為生活中普通圖片添加更多色彩，屬于常見計(jì)算機(jī)圖像處理技術(shù)的一種。

1.2? 去噪處理

圖像制作過程中常見“量化噪點(diǎn)”“高斯噪點(diǎn)”等情況，與原信號(hào)輸入圖像并無過多聯(lián)系，通常是內(nèi)部器件造成的影響，與軟件量化處理效果相關(guān)。成像質(zhì)量對(duì)于觀賞舒適度具有嚴(yán)重影響，無法正確展現(xiàn)圖片價(jià)值。因此，應(yīng)當(dāng)使用圖像去噪技術(shù)，使用“中值濾波”或“均值濾波”的方式，以一定灰度值為依據(jù)排列圖片的像素信號(hào)，分析噪點(diǎn)或中間值的強(qiáng)度，插入相應(yīng)中間值或模糊值，達(dá)到降噪效果。

1.3? 壓縮處理

計(jì)算機(jī)圖像處理技術(shù)中，圖像壓縮液位常見技術(shù)之一，主要是依據(jù)壓縮圖像數(shù)據(jù)，實(shí)現(xiàn)圖像的傳遞，可最大限度地降低圖像失真率。以運(yùn)行效果視角而言，可實(shí)現(xiàn)有損或無損的圖像壓縮，由于壓縮內(nèi)容與時(shí)間存在差異性，運(yùn)算時(shí)可通過“圖像交換”的方式進(jìn)行處理。

2? ? 計(jì)算機(jī)圖像處理技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用

2.1? 圖像格式選擇

網(wǎng)頁設(shè)計(jì)中圖像格式眾多，應(yīng)當(dāng)依據(jù)不同要求選擇相應(yīng)的圖片格式，展現(xiàn)不同網(wǎng)頁設(shè)計(jì)效果。通常情況下，圖像主要包含PNG格式、GIF格式、JPEG格式。

（1）PNG格式，屬于無損壓縮，具有較好的透明度。無色彩圖像可實(shí)現(xiàn)16位存儲(chǔ)，有色彩圖像可實(shí)現(xiàn)48位存儲(chǔ)。盡管PNG格式為無損壓縮，但此過程中仍然會(huì)讓圖片產(chǎn)生變化，圖像顏色越多，則損壞程度越高，需要慎重選擇。

（2）GIF格式，簡單而言，屬于圖形位置變換，同樣為無損壓縮存儲(chǔ)，可實(shí)現(xiàn)動(dòng)畫圖像的制作，有效滿足人們對(duì)于多圖像的觀賞需求。但是GIF格式存儲(chǔ)對(duì)于色彩圖像具有限制性，圖像中若是含有大量色彩則無法使用。隨著互聯(lián)網(wǎng)發(fā)展，網(wǎng)頁瀏覽中GIF格式對(duì)于瀏覽器并無較高要求，已成為常見圖像格式。

（3）JPEG格式，為圖像壓縮格式，屬于有損壓縮，壓縮時(shí)可承載色彩20多種，此種壓縮技術(shù)較為先進(jìn)，不僅可對(duì)圖像進(jìn)行調(diào)節(jié)，還能壓縮圖像比例。壓縮越小，則圖像質(zhì)量隨之增高;比例越大，則圖像質(zhì)量隨之降低。另外，壓縮中圖形色彩并不會(huì)產(chǎn)生變化，適合色彩較為豐富的圖像存儲(chǔ)[3]。但是此格式不適合文字清晰、線條圖片的存儲(chǔ)。

設(shè)計(jì)時(shí)應(yīng)當(dāng)以網(wǎng)頁設(shè)計(jì)需求為依據(jù)，選擇合適圖片格式。若圖像色彩較多，線條無反差，則使用JPEG格式;圖像線條邊緣明顯，色彩較少，且需要透明背景，則選擇PNG格式;網(wǎng)頁若考慮瀏覽器支持問題，則選用GIF格式。

2.2? 網(wǎng)頁風(fēng)格設(shè)計(jì)

網(wǎng)頁設(shè)計(jì)中圖片具有重要作用，且不同地方圖片的規(guī)模、職責(zé)都不同，實(shí)際不同網(wǎng)頁設(shè)計(jì)風(fēng)格對(duì)于圖像要求不同。主要體現(xiàn)在以下幾個(gè)方面。

2.2.1? 圖像風(fēng)格

設(shè)計(jì)人員可利用圖像處理技術(shù)，對(duì)網(wǎng)絡(luò)圖片進(jìn)行“修圖”處理，仔細(xì)斟酌網(wǎng)絡(luò)結(jié)構(gòu)與排版[4]。如網(wǎng)頁設(shè)計(jì)以真實(shí)為風(fēng)格，則圖片應(yīng)當(dāng)以真實(shí)體現(xiàn)為主，若是網(wǎng)頁以浪漫為其風(fēng)格，則應(yīng)當(dāng)加強(qiáng)對(duì)圖片的渲染;受眾是漫畫愛好者，可拼接動(dòng)漫人物的圖片;中國風(fēng)，則應(yīng)當(dāng)朱紅色彩搭配及內(nèi)部結(jié)構(gòu)，可選擇具有山水、水墨特點(diǎn)的畫面拼接處理。網(wǎng)頁設(shè)計(jì)人員應(yīng)當(dāng)以不同網(wǎng)頁風(fēng)格為依據(jù)，選擇相應(yīng)的圖片，為網(wǎng)頁設(shè)計(jì)增添光彩。

2.2.2? 圖像尺寸

網(wǎng)頁設(shè)計(jì)中圖像布局具有十分重要的作用，應(yīng)當(dāng)對(duì)圖像尺寸進(jìn)行充分考慮，依據(jù)網(wǎng)頁特點(diǎn)設(shè)計(jì)不同的圖像尺寸，以此吸引更多潛在客戶。如大尺寸圖像可涵蓋較多內(nèi)容，表達(dá)內(nèi)容豐富、直觀，可讓網(wǎng)站用戶在第一時(shí)間被大尺寸圖像吸引，了解網(wǎng)站內(nèi)容;而小尺寸圖像則個(gè)性化較強(qiáng)，可對(duì)整體網(wǎng)頁內(nèi)容進(jìn)行襯托。網(wǎng)頁設(shè)計(jì)中若是并未有效結(jié)合圖像與文字，則展示網(wǎng)頁主題時(shí)，應(yīng)當(dāng)配置合理的主副標(biāo)題，對(duì)主標(biāo)題重點(diǎn)突出，以此吸引相關(guān)用戶的注意力。

2.2.3? 圖像形狀

現(xiàn)代化網(wǎng)頁的設(shè)計(jì)中，圖像設(shè)計(jì)方案眾多，圖形不同類型存在圖像特點(diǎn)的差異。如，平面圖形將會(huì)讓人們感到更加親切;不規(guī)則圖形則給人以活潑、充滿活力的感覺;方形中規(guī)中矩。所以，圖形的選擇應(yīng)當(dāng)依據(jù)網(wǎng)頁主題而定。其中，生活中較為常見的是方形圖像，由于方形圖案具有較強(qiáng)的威嚴(yán)感，更易得到使用者信任，不會(huì)對(duì)網(wǎng)站信息質(zhì)量產(chǎn)生懷疑，且方形圖案穩(wěn)重，可引導(dǎo)使用者進(jìn)行思考，充分反映了整體網(wǎng)頁的風(fēng)格特點(diǎn)，主要將其應(yīng)用于官方網(wǎng)站之中。圓形圖案線條柔和，具有充實(shí)感、自由感，圓形圖案的應(yīng)用能讓使用者情緒更加放松。

2.3? 網(wǎng)頁標(biāo)識(shí)設(shè)計(jì)

無論何種網(wǎng)站，在成立之初都存在其目的性，整體網(wǎng)頁中，網(wǎng)站LOGO、關(guān)鍵圖、背景圖等對(duì)于網(wǎng)站個(gè)性化設(shè)計(jì)具有重要影響。

（1）網(wǎng)頁LOGO，對(duì)于網(wǎng)站瀏覽率及點(diǎn)擊率具有決定作用。一般情況下，LOGO展現(xiàn)的是品牌形象及知名度。如Sina為新浪LOGO，人們一旦看到上述字母，即便并未看到新浪網(wǎng)的名字，也會(huì)了解Sina表示新浪。LOGO則是設(shè)計(jì)時(shí)依據(jù)企業(yè)特點(diǎn)與理念所設(shè)計(jì)的，不僅是簡單的字母組合，其中應(yīng)用圖像處理技術(shù)，以白色為底，字母i的點(diǎn)通過表象性手法處理，讓其成為一只眼睛，整體字母i好似一個(gè)小火炬，充分表達(dá)了“世界在你眼中”的形象理念，具有獨(dú)特的藝術(shù)性與功能性，激發(fā)了人們對(duì)網(wǎng)絡(luò)世界的探索欲，更易記住新浪網(wǎng)域名。一個(gè)好的LOGO能夠讓用戶產(chǎn)生好感，吸引其注意力[5]。

（2）網(wǎng)頁關(guān)鍵圖。在日常生活中，可了解網(wǎng)頁通常使用醒目標(biāo)題，不僅可將網(wǎng)站點(diǎn)擊率提高，還能推動(dòng)網(wǎng)站的完善與發(fā)展。網(wǎng)頁中也應(yīng)當(dāng)插入關(guān)鍵圖，以便用戶能夠通過關(guān)鍵圖加深對(duì)網(wǎng)站的了解，關(guān)鍵圖的作用是統(tǒng)領(lǐng)全局，即便并無文字襯托，也能讓圖像將網(wǎng)頁內(nèi)容表達(dá)出來，全面了解網(wǎng)頁內(nèi)涵。

（3）網(wǎng)頁背景圖。網(wǎng)站若是想要強(qiáng)化自身特點(diǎn)，則應(yīng)當(dāng)在網(wǎng)頁設(shè)計(jì)過程中以有意義、內(nèi)涵的圖像作為其背景圖，設(shè)計(jì)人員還可以使用較小的線形圖、超圖等，修改頁面背景，達(dá)到襯托網(wǎng)頁文字、凸顯網(wǎng)頁主題、吸引更多客戶的注意力的目的，推動(dòng)網(wǎng)站的進(jìn)一步發(fā)展。

2.4? 其他網(wǎng)頁設(shè)計(jì)

（1）圖片切換。鼠標(biāo)移動(dòng)后觸發(fā)圖像，將鼠標(biāo)焦點(diǎn)置于網(wǎng)頁圖片之上，顯示多種圖片，此時(shí)將圖片恢復(fù)為最初顯示圖片，為實(shí)現(xiàn)圖片的切換，可添加鼠標(biāo)移動(dòng)功能，有效完成函數(shù)圖像化。但是應(yīng)當(dāng)注意事前準(zhǔn)備好切換的兩張圖片，保證大小一致。

（2）制作相冊。網(wǎng)頁中制作相冊，如目前熱門的博客，設(shè)定圖片時(shí)，為達(dá)到有序切換，可調(diào)出相應(yīng)大圖，圖片顯示后依據(jù)設(shè)定程序代碼切換圖片，可使用FireWorks技術(shù)進(jìn)行處理。

（3）攝影圖片。在網(wǎng)絡(luò)設(shè)計(jì)中攝影畫面構(gòu)成的圖片較為常見，具有生動(dòng)性、直觀性、真實(shí)性等特點(diǎn)，使用時(shí)能夠?qū)⒂脩裟抗庋杆傥^來，讓其進(jìn)入特殊情境之中。此種圖片用戶接受性較高，通過圖像處理技術(shù)，可將結(jié)合特定詞語與攝影圖片，以多種角度為用戶提供風(fēng)格不同的畫面，得到審美需求的滿足。但是在實(shí)際應(yīng)用過程中，單張使用攝影圖片則會(huì)讓網(wǎng)頁顯得單調(diào)粗糙，引起觀賞者反感，影響了整體網(wǎng)頁概念的體現(xiàn)。因此，設(shè)計(jì)人員可使用多種圖像方法，不僅可增加網(wǎng)頁內(nèi)容的豐富性，還能通過多種圖片突出網(wǎng)頁的中心思想。

（4）插圖設(shè)計(jì)。插圖也是網(wǎng)頁設(shè)計(jì)中常見的形式之一。為有效拓展文本信息，插圖應(yīng)用十分廣泛，能夠?qū)⒒虺橄蠡驅(qū)憣?shí)的藝術(shù)性充分展現(xiàn)出來，結(jié)合網(wǎng)頁實(shí)際需求選擇圖片。圖形符號(hào)在網(wǎng)絡(luò)設(shè)計(jì)中應(yīng)用也較為廣泛，可作為網(wǎng)頁裝飾，提高設(shè)計(jì)的藝術(shù)性，豐富網(wǎng)頁畫面感。

3? ? 結(jié)語

在網(wǎng)頁設(shè)計(jì)中依據(jù)網(wǎng)頁設(shè)計(jì)需求，選擇合適的圖像格式、圖片風(fēng)格、形狀尺寸、背景圖及關(guān)鍵圖等，可以吸引更多用戶的注意力，有助于達(dá)到提高瀏覽率的目的。

[參考文獻(xiàn)]

[1]耿甜，胡垂立.計(jì)算機(jī)圖像處理技術(shù)在UI設(shè)計(jì)中的應(yīng)用[J].無線互聯(lián)科技，2019（15）：133-134.

[2]洪世勇.新時(shí)期網(wǎng)頁設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用[J].信息與電腦（理論版），2018（11）：171-172，175.

[3]李志立.計(jì)算機(jī)圖像處理技術(shù)在網(wǎng)頁設(shè)計(jì)中的最佳化應(yīng)用解析[J].電腦知識(shí)與技術(shù)，2018（17）：233-234.

[4]張華，陸玉.新時(shí)期網(wǎng)頁設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用[J].浙江水利水電學(xué)院學(xué)報(bào)，2019（2）：75-78，82.

[5]米熱古麗·克比爾.網(wǎng)頁設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用[J].數(shù)字技術(shù)與應(yīng)用，2018（9）：139，143.

Application of computer image processing technology in Web page design

Zhuang Lijun

（Guangdong Baiyun University， Guangzhou 510450， China）

Abstract：Based on the image processing technology， this paper analyzes that the common processing technologies are enhancement processing， denoising processing and compression processing， and on this basis， through image format selection， Web page style design， web page logo design， other web page design， etc.， to explore the application measures of computer image processing technology in Web page design， in order to provide reference for relevant workers.

Key words：Web design; computer; image processing; application