成都網(wǎng)站制作：Web圖像優(yōu)化基本指南

成都網(wǎng)站制作在現(xiàn)代競(jìng)爭(zhēng)激烈的網(wǎng)絡(luò)上，重要的是優(yōu)化你的網(wǎng)站向訪問(wèn)者展示的圖片，無(wú)論是你的新標(biāo)識(shí)，案例研究，還是僅僅是你用手機(jī)拍下的照片，只想和你的觀眾分享。

用于顯示網(wǎng)頁(yè)的大多數(shù)數(shù)據(jù)傳輸由影象因此，通過(guò)優(yōu)化圖像大小，網(wǎng)頁(yè)的加載速度將大大加快。通過(guò)減少顯示頁(yè)面所需的字節(jié)數(shù)，還可以減少訪問(wèn)者等待頁(yè)面加載所需的時(shí)間。對(duì)于搜索引擎來(lái)說(shuō)，Web圖像優(yōu)化也是非常重要的，它將優(yōu)先處理更快的網(wǎng)站加載，特別是在移動(dòng)設(shè)備上。

這篇文章的目的是作為一個(gè)基本的指南，為任何人希望網(wǎng)頁(yè)的網(wǎng)頁(yè)加載速度更快的網(wǎng)站圖像優(yōu)化。

圖像文件格式及其使用

您可以在互聯(lián)網(wǎng)上看到三種主要的圖像格式：jpeg、png和gif或gifv。

GIF

GIF和GIFV(圖形交換格式)可以顯示動(dòng)畫，并支持透明性。你可能還記得90年代的業(yè)余愛(ài)好網(wǎng)頁(yè)，所有的東西都是帶著漂亮的火焰或燈光效果在它們身上移動(dòng)的。幾乎所有的動(dòng)畫都是GIF圖像.

今天，我們可以在諸如reddit或9gag這樣的網(wǎng)站上找到它們，它們之所以被使用，是因?yàn)樗鼈兣c視頻文件相比加載速度快，而且沒(méi)有聲音，而且質(zhì)量不像內(nèi)容那么重要。GIFV是一個(gè)改進(jìn)的舊GIF格式，他們支持更長(zhǎng)的“視頻”或動(dòng)畫。

GIF是好的，實(shí)際上是唯一的選擇，顯示小視頻或動(dòng)畫，以及當(dāng)圖像需要透明的部分或背景。

巴新

PNG(便攜式網(wǎng)絡(luò)圖形)是作為GIF文件格式的替代而創(chuàng)建的。它具有無(wú)損壓縮，這意味著壓縮后不會(huì)丟失任何數(shù)據(jù)，從而確保質(zhì)量與較小的文件大小保持不變。

例如，PNG還支持與JPEG不同的透明度。PNG支持不同的調(diào)色板和灰度，這使得它成為一個(gè)理想的解決方案，減少的顏色數(shù)，如一個(gè)標(biāo)志，例如，不同顏色的數(shù)目通常較低。

當(dāng)需要透明度或圖像只包含少量不同顏色時(shí)，PNG圖像是理想的解決方案。當(dāng)圖像包含清晰的形狀，如打印屏幕或光柵時(shí)，最好使用它們。矢量圖形.

JPEG或JPG

JPEG是一種有損圖像壓縮格式，它經(jīng)常被數(shù)碼相機(jī)用來(lái)存儲(chǔ)圖像。JPEG格式可以很容易地處理自然圖像的色調(diào)和顏色的平滑變化，因?yàn)樗菫檫@個(gè)特定的用例設(shè)計(jì)的。它是最常見(jiàn)和最廣泛使用的圖像格式，因?yàn)榇蠖鄶?shù)圖片可以非常好地壓縮使用JPEG格式。

它的有損特性存在一些缺點(diǎn)，即每次編輯和保存JPEG圖像時(shí)，壓縮算法的每一次迭代都會(huì)丟失一些信息，降低圖像質(zhì)量。

Web圖像的優(yōu)化選擇正確的格式

成都網(wǎng)站制作一旦你知道了最常見(jiàn)的圖像格式的優(yōu)點(diǎn)和缺點(diǎn)，這部分應(yīng)該是容易的。簡(jiǎn)單地回顧一下，如果圖像中有銳利的邊緣和/或它只使用幾種顏色，使用PNG 8格式，因?yàn)樗梢蕴幚?56種顏色。如果你的圖像有更多的顏色，而且你很喜歡不會(huì)失去任何圖像質(zhì)量，您可以使用PNG 24或在極端情況下(大量漸變、圓角和透明)PNG 32。

如果您不介意非常微妙的質(zhì)量損失，并且您的圖片有平滑的變化，如肖像或景觀，您可以使用JPEG格式在80壓縮級(jí)別，或者如果您真的不太關(guān)心質(zhì)量，您甚至可以使用JPEG 65，因?yàn)檫@將大大減少您的圖像文件大小。

圖像大小

使用現(xiàn)代數(shù)碼相機(jī)和手機(jī)，可以很容易地制作出12-25兆像素的圖像，這些圖像可以轉(zhuǎn)換成分辨率非常大的圖像，例如4160×3120甚至更高的分辨率。

優(yōu)化圖像的第一步是決定最終圖像的分辨率，這可能因網(wǎng)站而異，但您可以使用常識(shí)，甚至可以查看競(jìng)爭(zhēng)對(duì)手使用的分辨率。通常，你可以在1200-2000像素的寬度范圍內(nèi)找到圖像，它們?cè)诟蟮钠聊簧先匀缓芎每础?/p>

你通?？梢允褂脙蓚€(gè)圖像大小的真正高分辨率設(shè)備，如高端臺(tái)式機(jī)或27英寸iMac有5K屏幕，一個(gè)用于正常設(shè)備，如高清或富勒高清能力顯示器。您可以使用html IMG標(biāo)記的srcset屬性向訪問(wèn)者的瀏覽器指示圖像有不同的分辨率，因此它可以下載適當(dāng)?shù)膱D像并顯示出來(lái)。

調(diào)整大小

一旦你有了決議，你可以繼續(xù)調(diào)整你的形象為該決議。成都網(wǎng)站制作

值得注意的是，有不同的模式可以調(diào)整圖像的大小(最近鄰、雙三次插值、Lanczos等)。像Photoshop這樣的圖像編輯器可能會(huì)給你不同的方法。在大多數(shù)情況下，您可以堅(jiān)持默認(rèn)設(shè)置，但始終要檢查結(jié)果映像，并且可以看到任何工件或質(zhì)量顯著下降，您可能希望選擇另一種方法。

優(yōu)化交付

在過(guò)去的幾年里，在圖像壓縮方面有了很大的改進(jìn)，特別是對(duì)于PNG和JPEG圖像。有很多免費(fèi)和付費(fèi)的解決方案，將優(yōu)化您的圖像，一些與質(zhì)量損失和一些沒(méi)有。

不用說(shuō)，如果你愿意犧牲質(zhì)量，你可以得到的圖像是高度優(yōu)化和一個(gè)比其他小得多的文件大小。

對(duì)于png圖像，可以使用pngquant、pngoptim或丁PNG甚至還有Photoshop插件。對(duì)于JPEG文件，您也可以使用TinyPNG或ImageOptim.com，這兩種方法都提供了非常好的和高度優(yōu)化的圖像，并且它們還刪除EXIF數(shù)據(jù)，如果您不想透露拍攝圖像的確切位置或相機(jī)手機(jī)的模型，這是很方便的，因?yàn)檫@些細(xì)節(jié)通常存儲(chǔ)在與圖像相連的EXIF數(shù)據(jù)中。

如果您使用的是CDN(確實(shí)應(yīng)該使用CDN)，請(qǐng)查看它們的界面，因?yàn)樗鼈冎械拇蠖鄶?shù)都有一個(gè)圖像優(yōu)化解決方案，它們可能提供WebP格式的圖像，而不是JPEG文件(CloudFlare，MaxCDN)，或者它們會(huì)動(dòng)態(tài)地優(yōu)化PNG圖像。

除了給你提供優(yōu)化網(wǎng)站內(nèi)容的建議外，谷歌的“頁(yè)面速度洞察力”還為你提供了一個(gè)可下載的ZIP文件，并通過(guò)這些文件對(duì)圖片進(jìn)行了優(yōu)化。

成都網(wǎng)站制作

當(dāng)前題目：成都網(wǎng)站制作：Web圖像優(yōu)化基本指南
分享URL：http://muchs.cn/news1/223751.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xià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)