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

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

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

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

圖像文件格式及其使用

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

GIF

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

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

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

巴新

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

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

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

JPEG或JPG

JPEG是一種有損圖像壓縮格式，它經(jīng)常被數(shù)碼相機用來存儲圖像。JPEG格式可以很容易地處理自然圖像的色調(diào)和顏色的平滑變化，因為它是為這個特定的用例設(shè)計的。它是最常見和最廣泛使用的圖像格式，因為大多數(shù)圖片可以非常好地壓縮使用JPEG格式。

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

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

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

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

圖像大小

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

優(yōu)化圖像的第一步是決定最終圖像的分辨率，這可能因網(wǎng)站而異，但您可以使用常識，甚至可以查看競爭對手使用的分辨率。通常，你可以在1200-2000像素的寬度范圍內(nèi)找到圖像，它們在更大的屏幕上仍然很好看。

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

調(diào)整大小

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

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

優(yōu)化交付

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

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

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

如果您使用的是CDN(確實應(yīng)該使用CDN)，請查看它們的界面，因為它們中的大多數(shù)都有一個圖像優(yōu)化解決方案，它們可能提供WebP格式的圖像，而不是JPEG文件(CloudFlare，MaxCDN)，或者它們會動態(tài)地優(yōu)化PNG圖像。

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

成都網(wǎng)站制作

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

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站制作等

廣告

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