❶ webstorm怎麼壓縮css
google的Closure就是一個JS壓縮工具（google暫時好像沒有css壓縮工具），還有雅虎的 YUI Compressor 它是JS/CSS壓縮工具。
它們都是用java寫的工具，用起來就是一行命令，類似於：
java -jar yui.jar --type css --charset utf-8 -o dest.css src.css
❷ Web圖片的常見壓縮格式
本文簡單介紹幾種常見的圖片格式，對比壓縮率和質量。
PNG是一種非常流行的無損壓縮格式，所有的瀏覽器都支持這種格式。 它提供了卓越的圖像質量，但是通常來說壓縮率較低。
本文將使用PNG圖片作為基準，對比其他有損格式壓縮，檢查圖片質量並對圖片質量進行評分。
雖然PNG格式老，體積大，但它仍然在網路上佔有一席之地，尤其是在一些對畫質要求很高的場景。同時對於邊緣非常銳利的圖像（例如包含文本的圖像），也建議選擇PNG。 對此類圖片，PNG壓縮與其他格式（包括有損壓縮）相比，文本圖像使用PNG實際上具有更高的壓縮率，並且具有更好的質量優勢。
PNG有兩種模式：24位或8位顏色深度。 前者用於表示照片，後者用於文本圖像，單色照片或Logo圖像。
BMP只是一個圖像的容器，不提供壓縮。 這是一種格式，主要在圖像處理中使用，譬如說Windows裡面的調色板。
BMP的尺寸很容易計算，譬如說解析度是1920x1080p的RGB圖像，整個的存儲空間大約就是1920 x 1080 x 3 ，大約5MB。可以看得出來，BMP文件的大小明顯大於壓縮格式，包括PNG。通常來說，沒有特殊情況，不應在網站上使用BMP圖片，不過實際情況下網站上還是有很多BMP圖像的。
一般來說，如果想要文件更小，就需要花費更多的處理時間來對文件進行編碼，而解碼時間一般來說相差不大。
回顧一下，BMP圖像質量很好，瀏覽器支持廣泛，但是文件尺寸卻非常大。
GIF作為動畫格式非常流行，不管是微信裡面轉發的動圖表情，還是網站上的動圖，都隨處可見，所有的瀏覽器也都支持GIF圖像。
GIF具有無損壓縮和有損壓縮的混合特性。像素表示形式是無損的，但是顏色深度限制為每個像素8位(即每個圖像轉換為256色，原始的圖像如果是RGB格式的，每個像素實際上使用24位來表示的)。這意味著文件將包含較少的顏色（每個文件最多包含256種不同的顏色），但文件體積更小。 這是24位PNG和8位GIF之間的色彩表示的比較。
可以明顯看到GIF圖像有輪廓效應，這是因為GIF無法表示豐富的色彩。
GIF不適合表示照片或任何其他內容豐富的圖片。但是它們對於簡單的徽標，圖標等很有用，因為這些圖片顏色不多，而且純色居多。根據我的經驗，與GIF相比，8位PNG生成的文件更小，所以對於靜態圖片而言，建議採用8bit PNG。
SVG格式比較特殊，與其他格式有很大不同。 SVG圖像存儲的是幾何形狀，而不是每個像素的值。 它的主要優勢是可以無限放大而不會造成質量損失，具體可以看下圖的對比：
SVG文件類型主要用於徽標，但也用於幾何形狀的圖像。 這種文件的主要缺點是：
對於徽標等小圖片，文件大小通常比PNG或WebP大，尤其對於形狀復雜，不規則的logo。在大多數情況下，無法將圖片有效地轉換為SVG(有一些工具說可以做到這一點，但效果並不理想)。
不論視圖大小如何，SVG文件的圖像質量都很高。 所有現代瀏覽器都支持它。
JPEG是網路圖像的王者。 網路上絕大多數的圖像以JPEG格式存儲，具體的份額可以參考下圖：
什麼使JPEG如此流行？ JPEG文件對於絕大多數文件通常都很小。 它的壓縮使用有損演算法，通過犧牲人眼不太敏感的區域的質量來最小化大小。
這種方法可顯著減小尺寸，通常不會出現明顯的變形。 我們可以對比下JUNO探測器拍攝的這張木星照片。
原始PNG照片(2MB) JPEG最好的質量(1MB) JPEG默認的質量
使用JPEG壓縮，我們可以大幅度縮小尺寸（超過90％），而不會造成質量損失。 當我們放大這些圖片時，質量上也沒有很大的損失。
JPEG並不是對於所有圖像都很管用，如前面介紹PNG時所說的，對於具有銳利邊緣和顏色比較少的圖像，JPEG並不是非常管用。常見的例子就是包含文字的圖片，另一個是徽標：
在這幅圖片裡面，JPEG圖像大約2KB(是PNG文件的兩倍)，同時放大來看，JPEG對於邊緣的表示並不理想，同時顏色也有失真。失真非常明顯，即使在圖像的未縮放部分上也清晰可見。
JPEG有兩種格式，一種是Baseline JPEG，一種是Progressive JPEG.
兩者之間的視覺差異是載入圖像的方式。 隨著數據的到達，Baseline從上到下載入圖像。 Progressive以非常低的質量一次列印整個圖像，並且隨著數據的到達，圖像得到了改善。 這里是展示差異的動畫：
JPEG之外的世界– WebP
JPEG壓縮可以很好地減小文件大小，不過JPG已經過時了。 如您所知，IT開發的幾年就像外面的一個世紀一樣。
最近幾年已經有更新的編碼方法（例如mozJPG），但核心思想保持不變。
同時還有其他的格式在圖像質量和文件大小方面都更好(BPG, JPEG 2000, JPEG XR)，但因為某些格式受專利保護，無法在網路上廣泛使用。
幸運的是，有一個可供公眾使用的WebP。 目前，這種格式由Google開發並開源，並採用無損和有損壓縮以最小化文件大小。許多現代瀏覽器都支持它，但覆蓋范圍仍然存在差距。 截至2018年8月，全球將近75％的用戶使用支持WebP圖像的瀏覽器瀏覽Web。 WebP圖像的文件大小和質量看起來很有希望。除了壓縮性能出色外，它的最大優勢還在於多功能性。 它可以有損和無損壓縮，具有特定的顏色深度，透明度和動畫效果。 它在所有這些領域中也表現出色。
簡單總結下，對於靜態圖片幾種格式的對比如下：
下一篇介紹下常見的動態格式有哪些。
❸ web前端開發都有哪些常見的工具
要知道，無論是對於軟體開發程序員還是說前端編程設計師，每個人手裡都會有大量的資源和工具來使用的。那麼職場新人又如何來積累自己的工具與資源呢?下面，我們就給大家分享了web前端開發的常見工具，一起來了解一下吧。
Brandy
Brandy是一款適用於macOS平台的品牌素材管理工具，你可以使用它來創建LOGO，管理字體和色彩，製作效果。一切都是實時呈現，一個帳號可以管理任意數量的品牌項目。此外，它還可以通過托拽來管理製作，非常方便。
Picular
如果你想搜一個特定物品的色彩，要怎麼辦?Picular這款工具就是這樣一個神奇的工具，你輸入特定的單詞或者短語，它就能給你輸出這個東西對應的色彩。它的工作原理並不復雜，它會通過你的關鍵詞獲取圖片，然後輸出物品本身綜合呈現出來的單一色彩，如果你將色彩懸停在色彩之上，能夠看到源圖片。
Drawser
Drawser是一個在瀏覽器中運行的矢量圖形工具，你能夠直接在屏幕上繪制和編輯，內含豐富的交互功能，你甚至能夠和他人協作來繪制矢量圖片。Drawser還包括社交模塊和社區，用戶能夠發布項目，並且在開源項目中針對這些已經發布的圖片素材進行編輯和優化。
RSSHub
RSSHub是一款輕量級的RSS聚合工具，幾乎可以從任何網站服務中獲取數據，非常簡單易用，可以實現無縫的訂閱體驗。
SVGFilters
SVGFilters是一個非常有趣的SVG游樂場，簡單的點擊幾下，你就能添加不同的效果。切換不同的設置，能夠改變圖片上的效果。生成的SVG文件之後，直接復制相應的代碼即可使用。
CodeSurfer
CodeSurfer是一款用於滾動、縮放和顯示代碼的React組件。你可以突出顯示單行代碼或者多行代碼，縮放長片段，等等。
ShrinkMe
ShrinkMe是一款圖片壓縮應用，可以在幾秒鍾內幫你完成圖片壓縮的工作。將圖片拖到界面中，就可以獲得可下載的、壓縮過的圖片。這款工具可以離線使用，一次壓縮多個文件。
Fake3DEffect
3D效果真的一定需要通過建模來實現嘛?不一定!你可以藉助這款工具製作出模擬的3D的效果和應有的視覺縱深，直接呈現，無需花俏的設備就能實現。
Splitting
Splitting可以幫你使用CSS來創建時尚的文本分割效果。通過創建元素並添加CSS變數的方式，你就能夠實現。它足夠輕量級，易於使用，並且附帶專門的文檔說明。
Tutorial:
BennettFeely在這個教程中，介紹了如何使用不同的CSS屬性來創建混合的背景對象，教程的核心也是關於背景的混合模式。
Food&DrinksIconSet
這是一組包含60個美食和飲料的圖標合集，每個圖標都包含有線性圖標和彩色圖標不同的版本和樣式，下載這些矢量的圖標，開始使用吧。
GradientIcons
GradientIcons是一組100個包含時尚漸變樣式的不同類型圖標，則組圖標的付費版本中包含有1000個圖標，不論免費版還是收費版都非常給力了。
EmojiOne4.0
EmojiOne4.0是一款在2018年重新設計過的表情符號系列，它是根據當下的設計趨勢來重設計的，帶有微妙的漸變和干凈的界面。
BestAnimatedLogos
BestAnimatedLogos是一組高素質的動態圖標，這組圖標涵蓋了Google到Tumblr等著名的企業的LOGO，非常值得學習。
HeardatWork
HeardatWork搜集了工作者們工作期間的真實的表達，這些人大都來自諸如紐約某個設計工作室，有趣，真實，甚至有點沙雕。這個項目是由JustineBraisted所創建的。
TheCarltonDance
TheCarltonDance是一個非常經典也令人發笑的舞蹈，電腦培訓http://www.kmbdqn.cn/發現它源於90年代某個情景喜劇中的角色，有人將它製作成為一個純CSS的動畫，感興趣可以看看~
NerdRobe
NerdRobe是一個專門為設計師設計各種極客襯衫的服務，它每周都會提供新的設計，可以說是對生活的一個非常不錯的補充。
❹ 如何使用Webzip
離線瀏覽工具webzip,可以下載多層網站鏈接，使之可以在本地瀏覽。
WebZIP 是著名的離線瀏覽器軟體，在它的幫助下你能夠完整下載網站的內容，或者你也可以選擇自行設置下載的層數、文件類型、網頁與媒體文件的定位以及網址過濾器，以便按己所需地獲取網站內容。你下載到本地硬碟中的網站內容將仍保持原本的 HTML 格式，其文件名與目錄結構都不會變化，這樣可以准確地提供網站的鏡像。現在使用 WebZIP 中新的 FAR 插件工具，你可以把下載的內容製作成 HTML-幫助文件(.chm)。你也可以把抓取的網站內容壓縮為 ZIP 文件。 用 WebZIP 進行離線瀏覽還可以節省大量的時間，因為從一個鏈接轉到另一個鏈接的速度要比在線時快得多。此外，WebZIP 最大可以同時下載 16 個網頁或圖片，並支持斷點續傳與使用代理伺服器，所以你能夠在較短的時間內獲得大量的信息。總之，WebZIP 是用於發布、參考與離線使用網站素材的優秀工具。
下載地址：http://download.enet.com.cn/html/010102002050901.html
❺ WebZIP是什麼
WebZip是一款集下載、存儲、在線瀏覽及離線瀏覽諸多功能為一體的共享軟體。它的主要功能有：
1.下載一個完整的站點並把它壓縮為一個Zip文件。這種一邊壓縮一邊下載的工作方式是WebZIP的特色。由於下載過程中採用壓縮方式，所以它下載速度特別出色，這一點是其它離線瀏覽工具所無法比擬的。
2.有選擇地下載並壓縮Web站點中所需要的內容。這使我們能夠只下載自己感興趣的內容，把不需要的給過濾掉。
3.WebZIP支持多鏈接下載，即一個站點可以有多條鏈接通道來同時進行下載，這樣進一步提高了下載速度。WebZIP預設是以10條鏈接下載一個站點，你最大可設置為16條。
4.離線瀏覽已下載的Web站點。這是離線瀏覽工具最基本的功能了，如果連這也沒有就是笑話了。不過，這里特別要提出的一點是WebZIP有內置的瀏覽器，這樣你就可直接使用內置的瀏覽器來瀏覽了。
5.智能更新。WebZIP允許讓你只下載新的或變動過的內容，而不用將所有站點信息重新再全部下載，從而快速更新站點內容。
6.智能恢復、繼續。WebZIP允許你在下載過程中隨時中斷，以後你可以從斷點處繼續下載，這很類似文件傳輸中的斷點續傳功能。
7.通過設置，你可以安排WebZIP在某個時間里自動啟動下載站點進程。