❶ web前端网站性能优化怎么压缩传输
压缩可以对纯文本可以压缩至原内容的40%, 从而节省了60%的数据传输,GZIP是一种常用的压缩编码。因此,对文本类型的资源如CSS、JS、HTML启用GZIP压缩加速http传输速度。推荐你去三人行慕课上学习,比较全面
❷ 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图像的文件大小和质量看起来很有希望。除了压缩性能出色外,它的最大优势还在于多功能性。 它可以有损和无损压缩,具有特定的颜色深度,透明度和动画效果。 它在所有这些领域中也表现出色。
简单总结下,对于静态图片几种格式的对比如下:
下一篇介绍下常见的动态格式有哪些。
❸ PS CS6存储为web使用格式中切片压缩处理如何操作
你按键按错了,一般网页切图是按ctrl+shift+alt+s 键也就是键盘的最左边的键位然后输出就可以了,一般品质选百分百,在点上优化按钮就可以了就向我上面一样,如果要压缩个人建议就对品质选一下或者选择格式比如gif,当然我个人建议没有必要选择压缩,因为那样会会对图片原始的psd效果图有差距,我从事前端一两年,这个是我个人经验!!
❹ web网页压缩之后格式变了怎么办
可以把它转换回来。
点击压缩后的文件,右键后选择重命名,把文件名的后缀改成rar,然后鼠标右键,选择解压到该文件夹,就转换回来了。
❺ WEB保存图片被压缩了 怎么处理
压缩的是图片质量,不是图片尺寸。商品详情页不需要特别高的质量要求,这块数字默认是不用更改的。如果实在想存高质量的图片,可以导出为tif格式。