由于加載時(shí)間過(guò)長(zhǎng)，縱觀從一端與訪客遺棄的IT成本,你可能想好好看看如何在線管理你的圖片。當(dāng)每一秒傳遞減少你的網(wǎng)站的整體轉(zhuǎn)換并最終營(yíng)收-它使得你想盡可能優(yōu)化你的圖片和圖片傳輸而變得非常有意義.一起和贏在威客網(wǎng)小編看看吧。
1. 奢侈的在瀏覽器端調(diào)整圖片大小
我們常常觀察到開發(fā)者所使用的一個(gè)快捷方式就是使用瀏覽器端的圖片大小調(diào)整，而不是在服務(wù)器端就把圖片的大小調(diào)整好、.
情況常常是一樣的 - 網(wǎng)站中擁有許多特定尺寸的縮略圖，然后圖形的設(shè)計(jì)發(fā)生了變化. 新的圖形設(shè)計(jì)要求縮略圖尺寸有一點(diǎn)輕微的變化，而我們的開發(fā)者，有時(shí)是隨意，有時(shí)則是刻意的，就使用原來(lái)的大尺寸圖片，只是針對(duì)瀏覽器調(diào)整一下圖片的CSS高度和寬度，使圖片看起來(lái)是一張縮略圖.
在現(xiàn)代瀏覽器上，最終結(jié)果看上去確實(shí)是一樣的，但是加載圖片所耗費(fèi)的帶塊卻是不一樣的. 你的網(wǎng)站訪問(wèn)這需要浪費(fèi)珍貴的時(shí)間來(lái)加載一張不必要的拉圖片，而你則浪費(fèi)了多余的帶寬去傳輸他們. 對(duì)于更老的瀏覽器這一問(wèn)題會(huì)更加的突出，因?yàn)樗麄冋{(diào)整圖片尺寸的算法效率是低于平均水品的.
2. 沒(méi)必要的高質(zhì)量JPEG圖片
JPEG圖片確實(shí)為web帶來(lái)革命性的影響. 多年以來(lái)，這一有損壓縮格式讓web開發(fā)者可以值耗費(fèi)較任何其它競(jìng)爭(zhēng)對(duì)手更低的帶寬來(lái)加載帶有高細(xì)節(jié)的高分辨率圖像.
而我們?nèi)匀徊粩嗫吹介_發(fā)者和圖形設(shè)計(jì)師不去嘗試對(duì)圖像進(jìn)行JPEG壓縮. 事實(shí)上，在大多數(shù)網(wǎng)站中，你都可以在觀看質(zhì)量沒(méi)有明顯損失的前提下安全吧JPEG質(zhì)量降低一個(gè)檔次.
而85%的 JPEG 圖像質(zhì)量 似乎很普遍，我們看到許多網(wǎng)站中的質(zhì)量都普遍是在95%，而一個(gè)更低的質(zhì)量水品，其實(shí)可以再不損害整個(gè)體驗(yàn)的情況下大大解決帶寬. 最終結(jié)果是更高的帶寬消耗，以及網(wǎng)絡(luò)延時(shí)給用戶體驗(yàn)帶來(lái)的影響.
3.錯(cuò)誤的圖片文件類型
當(dāng)前的網(wǎng)站是 JPEG、PNG 以及 GIF 三分天下。網(wǎng)站中平均起來(lái) JPEG 和 GIF 占大約 40%，PNG 占剩下的 20%。
關(guān)于這三種格式的好的（以及壞的）方面是它們每一個(gè)在網(wǎng)站中都有不同的角色。使用錯(cuò)誤圖片格式是浪費(fèi)訪問(wèn)者的時(shí)間以及你自己的錢。
在 Cloudinary 中，我們最常見的錯(cuò)誤是使用PNG來(lái)投遞照片。對(duì)于PNG的通常的誤解是它是無(wú)損的格式，并認(rèn)為它是照片最可能的替代品。通常來(lái)說(shuō)這沒(méi)錯(cuò)，也確實(shí)沒(méi)必要做優(yōu)化。只需要一點(diǎn)點(diǎn)PNG文件大小就可以獲得質(zhì)量相當(dāng)?shù)母哔|(zhì)量JPEG圖片。
4.發(fā)表非優(yōu)化的圖片
我們知道PNG是無(wú)損格式，但是你知道它可以進(jìn)一步壓縮嗎？發(fā)表同樣精細(xì)的圖片，免費(fèi)的PNG壓縮工具可以將PNG大小減少達(dá)到50%。同樣精細(xì)的圖片，而只有一半大??？當(dāng)我腦殘嘛。不幸的是，許多開發(fā)者和網(wǎng)站設(shè)計(jì)者跳過(guò)了這一步，發(fā)表了非優(yōu)化圖片。
5.忘記脫掉圖片meta數(shù)據(jù)
許多現(xiàn)代網(wǎng)站允許訪問(wèn)者上傳照片。無(wú)論它是用戶的輪廓圖還是近期旅行的共享照片，這些都帶有現(xiàn)代相機(jī)的原始信息，很可能引入許多meta信息到照片中。
meta數(shù)據(jù)在EXIF/IPTC格式中，包含大量的相機(jī)和照片信息，包括相機(jī)型號(hào)、日期和時(shí)間信息、光圈、快門速度、焦長(zhǎng)、測(cè)光模式、ISO、全球定位和許多其他信息片段。
