移動端圖片壓縮

『壹』 圖片格式

圖片格式種類繁多，我們日常使用最多的圖片文件格式是 jpg、png 和 gif。這些格式由於與目前瀏覽器的兼容性，客戶端的網路速度以及用戶的普遍需求而成為最受歡迎的格式。

在了解這三種格式的圖片之前，我們需要先了解一個概念，就是圖片壓縮。

有損 vs 無損

圖片文件格式有可能會對圖片的文件大小進行不同程度的壓縮， 圖片的壓縮分為有損壓縮和無損壓縮兩種。

在了解這個簡單的情況後，我們詳細來看看這三種圖片格式的區別和特點。

JPEG 格式

JPEG（Joint Photographic Experts Group）即聯合圖像專家組，是用於連續色調靜態圖像壓縮的一種標准，文件後綴名為 .jpg 或 .jpeg，是最常用的圖像文件格式。

JPEG 圖片格式的設計目標， 是在不影響人類可分辨的圖片質量的前提下，盡可能的壓縮文件大小。 這意味著 JPEG 去掉了一部分圖片的原始信息，也就是進行了有損壓縮。JPEG 的圖片的優點，是採用了直接色，得益於更豐富的色彩，JPEG 非常適合用來存儲照片，用來表達更生動的圖像效果，比如顏色漸變。

然而，JPEG 不適合用來存儲企業 Logo、線框類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用，又會導致圖片文件體積更大。

PNG 格式

PNG（Portable Network Graphics）即攜帶型網路圖形，是一種採用無損壓縮演算法的點陣圖格式，文件後綴名為 .png。PNG 使用從 LZ77 派生的無損數據壓縮演算法，一般應用於 JAVA 程序、網頁中，它的壓縮比高，生成文件體積小。

PNG 格式是我們在數字設計項目中最常使用的格式。PNG 通常具有比其他格式更大的文件大小，但是它保留了硬性邊緣效果，且可以處理大量顏色。另外 PNG 有個比較有趣的特性，那就是支持透明背景，這也是大多數網站將 Logo 創建為 PNG 格式的主要原因。

GIF 格式

GIF（Graphics Interchange Format）即圖像互換格式，是在 1987 年由 Compu Serve 公司為了填補跨平台圖像格式的空白而發展起來的。眾所周知，它最大的特點就是「能動」。因此，GIF 通常用於從圖像文件創建動畫。通過在壓縮中合並無損質量，可以無損傳輸和存儲這些文件，並且對圖像庫的存儲影響較小。

GIF 是無損的，採用 GIF 格式保存圖片不會降低圖片質量。得益於數據的壓縮，文件體積小，也是 GIF 格式的優點。此外，它還具有支持動畫以及透明背景。

GIF 格式適用於對色彩要求不高同時需要文件體積較小的場景，比如企業 Logo、線框類的圖等。因其體積小的特點，現在 GIF 也已經被廣泛的應用在各類網站中。

從左到右，這些文件依次是：24 位 JPG 壓縮文件，8 位 GIF，8 位 PNG，全質量 24 位 JPG 和 24 位 PNG

無論是 PC 端還是移動端，評價網站性能的一個主要指標就是頁面載入時間，而圖片佔到了頁面大小的 60%-70%。那麼如何保證圖片質量的前提下，縮小圖片體積，提升網頁載入速度，成為了一件有價值的事情。

如今，JPEG、PNG 以及 GIF 這些格式的圖片已經沒有太大的優化空間。而 Google 推出的 WebP 圖片格式給圖片優化提供了另一種可能。

WebP 是一種支持無損和有損壓縮的圖片格式，派生自圖像編碼格式 VP8。根據 Google 的測試，無損壓縮後的 WebP 比 PNG 文件少了 45％ 的文件大小，即使這些 PNG 文件經過其他壓縮工具壓縮之後，WebP 還是可以減少 28％ 的文件大小。

WebP 現已成為主流網站喜歡的圖片格式，淘寶、豆瓣、京東等網站皆已使用 WebP 圖片以降低成本，提高網頁載入速度。但目前並非所有瀏覽器都支持 WebP，支持的情況參見如下圖所示：

『貳』 SEO網站優化的時候，圖片使用png格式好還是jpg的格式好移動端支持png格式嗎

使用JPG格式好，移動端是支持PNG格式的
在優化網站的時候，jpg是容易被網路收錄，並且符合用戶體驗和瀏覽；對於PNG格式的，移動端是可以展現的，優化上不建議這么做
在圖片優化的同時，需要給圖片一個文字標簽，也就是你滑鼠放上去，可以顯示文字的，這樣搜索引擎才會收錄，也才會有排名。
需要主要的是在SEO優化過程中一定要結合用戶的體驗去做。

『叄』 移動端淘寶上在線聊天發送的圖片是不是原解析度啊

不是,是經過壓縮的。
解析度可以從顯示解析度與圖像解析度兩個方向來分類。

顯示解析度（屏幕解析度）是屏幕圖像的精密度，是指顯示器所能顯示的像素有多少。由於屏幕上的點、線和面都是由像素組成的，顯示器可顯示的像素越多，畫面就越精細，同樣的屏幕區域內能顯示的信息也越多，所以解析度是個非常重要的性能指標之一。可以把整個圖像想像成是一個大型的棋盤，而解析度的表示方式就是所有經線和緯線交叉點的數目。顯示解析度一定的情況下，顯示屏越小圖像越清晰，反之，顯示屏大小固定時，顯示解析度越高圖像越清晰。

圖像解析度則是單位英寸中所包含的像素點數，其定義更趨近於解析度本身的定義。

『肆』 紋理壓縮簡介 DXT PVR ETC

參考
為什麼需要紋理壓縮
移動端紋理壓縮格式
干貨：Unity游戲開發圖片紋理壓縮方案
Creator使用壓縮紋理
常用紋理和紋理壓縮格式
移動設備的紋理壓縮方案
各種移動GPU壓縮紋理的使用方法

在軟體開發，特別是三維應用中，紋理隨處可見，但受限於網路環境和硬體能力，紋理也是一大瓶頸。而且在一般的三維應用中，紋理所佔大小基本都會在1/2以上，模型中往往超過2/3。或許你會說，紋理不就是一張圖嗎，有那麼重要嗎？如下兩張對比圖，可能你會認為前者逼格高，但對於正常人而言，後者顯然要好很多。正是有了紋理，如同在骨架上賦予了皮膚，讓我們的應用更加的逼真，貼近現實。

而你能想像到嗎？如上的模型一共有三張紋理，其中之一效果如下：

紋理的拼接是紋理壓縮的開始，採用不同的壓縮方式對紋理最終的大小影響也是顯著的。比如上面的這張紋理在不同壓縮格式下的大小差別也是非常顯著的（原始文件為tga格式，通過Photoshop轉換為其他格式，默認選項）：

不同於png、jgp這種硬碟壓縮方式而言，DXT,ETC等紋理壓縮方式可以在游戲運行中無需CPU解壓就被GPU直接采樣，可以極大的減少內存和帶寬的佔用，提升運行效率，對移動游戲而言更是如此。

1.DXT

DXT是一種有損紋理壓縮演算法，微軟的Direct中支持，DXT的格式包括DXT1~DXT5，其中DXT1和DXT5較為多見，後面會做詳細討論。可以說DXT是目前應用最廣泛的紋理壓縮格式，可以認為所有的PC端顯卡都支持DXT壓縮，維基網路記錄，該專利有效期到2017年10月2號。

DXT演算法非常容易理解，而且整體看上去效果不錯，但如果對局部特寫，會發現在細節上會有很多丟失，這也是演算法本身導致的，畢竟每個塊只有兩個顏色，而其他顏色都是在這兩個顏色區間的差值，如果當前區域內還有其他顯著顏色則必然會有丟失。

另外一個問題就是DXT3和DXT5之間的對比，相比DXT1不支持透明度（但支持是否透明），DXT5要大一倍（多了64bit），和之前顏色保存方案一樣對透明度也保存了兩個16位的顏色和對應的調色板，對RGBA的效果也得到了保證，但DXT3思路不一樣，它是對每一個像素保存了4bit的透明度，同樣也是多了64bit，但此時畢竟只有16個透明度選項，相比DXT5，在壓縮率上相當，但對透明色的處理不夠細膩，因此在實用性上並不推薦DXT3。

盡管DXT在細節上有明顯硬傷，在總體效果不錯，而且確實是一種強大的壓縮方式，所以在多數紋理壓縮選擇中都是最佳方案，幾乎可以認為是PC下的標准壓縮格式。

2.PVR&ETC
也許是出於專利和商業角度，也許確實DXT在移動端確實無法滿足要求，DXT並沒有在移動端得到很大的支持，相反，在iOS設備中支持的是PVR壓縮，在Android中支持的是ETC壓縮。

DXT在細節上缺陷明顯，最重要的原因是當把紋理分為4*4像素的區域塊後，每個塊之間都是獨立的，盡管這極大的簡化了壓縮演算法，但卻丟失了相鄰塊之間這種普遍的相似性。這是演算法本身導致的，而PVR則會考慮該區域塊對應的右側，下側和右下側的三個區域塊的關聯性。

從現實的角度來看，受制於專利和硬體廠商，我們並沒太多選擇的餘地，Android下就要用ETC，iOS下只能PVR，而在PC上不用DXT估計就要被嘲諷了。但這也是一個很棘手的問題，比如在WebGL下，特別是Android下差異化很大，是否支持紋理壓縮，甚至在同一個設備不同的瀏覽器，因為驅動的不一致，可能系統自帶的會支持ETC壓縮，而微信等QQ瀏覽器下並不支持。而且華為的手機貌似在瀏覽器級別下都不支持ETC（硬體支持，還是驅動的問題）。而如果在移動設備上不用壓縮，顯存是有限的，除非你在數據量上做出犧牲，怎麼解決都很矛盾，相比而言，iOS下則要舒服很多。

Unity官網對每個平台默認的紋理壓縮格式以及使用建議給出了 詳細描述 ，需要注意的是：在不同移動GPU平台下選擇GPU支持的壓縮紋理，就可以在不需要CPU解壓的情況下直接被GPU采樣，節省CPU內存和帶寬，也可以節省存儲的體積。 如果目標平台不支持設置的壓縮格式，紋理將解壓為RGBA32或者RGB24，浪費CPU時間和內存 。

參考 幾種主流貼圖壓縮演算法的實現原理
從IOS9(A8架構)Apple 手機開始支持ASTC壓縮格式 ，如果考慮放棄Apple 6代之前的手機兼容問題了，可以直接使用了。相對於PVRTC2/4而言，ASTC(4X4)的壓縮比會增加到0.25，不過顯示效果也會好很多，而且不需要把圖片設置為方形。

Using ASTC Texture Compression for Game Assets 說明的比較詳細，也給出了一些使用上的建議，即針對不同貼圖類型給出不同的壓縮方案。

1. laya問答 H5游戲能使用壓縮紋理（ETC，PVR等）嗎？
Q:H5游戲能使用壓縮紋理（ETC，PVR等）嗎？
A:部分瀏覽器會不支持（比如safari）
Q:那laya裡面能根據不同瀏覽器（或不同平台）使用不同壓縮格式的紋理嗎？
A:你自己是可以獲取到當前是哪個瀏覽器的，自行處理即可

2. LAYA Runtme目前支持 ETC/DXT或者PVR這類格式嗎?在文檔中沒有找到這類的說明
LayaAir目前暫時還不支持ETC/DXT/PVR這類格式！關注layaAir的版本引擎更新日誌即可，支持了我們會及時告知！

3. Egret 內存分析-RES載入資源後存在雙份內存無法釋放的問題
支持pvr、etc已經在計劃中。

『伍』 手機騰訊文檔導入圖片怎麼縮小

手機騰訊文檔導入圖片縮小的步驟如下：
1、首先打開騰訊文檔，點擊插入。
2、然後點擊圖片。
3、接著選擇要插入的圖片，點擊確定。
4、然後左鍵點擊插入的圖片，並點擊裁剪按鈕。
5、接著拖動裁剪邊框，對圖片進行裁剪。
6、尺寸裁剪完成後，點擊空白處便完成圖片裁剪。
騰訊文檔是一款可多人同時編輯的在線文檔，可以在電腦端（PC客戶端、騰訊文檔網頁版）、移動端（騰訊文檔App、騰訊文檔微信/QQ小程序）、iPad（騰訊文檔APP）等多類型設備上隨時隨地查看和修改文檔。打開網頁就能查看和編輯，雲端實時保存，許可權安全可控。

『陸』 怎麼拍出來的圖片不超過2048 k

拍照片的時候一般是沒有辦法控制圖片大小的，但是可以後期通過app壓縮圖片的大小。壓縮圖片有如下幾種方式：
1.如果是電腦端，電腦里有個畫圖工具，把圖片用畫圖工具打開，什麼都不用操作，直接另存至桌面即可;
2.如果是移動端，可以通過軟體、小程序或網站，如嗨格式壓縮大師，進行圖片壓縮。

『柒』 快速創建VUE移動端上傳圖片功能

主要功能：限制圖片張數、圖片大小壓縮、同時上傳多張、上傳後可編輯刪除、上傳中和上傳失敗狀態顯示。

使用配置：使用vantUI、axios請求經過封裝、安裝image-compressor.js圖片壓縮

npm install image-compressor.js //注意是image-compressor.js不是image-compressor

ps：從父級頁面傳入相應的值到props裡面

『捌』 QQ在線編輯圖片很大

如果放不下的話，可以把圖片進行壓縮。
圖片壓縮是該軟體能批量批量壓縮圖片或者照片，批量調整圖片或照片的尺寸大小，可自定義圖片大小和圖片壓縮質量，支持批量壓縮和圖片大小批量縮小同時處理。
騰訊文檔是一款可多人同時編輯的在線文檔，支持在線Word/Excel/PPT/PDF/收集表多種類型。可以在電腦端（PC客戶端、騰訊文檔網頁版）、移動端（騰訊文檔App、騰訊文檔微信/QQ小程序）、iPad等多類型設備上隨時隨地查看和修改文檔。打開網頁就能查看和編輯，雲端實時保存，許可權安全可控。

『玖』 如何將圖片壓縮到30K以下

電腦上的畫圖就可以，步驟如下：

1、將電子版的圖片放在桌面上，滑鼠放在上面可以看見圖片大小。