圖片優化工具

lordharrd 發布于2019-05-29 17:48 / 1002人閱讀

摘要：下面就介紹一些這樣的工具吧當然，并不是所有人都使用，那么我們就來看一下獨立的圖片優化工具，你可以根據自己的需要來選擇。

在網頁中運用圖片的成本并非新的問題，只是我們現在把焦點放在了js腳本對頁面加載的阻礙影響當做了罪魁禍首。
Mike Taylor 曾經在throneofjs大會上關于前端性能優化上提出的觀點：

The solution to worrying about JS lib/framework size: include one less .jpg on your site. #throneofjs.
11:05 PM - 22 Jul 2012

在進行圖片優化之前，我們首先應該能夠選擇合適的圖片類型，這樣可以適當地減少圖片的體積。這也是能夠后續優化的前提。選擇合適的圖片類型最主要的就是考慮圖片里面的色彩多寡，其中有一些經驗可以借鑒：

對于照片類型的圖片，因為它里面的顏色比較多，一般要選擇JPG格式，圖片品質在80以上就可以保真

對于圖標，色彩范圍一般都在256位一下，選擇gif格式比較合適

如果對圖片有背景透明的要求，應該選擇PNG格式

對于圖片優化的最優方式，就是能夠盡可能地實現自動化，這樣就可以避免我們分別對每張圖片進行多帶帶處理。

下面就介紹一些這樣的工具吧！

Grunt Tasks

Recompressing JPG/PNG/GIF to save on bytes:

OptiPNG/jpegtran/gifsicle: grunt-contrib-imagemin

ImageOptim-CLI companion: grunt-imageoptim

Convert to WebP: grunt-webp

Spriting to reduce HTTP requests:

grunt-spritefiles

grunt-montage

Prescaling (normalization) to avoid excessive image resize/decode work:

grunt-imageNormalize

grunt-image-resize

Responsive image generation/handling:

Generate multi-resolution images: grunt-responsive-images

Clowncar technique: grunt-clowncar

Inline images as data URIs (careful as costly on mobile):

grunt-image-embed

當然，并不是所有人都使用grunt，那么我們就來看一下獨立的圖片優化工具，你可以根據自己的需要來選擇。

PNG

pngcrush

optipng

advpng

For Windows, see pngout and pngwolf

zopfli-png and Pngnq S9 by Kornel

PNG Quantizer

pngquant ~ recommended

pngnq

JPG

jpegmini

jpegcrush

jpegoptim

jpgtran

GIF

gifsicle.此工具NPM 安裝模塊https://github.com/yeoman/node-gifsicle

GPU云服務器云服務器優化工具圖片優化云主機優化工具 cdn圖片優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/8962.html

Java Web 前端高性能優化（一）

摘要：一引言前端的高性能部分，主要是指減少請求數減少傳輸的數據以及提高用戶體驗，在這個部分，圖片的優化顯得至關重要。 Web 發展的速度讓許多人嘆為觀止，層出不窮的組件、技術，只需要合理的組合、恰當的設置，就可以讓 Web 程序性能不斷飛躍。所有 Web 的思想都是通用的，它們也可以運用到 Java Web。這一系列的文章，主要講解網頁前端性能優化，是與用戶最直接接觸的。事實證明，與其消耗...

lemon 2019-08-14 12:53 評論0 收藏0
<轉載>圖片流量節省60%：基于CDN的sharpP自適應圖片技術實踐

摘要：開啟驗證上傳一張新圖片，使用手安卓版本訪問已支持域名的圖片，如果請求帶了，檢查返回圖片格式是否為如果舊的圖片未按預期返回，返回了或原圖可能是結點緩存，正常天后過期回源則會返回圖片。對于圖片較多的網站，本文結合具體案例給出了如何基于CDN的sharpP自適應圖片無痛接入方案，據統計效果可在原圖基礎上節省60%-75%的流量。作者：陳忱出處：騰云閣文章目前移動端運營素材大部分依賴圖...

JerryZou 2019-06-28 10:53 評論0 收藏0
Google I/O 2016 筆記之圖像壓縮

摘要：寫在前面開發中的圖像壓縮是一個很重要的部分。而這篇文章會讓我們從另外一個角度來認識平臺下的圖像壓縮和優化。所以，它是你圖像壓縮和優化的首選，盡可能的去使用吧。寫在前面 Android開發中的圖像壓縮是一個很重要的部分。而這篇文章會讓我們從另外一個角度來認識Android平臺下的圖像壓縮和優化。這篇文章更適合和設計師一起來看，所以，如果你和你的設計師是好基友的話，不妨叫上他，倒兩杯咖...

BWrong 2019-08-14 14:19 評論0 收藏0