構(gòu)建現(xiàn)代網(wǎng)頁(yè)時(shí)，圖片是不可或缺的元素之一。它們能夠增強(qiáng)視覺吸引力，幫助傳達(dá)信息，并提升用戶體驗(yàn)。然而，如果圖片沒有得到適當(dāng)?shù)膬?yōu)化，它們可能會(huì)顯著拖慢網(wǎng)站的加載速度，影響用戶體驗(yàn)和搜索引擎優(yōu)化（SEO）。在本文中，我們將探討不同的圖片格式，并提供優(yōu)化這些格式的策略和示例。

常見的圖片格式

JPEG（或JPG）

• 優(yōu)點(diǎn)：支持高色彩深度，適合處理照片和復(fù)雜的圖像。
• 缺點(diǎn)：有損壓縮，可能會(huì)在高壓縮率下失去細(xì)節(jié)。
• 使用場(chǎng)景：適用于色彩豐富且沒有透明度要求的圖片。

PNG

• 優(yōu)點(diǎn)：支持透明度，無(wú)損壓縮，保留細(xì)節(jié)。
• 缺點(diǎn)：文件大小通常大于JPEG。
• 使用場(chǎng)景：適用于需要透明度或者高保真度的圖形，如徽標(biāo)和圖標(biāo)。

GIF

• 優(yōu)點(diǎn)：支持動(dòng)畫和透明度（僅限單色透明）。
• 缺點(diǎn)：僅支持256色，質(zhì)量較低。
• 使用場(chǎng)景：適用于簡(jiǎn)單動(dòng)畫和小圖標(biāo)。

WebP

• 優(yōu)點(diǎn)：支持透明度和有損以及無(wú)損壓縮，壓縮率高于JPEG和PNG。
• 缺點(diǎn)：兼容性不如JPEG和PNG廣泛。
• 使用場(chǎng)景：適用于需要優(yōu)化加載速度的網(wǎng)頁(yè)，同時(shí)保持較高的圖像質(zhì)量。

SVG

• 優(yōu)點(diǎn)：矢量格式，可無(wú)限放大而不失真，文件大小小。
• 缺點(diǎn)：不適合復(fù)雜的照片。
• 使用場(chǎng)景：適用于圖標(biāo)、徽標(biāo)、圖表和其他可縮放圖形。

圖片優(yōu)化策略

選擇正確的格式

根據(jù)圖片內(nèi)容和用途選擇最合適的格式。例如，對(duì)于網(wǎng)頁(yè)上的照片，JPEG可能是最佳選擇，因?yàn)樗诒３窒鄬?duì)較小的文件大小的同時(shí)提供了良好的圖像質(zhì)量。對(duì)于需要透明背景的圖標(biāo)，PNG可能更合適。

壓縮圖片

使用工具或服務(wù)壓縮圖片，減少文件大小。例如，使用在線工具如 TinyPNG 來(lái)壓縮PNG文件，或者使用 Adobe Photoshop 的“存儲(chǔ)為Web所用格式”功能來(lái)減小JPEG文件的大小。

調(diào)整尺寸

根據(jù)需要在網(wǎng)頁(yè)中顯示的大小調(diào)整圖片尺寸。不要上傳超大的圖片然后依賴瀏覽器縮放，因?yàn)檫@會(huì)導(dǎo)致不必要的加載時(shí)間。

使用響應(yīng)式圖片

通過(guò) HTML5 的 <picture> 元素或 srcset 和 sizes 屬性，可以為不同屏幕尺寸提供不同大小的圖片。

延遲加載

對(duì)于非視口內(nèi)的圖片，可以使用延遲加載（lazy loading）技術(shù)。這樣，只有當(dāng)用戶滾動(dòng)到圖片位置時(shí)，圖片才會(huì)加載。

使用CDN

使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）來(lái)分發(fā)圖片，可以減少加載時(shí)間，因?yàn)閳D片會(huì)從離用戶最近的服務(wù)器加載。

實(shí)例分析

示例1：優(yōu)化網(wǎng)頁(yè)照片

假設(shè)你有一個(gè)高分辨率的照片，原始尺寸為4000x3000像素，文件大小為5MB。如果這張照片要在網(wǎng)頁(yè)上以800x600像素的尺寸展示，那么：

1. 使用圖像編輯工具將尺寸調(diào)整為800x600像素。
2. 選擇JPEG格式，并設(shè)置合適的壓縮比例，比如70%的質(zhì)量。
3. 使用TinyJPG等在線工具進(jìn)一步壓縮處理。
4. TinyJPG – Compress WebP, PNG and JPEG images intelligently

優(yōu)化后的圖片可能只有100KB左右，大大減少了加載時(shí)間。

示例2：優(yōu)化圖標(biāo)

如果你有一個(gè)圖標(biāo)，需要在網(wǎng)頁(yè)上以多種尺寸展示，并且需要透明背景：

1. 使用SVG格式，因?yàn)樗С滞该鞫龋掖笮〔粫?huì)隨著尺寸變化而變化。
2. 如果SVG不可行，選擇PNG格式，并確保圖片尺寸不大于實(shí)際需要的尺寸。

結(jié)論

圖片優(yōu)化對(duì)于提高網(wǎng)頁(yè)加載速度至關(guān)重要。通過(guò)選擇合適的圖片格式，壓縮文件大小，調(diào)整尺寸，使用響應(yīng)式圖片技術(shù)，實(shí)現(xiàn)延遲加載，以及利用CDN，可以確保圖片在不犧牲質(zhì)量的情況下快速加載。這不僅能提升用戶體驗(yàn)，還能對(duì)SEO產(chǎn)生積極影響。

ebStorage的目的是克服由cookie所帶來(lái)的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時(shí)，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。

WebStorage兩個(gè)主要目標(biāo)：

（1）提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的路徑。

（2）提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制。

web存儲(chǔ)更加安全與快速，這些數(shù)據(jù)還不會(huì)保存到服務(wù)器，還可以存儲(chǔ)大量數(shù)據(jù)而不影響網(wǎng)站性能。

web 存儲(chǔ)類型

1. localStorage - 用于長(zhǎng)久保存數(shù)據(jù)，沒有有效期，直到手動(dòng)清除。
2. sessionStorage - 臨時(shí)保存當(dāng)前窗口的數(shù)據(jù)，窗口關(guān)閉之后自動(dòng)清除。

不管是 localStorage 還是 sessionStorage 使用方法都是一樣的語(yǔ)法，對(duì)常見操作語(yǔ)法進(jìn)行示范。以下就以localStorage為例：

常見操作語(yǔ)法：

• 保存數(shù)據(jù)：

localStorage.key = value

localStorage.setItem(key,value)

• 獲取數(shù)據(jù)

localStorage.key

localStorage.getItem(key)

• 刪除單個(gè)數(shù)據(jù)：

localStorage.removeItem(key)

delete localStorage.key

• 刪除全部：localStorage.clear()
• 獲取某個(gè)索引的鍵值：localStorage.key(index)

數(shù)據(jù)都是以鍵值對(duì)形式存在的，操作的時(shí)候與json有點(diǎn)類似。

web存儲(chǔ)數(shù)據(jù)應(yīng)用

應(yīng)用1：取出本地存儲(chǔ)的所有數(shù)據(jù)，以localStorage為例。

localStorage和sessionStorage是兩個(gè)對(duì)象，類似json。可遍歷取出數(shù)據(jù)，如：

localStorage.user = "倩倩"
localStorage.age = "18"
localStorage.job = "打雜"
console.log(localStorage)// {job: "打雜", age: "18", user: "倩倩", length: 3}
for(key in localStorage){
 console.log(`${key}--${localStorage[key]}`)
}

運(yùn)行程序之后，結(jié)果如圖：

我們發(fā)現(xiàn)遍歷的時(shí)候把localStorage的屬性和方法全部打印出來(lái)了，而我們需要的只是我們存儲(chǔ)的三個(gè)數(shù)據(jù)，其余的都不要，此時(shí)我們換個(gè)方法。

localStorage.user = "倩倩"
localStorage.age = "18"
localStorage.job = "打雜"
console.log(localStorage)// {job: "打雜", age: "18", user: "倩倩", length: 3}
for(let i=0;i<localStorage.length;i++){
 let key = localStorage.key(i)
 console.log(`${key}:${localStorage[key]}`)
}

此時(shí)運(yùn)行結(jié)果就是我們需要的結(jié)果了！

記住用戶登錄信息、存草稿、存郵件等經(jīng)常會(huì)使用 localStorage，我們介紹下幾種存儲(chǔ)方式的區(qū)別，可以更好地根據(jù)需求選擇存儲(chǔ)方式。

幾種存儲(chǔ)方式區(qū)別

cookies 和 sessionStorage、localStorage區(qū)別如圖：

上述看三者存儲(chǔ)大小有很大差異，存儲(chǔ)內(nèi)容上也不同，cookie只能保存字符串類型，但sessionStorage和localStorage能夠支持任何類型的對(duì)象存儲(chǔ)。如果保存復(fù)雜json數(shù)據(jù)時(shí)，可以轉(zhuǎn)成字符串保存，取出時(shí)通過(guò)JSON.parse()轉(zhuǎn)成json格式。

安全性方面，web 存儲(chǔ)不會(huì)發(fā)送到服務(wù)器端，不用擔(dān)心被截獲，所以相對(duì)cookie安全些。

實(shí)例：網(wǎng)頁(yè)中寫信，自動(dòng)保存草稿，網(wǎng)頁(yè)關(guān)閉重新打開之后數(shù)據(jù)依舊存在。

<textarea name="" id="email" cols="30" rows="10" oninput="save()"></textarea>
<script>
 function save(){
  var x = document.getElementById("email")
  localStorage.setItem('email',x.value)
 }
 window.onload =function(){
  var x = document.getElementById("email")
  x.value = localStorage.getItem("email")
 }
</script>

注意：如果你是直接使用瀏覽器打開html文件，此時(shí)發(fā)現(xiàn)并不會(huì)存儲(chǔ)，需要聲明下存儲(chǔ)是針對(duì)域的，所以我們需要放到服務(wù)內(nèi)，服務(wù)內(nèi)訪問(wèn)才可以進(jìn)行緩存。

需要的同學(xué)自己去下載個(gè)nginx。

字中夾著圖片，圖片也需要文字說(shuō)明，文字和圖片相輔相成，就有了絢麗多彩的網(wǎng)頁(yè)內(nèi)容。但是圖文混排的方式卻給我們存儲(chǔ)數(shù)據(jù)帶來(lái)不便，實(shí)際上大多數(shù)網(wǎng)頁(yè)是把文字和圖片分別存放在不同文件中的，在html源碼中只保存圖片的鏈接地址。

如上圖所示，在做數(shù)據(jù)采集時(shí)，很多朋友把文字和圖片分別下載保存，還要處理鏈接本地化轉(zhuǎn)換的問(wèn)題。實(shí)際上我們也可以把圖片文件轉(zhuǎn)碼后保存在html源碼文件里，這樣用一個(gè)html文件就可以保存圖文信息了，自動(dòng)采集圖文步驟如下。
打開木頭瀏覽器項(xiàng)目管理窗口，創(chuàng)建【打開網(wǎng)頁(yè)】步驟，添加需要采集的頁(yè)面網(wǎng)址，如果添加多個(gè)網(wǎng)址，則可以按順序打開采集內(nèi)容。

然后添加最關(guān)鍵的步驟【抓取內(nèi)容】，【添加】抓取內(nèi)容，在彈出的【抓取元素設(shè)置】窗口，點(diǎn)擊【自動(dòng)獲取】按鈕，瀏覽器將處于元素定位模式，鼠標(biāo)移到需要抓取的元素內(nèi)容上方點(diǎn)擊右鍵，在彈出的快捷菜單中選擇【獲取元素并返回】，成功獲取可唯一標(biāo)識(shí)該元素的方法，如下圖所示，此以頁(yè)面使用元素的ID屬性定位等抓取的元素區(qū)域，設(shè)置獲取元素的【TagTextToHtml】擴(kuò)展屬性，意思是把元素內(nèi)容轉(zhuǎn)化為Html代碼。如有必要，可以使用同樣的方法繼續(xù)添加抓取頁(yè)面文章標(biāo)題，此處不再贅述。

抓取元素轉(zhuǎn)換成html后，就是保存數(shù)據(jù)了，創(chuàng)建【保存數(shù)據(jù)】步驟，勾選【保存變量文件】，選擇Htm文件格式，設(shè)置文件保存路徑。

最后，點(diǎn)擊【開始測(cè)試】按鈕運(yùn)行項(xiàng)目，當(dāng)項(xiàng)目執(zhí)行完畢后，打開設(shè)定的保存文件目錄，就可以看到自動(dòng)保存和htm文件，且只有這個(gè)文件，雙擊自動(dòng)調(diào)用瀏覽器打開，完整呈現(xiàn)圖文內(nèi)容。圖片已經(jīng)轉(zhuǎn)成了Base64編碼，嵌入保存在htm文件中。