❶ 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在某个时间里自动启动下载站点进程。