国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

如何對(duì)項(xiàng)目中的圖片進(jìn)行優(yōu)化

2年前作者：songsshao分類(lèi)：Toy博客閱讀(10)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了如何對(duì)項(xiàng)目中的圖片進(jìn)行優(yōu)化。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

優(yōu)化步驟方案

不用圖片。很多時(shí)候會(huì)使用到很多修飾類(lèi)圖片，其實(shí)這類(lèi)修飾圖片
完全可以用 CSS 去代替。
對(duì)于移動(dòng)端來(lái)說(shuō)，屏幕寬度就那么點(diǎn)，完全沒(méi)有必要去加載原圖浪
費(fèi)帶寬。一般圖片都用 CDN 加載，可以計(jì)算出適配屏幕的寬度，然
后去請(qǐng)求相應(yīng)裁剪好的圖片。
小圖使用 base64 格式
將多個(gè)圖標(biāo)文件整合到一張圖片中（雪碧圖）
選擇正確的圖片格式：
- 對(duì)于能夠顯示 WebP 格式的瀏覽器盡量使用 WebP 格式。因?yàn)?WebP格式具有更好的圖像數(shù)據(jù)壓縮算法，能帶來(lái)更小的圖片體積，而且擁有肉眼識(shí)別無(wú)差異的圖像質(zhì)量，缺點(diǎn)就是兼容性并不好
- 小圖使用 PNG，其實(shí)對(duì)于大部分圖標(biāo)這類(lèi)圖片，完全可以使用 SVG 代替
- 照片使用 JPEG

常見(jiàn)的圖片格式及使用場(chǎng)景

BMP：是無(wú)損的、既支持索引色也支持直接色的點(diǎn)陣圖。這種圖片格式幾乎沒(méi)有對(duì)數(shù)據(jù)進(jìn)行壓縮，所以 BMP 格式的圖片通常是較大的文件。
GIF：是無(wú)損的、采用索引色的點(diǎn)陣圖。采用 LZW 壓縮算法進(jìn)行
編碼。文件小，是 GIF 格式的優(yōu)點(diǎn)，同時(shí)，GIF 格式還具有支持動(dòng)畫(huà)
以及透明的優(yōu)點(diǎn)。但是 GIF 格式僅支持 8bit 的索引色，所以 GIF 格
式適用于對(duì)色彩要求不高同時(shí)需要文件體積較小的場(chǎng)景。
JPEG：是有損的、采用直接色的點(diǎn)陣圖。JPEG 的圖片的優(yōu)點(diǎn)是采用了直接色，得益于更豐富的色彩，JPEG 非常適合用來(lái)存儲(chǔ)照片，與 GIF 相比，JPEG 不適合用來(lái)存儲(chǔ)企業(yè) Logo、線(xiàn)框類(lèi)的圖。因?yàn)橛袚p壓縮會(huì)導(dǎo)致圖片模糊，而直接色的選用，又會(huì)導(dǎo)致圖片文件較 GIF更大。
PNG-8：是無(wú)損的、使用索引色的點(diǎn)陣圖。PNG 是一種比較新的圖片格式，PNG-8 是非常好的 GIF 格式替代者，在可能的情況下，應(yīng)該盡可能的使用 PNG-8 而不是 GIF，因?yàn)樵谙嗤膱D片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8 還支持透明度的調(diào)節(jié)，而 GIF并不支持。除非需要?jiǎng)赢?huà)的支持，否則沒(méi)有理由使用 GIF而不是 PNG-8。
PNG-24：是無(wú)損的、使用直接色的點(diǎn)陣圖。PNG-24 的優(yōu)點(diǎn)在于它壓縮了圖片的數(shù)據(jù)，使得同樣效果的圖片，PNG-24 格式的文件大小要比 BMP 小得多。當(dāng)然，PNG24 的圖片還是要比 JPEG、GIF、PNG-8大得多。
SVG 是無(wú)損的矢量圖。SVG 是矢量圖意味著 SVG 圖片由直線(xiàn)和曲線(xiàn)以及繪制它們的方法組成。當(dāng)放大 SVG 圖片時(shí)，看到的還是線(xiàn)和曲線(xiàn)，而不會(huì)出現(xiàn)像素點(diǎn)。這意味著 SVG 圖片在放大時(shí)，不會(huì)失真，所以它非常適合用來(lái)繪制 Logo、Icon 等。
WebP：是谷歌開(kāi)發(fā)的一種新圖片格式，WebP 是同時(shí)支持有損和無(wú)損壓縮的、使用直接色的點(diǎn)陣圖。從名字就可以看出來(lái)它是為 Web 而生的，什么叫為 Web 而生呢？就是說(shuō)相同質(zhì)量的圖片，WebP 具有更小的文件體積?，F(xiàn)在網(wǎng)站上充滿(mǎn)了大量的圖片，如果能夠降低每一個(gè)圖片的文件大小，那么將大大減少瀏覽器和服務(wù)器之間的數(shù)據(jù)傳輸量，進(jìn)而降低訪(fǎng)問(wèn)延遲，提升訪(fǎng)問(wèn)體驗(yàn)。目前只有 Chrome 瀏覽器和 Opera瀏覽器支持 WebP 格式，兼容性不太好。
在無(wú)損壓縮的情況下，相同質(zhì)量的 WebP 圖片，文件大小要比 PNG 小26%；
在有損壓縮的情況下，具有相同圖片精度的 WebP 圖片，文件大小要比 JPEG 小 25%~34%；
WebP 圖片格式支持圖片透明度，一個(gè)無(wú)損壓縮的 WebP 圖片，如果要支持透明度只需要 22%的格外文件大小。

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-636756.html

到了這里，關(guān)于如何對(duì)項(xiàng)目中的圖片進(jìn)行優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

如何進(jìn)行Web插件性能優(yōu)化
作者：禪與計(jì)算機(jī)程序設(shè)計(jì)藝術(shù) 隨著互聯(lián)網(wǎng)web應(yīng)用的快速發(fā)展、普及化，無(wú)論從功能和界面設(shè)計(jì)上，還是服務(wù)性能方面，WordPress都在逐步成為一種熱門(mén)技術(shù)。其插件開(kāi)發(fā)者也越來(lái)越多地用到WordPress作為平臺(tái)，實(shí)現(xiàn)各種功能。但與其他技術(shù)不同的是，WordPress作為最流行的內(nèi)容管
2024年02月07日
瀏覽(20)
前端項(xiàng)目中CDN的一些問(wèn)題【性能優(yōu)化篇】
CDN（Content Delivery NetWork，內(nèi)容分發(fā)網(wǎng)絡(luò) ），是指利用最靠近每位用戶(hù)的服務(wù)區(qū) ，更快的將資源發(fā)送給用戶(hù)。提高用戶(hù)的訪(fǎng)問(wèn)速度減輕服務(wù)器壓力提高網(wǎng)站的穩(wěn)定性和安全性 CDN一般用來(lái)托管Web資源（文本、圖片和視頻等），可供下載的資源，應(yīng)用程序。使用CDN來(lái)加速這些
2024年02月03日
瀏覽(90)
前端（八）——深入探索前端框架中的Diff算法：優(yōu)化視圖更新與性能提升
??博主：小貓娃來(lái)啦 ??文章核心：深入探索前端框架中的Diff算法：優(yōu)化視圖更新與性能提升前端框架中的diff算法是一種比較兩個(gè)虛擬DOM樹(shù)之間差異的算法。在更新頁(yè)面時(shí)，為了提高性能，前端框架通常會(huì)先生成新的虛擬DOM樹(shù)，然后通過(guò)diff算法比較新舊虛擬DOM樹(shù)的差異，
2024年02月16日
瀏覽(16)
如何?webpack 來(lái)優(yōu)化前端性能
如何?webpack 來(lái)優(yōu)化前端性能？ ?webpack 優(yōu)化前端性能是指優(yōu)化 webpack 的輸出結(jié)果，讓打包的最終結(jié)果在瀏覽器運(yùn)?快速?效。壓縮代碼：刪除多余的代碼、注釋、簡(jiǎn)化代碼的寫(xiě)法等等?式。可以利?webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 來(lái)壓縮JS?件，利? cssnano （css-lo
2024年02月13日
瀏覽(21)
uniapp小程序如何進(jìn)行性能優(yōu)化
減少頁(yè)面層級(jí)：盡量減少頁(yè)面的層級(jí)，減少頁(yè)面的嵌套，可以減少頁(yè)面的渲染時(shí)間，提高頁(yè)面的加載速度。避免過(guò)多的數(shù)據(jù)綁定：減少數(shù)據(jù)綁定的次數(shù)，盡量將數(shù)據(jù)綁定到最外層的組件上，避免過(guò)多的數(shù)據(jù)綁定，可以減少頁(yè)面的渲染時(shí)間。避免頻繁的數(shù)據(jù)更新：對(duì)于一些不
2024年02月13日
瀏覽(50)
前端性能優(yōu)化的利器 ——— 淺談JavaScript中的防抖和節(jié)流
防抖和節(jié)流函數(shù)是工作中兩種常用的前端性能優(yōu)化函數(shù)，今天我就來(lái)總結(jié)一下什么是防抖和節(jié)流，并詳細(xì)說(shuō)明一下如何在工作中應(yīng)用防抖和節(jié)流函數(shù) 在 JavaScript 中，防抖（debounce）和節(jié)流（throttle）是用來(lái)限制函數(shù)執(zhí)行頻率的兩種常見(jiàn)技術(shù)。防抖（debounce）是指在某個(gè)時(shí)間段
2024年02月14日
瀏覽(30)
【前端性能優(yōu)化】如何取消http請(qǐng)求
?創(chuàng)作者：全棧弄潮兒 ?? 個(gè)人主頁(yè)：全棧弄潮兒的個(gè)人主頁(yè) ??? 個(gè)人社區(qū)，歡迎你的加入：全棧弄潮兒的個(gè)人社區(qū) ?? 專(zhuān)欄地址，歡迎訂閱：前端架構(gòu)師之路場(chǎng)景一：有一個(gè)實(shí)時(shí)搜索功能，每當(dāng)用戶(hù)輸入內(nèi)容改變的時(shí)候，就會(huì)去調(diào)用一個(gè)接口，返回搜索結(jié)果數(shù)據(jù)，如果
2024年01月18日
瀏覽(17)
JavaScript中的數(shù)據(jù)緩存與內(nèi)存泄露：解密前端性能優(yōu)化與代碼健康
???個(gè)人主頁(yè)：前端青山 ??系列專(zhuān)欄：JavaScript篇 ?? 人終將被年少不可得之物困其一生依舊青山 ,本期給大家?guī)?lái)JavaScript篇專(zhuān)欄內(nèi)容:JavaScript-數(shù)據(jù)緩存與內(nèi)存泄露目錄說(shuō)說(shuō)你對(duì)事件循環(huán)的理解一、是什么二、宏任務(wù)與微任務(wù) 微任務(wù) 宏任務(wù) 三、async與await async await 四、
2024年02月03日
瀏覽(20)
【前端知識(shí)】React 基礎(chǔ)鞏固(二十三)——React 性能優(yōu)化 SCU相關(guān)
React 的渲染流程 JSX - 虛擬 DOM - 真實(shí) DOM React 的更新流程 props/state 改變 - render函數(shù)重新執(zhí)行 - 產(chǎn)生新的DOM樹(shù) - 新舊DOM樹(shù)進(jìn)行diff - 計(jì)算出差異進(jìn)行更新 - 更新到真實(shí)的DOM React 在 props 或 state 發(fā)生改變時(shí)，會(huì)調(diào)用 React 的 render 方法，會(huì)創(chuàng)建一顆不同的樹(shù) React 需要基于這兩顆不同的
2024年02月15日
瀏覽(39)
探索前端圖片如何攜帶token進(jìn)行驗(yàn)證
圖片在前端開(kāi)發(fā)中扮演了重要的角色，它們不僅僅是美觀的元素，還可以傳遞信息和激發(fā)用戶(hù)的興趣。隨著應(yīng)用場(chǎng)景的增多，前端開(kāi)發(fā)人員就需要在圖片加載過(guò)程中攜帶驗(yàn)證的信息。如 token ，用于身份驗(yàn)證、權(quán)限控制等方面。通過(guò)在圖片的 URL 或請(qǐng)求頭中攜帶 token 信息，從而
2024年02月14日
瀏覽(26)