中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2019-04-17    分類: 網站建設

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


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


網站建設-m.rwnh.cn" alt="優(yōu)化網站圖像的方法-北京網站建設-m.rwnh.cn" src="/upload/pic5/6369342435710937509035466.png" />


首先使用SVG

可縮放矢量圖形(SVG)是一種用于存儲矢量圖像的XML標記語言。SVG使用一系列稱為“向量”的點來映射到二維坐標網格,而不是使用像素來表示圖像數(shù)據(jù)(如更熟悉的JPEG,GIF和PNG文件格式)。

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

SVG非常適合網站,因為它們具有無限的分辨率和非常小的文件大小。換句話說,您可以隨心所欲地放大SVG,它們看起來總是很清晰。這是因為SVG文件將圖像存儲為一系列形成形狀的坐標,而不是像素數(shù)據(jù)。然后,無論其分辨率如何,這些形狀都會自動投影到物理像素網格中。SVG主要用于表示由形狀組成的圖形圖像,但它們并不擅長一切。對于像照片或藝術品這樣極其高細節(jié)的圖像,您仍然需要使用使用像素的基于光柵的文件格式。話雖這么說,你應該首先嘗試將SVG用于所有圖像,并且只有在照片或藝術作品的情況下才應使用其他格式。


重新縮放光柵圖像

SVG與分辨率無關,因此無需重新調整。但是,基于光柵的文件格式(如JPEG和PNG)具有以像素表示的絕對分辨率。所有其他因素相同,更多像素通常意味著較慢的頁面加載時間。

無論好壞,網絡都沒有處理像素; 它是一種流動的媒介,從一個屏幕到另一個屏幕看起來不同。有時您需要讓瀏覽器稍微重新縮放圖像,以便它在響應式網站設計中工作。但是,如果您發(fā)送的像素數(shù)據(jù)多于設備上的物理像素,并且圖像向下縮放,則只會浪費帶寬。

在非常至少,讓他們永遠都不會比您預期要顯示在他們的高分辨率更大,你應該優(yōu)化圖像。這是一個移動目標,這就是SVG如此強大的原因。但是,我一般只擔心25“顯示器在2560×1440及以下。目前還沒有足夠的5k iMac來證明任何更大的東西。


優(yōu)化網站圖像的方法-北京網站建設-m.rwnh.cn


選擇您的PNG以獲得性能

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

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

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


非常謹慎地使用動畫GIF

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


逐步加載JPEG

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


還有許多其他技術可以優(yōu)化網絡圖像,這些只是少數(shù)幾種。如果您想分享更多想法,請在聯(lián)系成都網站建設公司

網頁題目:優(yōu)化網站圖像的方法
網站網址:http://m.rwnh.cn/news16/79566.html

成都網站建設公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、小程序開發(fā)、品牌網站設計、建站公司、網站排名、用戶體驗

廣告

聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

網站托管運營
泰宁县| 万年县| 休宁县| 抚顺县| 绥棱县| 桑日县| 墨玉县| 林口县| 乐业县| 卓资县| 通道| 綦江县| 中牟县| 丰县| 开远市| 平顺县| 青州市| 河南省| 屏东市| 类乌齐县| 伊川县| 元氏县| 泰州市| 九寨沟县| 剑阁县| 华安县| 日照市| 柏乡县| 六盘水市| 佛山市| 宜城市| 昌黎县| 丰县| 塔河县| 和龙市| 启东市| 嵊泗县| 定边县| 苗栗市| 北辰区| 临猗县|