優(yōu)化網(wǎng)站圖像的方法

創(chuàng)建快速網(wǎng)站的好方法之一是優(yōu)化網(wǎng)絡(luò)圖像。HTML，CSS，JavaScripts和字體可以相加，但沒(méi)有什么能像一大堆未經(jīng)優(yōu)化的圖形那樣減慢頁(yè)面速度。根據(jù)我的經(jīng)驗(yàn)，圖像往往占據(jù)頁(yè)面總文件大小的大部分（通常稱為“頁(yè)面權(quán)重”）。如果優(yōu)化圖像，從服務(wù)器到瀏覽器的傳輸將更快地發(fā)生。讓我們深入研究。

網(wǎng)站建設(shè)-jinyejixie.com" alt="優(yōu)化網(wǎng)站圖像的方法-北京網(wǎng)站建設(shè)-jinyejixie.com" src="/upload/pic5/6369342435710937509035466.png" />

首先使用SVG

可縮放矢量圖形（SVG）是一種用于存儲(chǔ)矢量圖像的XML標(biāo)記語(yǔ)言。SVG使用一系列稱為“向量”的點(diǎn)來(lái)映射到二維坐標(biāo)網(wǎng)格，而不是使用像素來(lái)表示圖像數(shù)據(jù)（如更熟悉的JPEG，GIF和PNG文件格式）。

SVG格式最適合像這樣的圖形。注意大平坦的顏色區(qū)域。

SVG非常適合網(wǎng)站，因?yàn)樗鼈兙哂袩o(wú)限的分辨率和非常小的文件大小。換句話說(shuō)，您可以隨心所欲地放大SVG，它們看起來(lái)總是很清晰。這是因?yàn)镾VG文件將圖像存儲(chǔ)為一系列形成形狀的坐標(biāo)，而不是像素?cái)?shù)據(jù)。然后，無(wú)論其分辨率如何，這些形狀都會(huì)自動(dòng)投影到物理像素網(wǎng)格中。SVG主要用于表示由形狀組成的圖形圖像，但它們并不擅長(zhǎng)一切。對(duì)于像照片或藝術(shù)品這樣極其高細(xì)節(jié)的圖像，您仍然需要使用使用像素的基于光柵的文件格式。話雖這么說(shuō)，你應(yīng)該首先嘗試將SVG用于所有圖像，并且只有在照片或藝術(shù)作品的情況下才應(yīng)使用其他格式。

重新縮放光柵圖像

SVG與分辨率無(wú)關(guān)，因此無(wú)需重新調(diào)整。但是，基于光柵的文件格式（如JPEG和PNG）具有以像素表示的絕對(duì)分辨率。所有其他因素相同，更多像素通常意味著較慢的頁(yè)面加載時(shí)間。

無(wú)論好壞，網(wǎng)絡(luò)都沒(méi)有處理像素; 它是一種流動(dòng)的媒介，從一個(gè)屏幕到另一個(gè)屏幕看起來(lái)不同。有時(shí)您需要讓瀏覽器稍微重新縮放圖像，以便它在響應(yīng)式網(wǎng)站設(shè)計(jì)中工作。但是，如果您發(fā)送的像素?cái)?shù)據(jù)多于設(shè)備上的物理像素，并且圖像向下縮放，則只會(huì)浪費(fèi)帶寬。

在非常至少，讓他們永遠(yuǎn)都不會(huì)比您預(yù)期要顯示在他們的高分辨率更大，你應(yīng)該優(yōu)化圖像。這是一個(gè)移動(dòng)目標(biāo)，這就是SVG如此強(qiáng)大的原因。但是，我一般只擔(dān)心25“顯示器在2560×1440及以下。目前還沒(méi)有足夠的5k iMac來(lái)證明任何更大的東西。

選擇您的PNG以獲得性能

SVG最適合由實(shí)心形狀和銳利線條組成的圖像，而JPEG最適合照片和藝術(shù)品。但是，有時(shí)圖形不具有可用的SVG版本，并且JPEG壓縮工件在平坦的顏色區(qū)域和尖銳的線條中看起來(lái)很難看。您可能還有一個(gè)光柵圖像，其中有一些透明區(qū)域應(yīng)該讓它們的背景透過(guò)。在這些情況下，最好的格式是PNG文件，有兩種版本，PNG-8和PNG-24。

PNG-8使用最多256種顏色的自適應(yīng)調(diào)色板。其中一種顏色可以用于透明度，但透明度是二進(jìn)制的（像素是100％透明或100％不透明）。這意味著不透明區(qū)域和透明區(qū)域之間的任何過(guò)渡都將非常清晰，沒(méi)有部分漸變。如果PNG-8的任何外部像素大部分都是淺色并且放置在深色背景上，則邊緣看起來(lái)會(huì)呈鋸齒狀。大的好處是文件大小趨于合理。

PNG-24具有全彩色和全alpha透明度（像素可以部分透明），從而產(chǎn)生精美的透明度。這通常是呈現(xiàn)部分透明照片切口的唯一方式，例如頭發(fā)或模糊邊緣。缺點(diǎn)是這些圖像產(chǎn)生任何圖像格式的一些大文件大小。

非常謹(jǐn)慎地使用動(dòng)畫GIF

在20世紀(jì)90年代，動(dòng)畫GIF無(wú)處不在。他們最近卷土重來(lái)，雖然不是旋轉(zhuǎn)LOGO和頁(yè)面計(jì)數(shù)器的形式。這里的規(guī)則非常簡(jiǎn)單：動(dòng)畫GIF的文件大小往往很大（通常甚至比HTML5視頻大）。如果您想使用內(nèi)聯(lián)動(dòng)畫GIF演示超快速概念（例如如何在網(wǎng)站應(yīng)用程序中使用UI功能），那么請(qǐng)務(wù)必密切關(guān)注每個(gè)GIF如何影響整體頁(yè)面重量。

逐步加載JPEG

通常從圖像頂部開始下載JPEG圖像并向下掃描到底部。然而，它們可以制成“漸進(jìn)式”圖像，加載模糊，然后在多次通過(guò)中逐漸變得更加清晰。這不會(huì)增加頁(yè)面加載時(shí)間，但會(huì)增加 感知性能并使網(wǎng)頁(yè)看起來(lái)更快加載。人眼一次只能聚焦在屏幕的一小部分上，因此填充具有大塊顏色的區(qū)域然后增加其清晰度通常 看起來(lái)比允許圖像從上到下掃描更快。

還有許多其他技術(shù)可以優(yōu)化網(wǎng)絡(luò)圖像，這些只是少數(shù)幾種。如果您想分享更多想法，請(qǐng)?jiān)诼?lián)系成都網(wǎng)站建設(shè)公司！

分享文章：優(yōu)化網(wǎng)站圖像的方法
網(wǎng)站網(wǎng)址：http://jinyejixie.com/news/79566.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈、全網(wǎng)營(yíng)銷推廣、網(wǎng)站收錄、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)