首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

每个前端工程师都应该了解的图片知识(长文建议收藏)

构成点阵图的最小单位是像素,位图就是由像素阵列的排列来实现其显示效果的,每个像素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个像素,我们可以改变图像的色相、饱和度、透明度,从而改变图像显示效果...因为有损压缩会导致图片模糊,直接色的选用,又会导致图片文件较GIF更大。 有损耗压缩会使原始图片数据质量下降。 JPEG 图像不支持透明度处理,透明图片需要召唤 PNG 来呈现。...PNG-8 是非常好的 GIF 替代者,在可能的情况下,应该尽可能的使用 PNG-8 不是 GIF,因为在相同的图片效果下,PNG-8 具有更小的文件体积。...除此之外,PNG-8 还支持透明度的调节, GIF 并不支持。现在,除非需要动画的支持,否则我们没有理由使用 GIF 不是 PNG-8。 PNG-24 PNG-24 是 PNG 的直接色版本。...,一个无损压缩的 WebP 图片,如果要支持透明度只需要 22% 的格外文件大小。

1.1K21
您找到你想要的搜索结果了吗?
是的
没有找到

每个前端工程师都应该了解的图片知识(长文建议收藏)

构成点阵图的最小单位是像素,位图就是由像素阵列的排列来实现其显示效果的,每个像素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个像素,我们可以改变图像的色相、饱和度、透明度,从而改变图像显示效果...因为有损压缩会导致图片模糊,直接色的选用,又会导致图片文件较GIF更大。 有损耗压缩会使原始图片数据质量下降。 JPEG 图像不支持透明度处理,透明图片需要召唤 PNG 来呈现。...PNG-8 是非常好的 GIF 替代者,在可能的情况下,应该尽可能的使用 PNG-8 不是 GIF,因为在相同的图片效果下,PNG-8 具有更小的文件体积。...除此之外,PNG-8 还支持透明度的调节, GIF 并不支持。 现在,除非需要动画的支持,否则我们没有理由使用 GIF 不是 PNG-8。 PNG-24 PNG-24 是 PNG 的直接色版本。...,一个无损压缩的 WebP 图片,如果要支持透明度只需要 22% 的格外文件大小。

1.3K20

探索现代图片格式:从GIF到HEIF,优势与适用场景一览

每个像素都有自己的颜色值,是图像最小的可见单元。光栅图格式常见的有JPEG、PNG、WEBP等。 矢量图: 矢量图使用点、线、多边形等几何形状来构图,不是像素。...同时,它也支持透明度,可以创建带有透明背景图像。 广泛兼容性: GIF格式被广泛支持,几乎所有的现代浏览器和图像编辑软件都可以正常显示GIF图像。...缺点: 不支持透明度: JPEG不支持透明度,因此不适合用于制作带有透明背景图像。 压缩损失: JPEG使用有损压缩,图像质量会在一定程度上受损。较高的压缩率会导致更明显的图像失真。...支持透明度和动画: WebP支持完整的透明度和动画功能,使其成为制作动画和带有透明背景图像的理想格式。 缺点: 浏览器兼容性较差: 尽管WebP有许多优点,但并不是所有的浏览器都完全支持它。...在一些旧版本的浏览器中,可能无法正确加载或显示WebP格式的图片。 使用场景: WebP适用于需要高度压缩和带有透明背景或动画效果的图像。它特别适用于网页图像、动画图像,以及对文件大小敏感的场景。

43810

位图矢量图GIFPNGJPEGWEBP一网打尽

还有一点,再多啰嗦点,不知道大家看到Raster/Bitmap是不是感觉在哪里见过。(如果大家看过之前的像素是怎样练成的)。 也就是说栅格图/位图是浏览器内置的一种显示格式。大千世界,就是这么神奇。...❝矢量图不是基于像素的,这意味着在调整大小时不受限制。它们是分辨率独立的 - 我们可以调整矢量图形的大小不会丢失质量或出现视觉伪影。...❝一言以蔽之:位图能够表现更多的色彩能力,但是它的文件较大并且对显示媒介的分辨率依赖性极强,矢量图在牺牲了色彩细节,但是它具有很高的延展性。 ❞ 下面,我们就介绍一下我们常见的图片格式。 2....❝PNG是用于徽标、图标、透明背景、具有硬边缘的图形以及颜色较少和/或包含文本的图像的理想选择。...❞ WebP 来自维基百科的介绍 - WebP[7] WebP是一种用于网络的图像格式,旨在显示高质量但文件大小较小的图像,以改善加载时间。它可以根据我们的需要进行有损或无损压缩。

4910

网站图片优化

轮播图 Banner图 缺陷 处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时,人为压缩导致的图片模糊会相当明显 不支持透明度处理,透明图片需要召唤 PNG 来呈现 用 MozJPEG...缺点 体积太大 应用场景 呈现小的 Logo、颜色简单且对比强烈的图片或背景等 使用 pngquant 优化 PNG 图像 1.npm install imagemin-pngquant 2....WebP 优点 像 JPEG 一样对细节丰富的图片信手拈来,像 PNG 一样支持透明,像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身 官方介绍 与 PNG 相比,WebP 无损图像的尺寸缩小了...在等效的 SSIM 质量指数下,WebP 有损图像比同类 JPEG 图像小25-34%。 无损 WebP 支持透明度(也称为 alpha 通道),仅需 22% 的额外字节。...对于有损 RGB 压缩可接受的情况,有损 WebP 也支持透明度,与 PNG 相比,通常提供 3 倍的文件大小。

1.5K30

WebP原理和Android支持现状介绍

图像数据包含一帧数据,由以下组成: 一个可选的透明度子chunk 1个比特流子chunk 对于动态图像图像数据则包含多帧数据。...置0时,处理完前面一帧图像后,使用透明混合。置1时,不混合,渲染时直接覆盖矩形区域。 Disposal method (D):标识该帧数据在被显示后如何处理画布。...置0时不处理;置1时将画布矩形区域转换成ANIM定义的背景颜色。 Frame Data:以2字节为单位,包含图像比特流数据以及可选的透明度数据。 Alpha ?...WebP在编码时占用内存比PNG高25%,解码时比PNG低30%。...优势: WebP支持24位RGB和8位透明通道,GIF仅支持8位色彩及1位透明度WebP支持无损和有损两种模式,而且对于动态图,能同时结合有损和无损的图片。GIF仅支持无损的压缩。

4.2K80

现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用

这个很关键,很多人对待图片容易忽视图片的编解码性能,解码图像主要从图像文件中读出图像数据,编码则是将图像数据写入图像文件。解码与编码的过程正好相反。而这两者的性能耗时会影响我们页面的的展示性能。...索引颜色是一种以有限的方式管理数字图像颜色的技术,以节省计算机内存和文件存储,同时加速显示刷新和文件传输。...支持动画效果(像 GIF 一样) WebP 主要优势在于有损编码,其无损编码的性能和压缩比表现一般 WebP 的缺点在于其编解码性能不是特别理想 在兼容性方面,除了 IE,基本已经得到了全系列浏览器支持...相近质量的图片解码速度 WebP 相距 JPEG 也已经相差不大了,文件压缩比却能提升不少。... 元素通过包含零或多个 元素和一个 元素来为不同的显示/设备场景提供图像版本。

92410

QQ隐藏图原理与C#实现(含源文件)

QQ群聊的背景色为白色,打开图片后的背景色为黑色,如果能巧妙修改图片各个像素的透明度,就可以达到在不同背景显示出不同图片的功能。...原来之前的灰度图中,使用灰色像素来显示白图,在白色背景下通过不透明度让灰色像素显示,而在黑色背景下,灰色像素有颜色优势,无论不透明度是多少都不影响它在黑色背景下隐藏。...但是彩色像素就不一样了,如果不透明度太大,会导致它在黑色背景下无法隐藏,最终出现两个图显示在一起的效果。...对于黑图,它想要在黑色背景显示,因此灰度值越大(颜色越白),不透明度越高,即不透明度与灰度值也成正比,我们也用上面那式子来代入计算, 得到 alpha = G,这是黑图的计算方法。...据我所知,目前最新版QQ的默认背景不是纯白,因此直接使用我的源文件可能会出现显示异常,你可以对我的源文件进行修改,使之能够适应最新版QQ背景颜色。

1.5K10

图片该如何优化来提高网站的性能,这里提供几种方法

此外,JPEG 图像不支持透明度处理,透明图片需要召唤 PNG 来呈现。...按照我们前置知识里提到的对应关系,8 位的 PNG 最多支持 256 种颜色, 24 位的可以呈现约 1600 万种颜色。...看一看,自己判断一下: 原图(913kb) 优化后的图像(187kb) WebP WebP 的优点 WebP 像 JPEG 一样对细节丰富的图片信手拈来,像 PNG 一样支持透明,像 GIF 一样可以显示动态图片...无损 WebP 支持透明度(也称为 alpha 通道),仅需 22% 的额外字节。对于有损 RGB 压缩可接受的情况,有损 WebP 也支持透明度,与 PNG 相比,通常提供 3 倍的文件大小。...Webp 图片并显示它,而其他浏览器将下载 JPEG 图片。

1K20

Android 优化——应用瘦身

Android 优化目录 ---- 图片资源处理 不要有大于 1MB 的图片,若有需要压缩 PNG 有透明通道,无损压缩,可以硬件加速,但对于一些不会有透明度的大图,比如引导图,背景图仍然可以选择用...JPG 格式的 减少预置图片 使用 WebP 格式图片 图片压缩 无损 ImageOptim 有损 ImageAlpha,TinyPNG PNG/JPEG 转 WebP,智图,iSparta 4.0...,尺寸更小,且可压缩性更强,SVG 图就相当于保存了关键的数据点,比如要显示一个圆,需要知道圆心和半径,那么 SVG 就只保存圆心坐标和半径数据,平常用的位图都是以像素点的形式根据图片大小保存对应个数的像素点...,因而 SVG 尺寸更小 SVG 是可伸缩的,平常使用的位图拉伸会发虚,压缩会变形, SVG 格式图片保存数据进行运算展示,不管多大多少,可以不失真显示 SVG 图像可在任何的分辨率下被高质量地打印...SVG 可在图像质量不下降的情况下被放大 SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图) SVG 可以与 Java 技术一起运行 SVG 是开放的标准 SVG 文件是纯粹的 XML 内嵌音频文件不要太大

92211

Adobe Photoshop,选择图像中的颜色范围

(由于此技术在颜色混合中选择了部分颜色,因此结果不是很明显。) 您也可以选择肤色,并且可以自动检测人脸以选择肤色。...3.选择显示选项: 选区预览由于对图像中的颜色进行取样得到的选区。默认情况下,白色区域是选定的像素,黑色区域是未选定的像素,灰色区域则是部门选定的像素。 图像预览整个图像。...例如,图像在前景和背景中都包含一束黄色的花,但您只想选择前景中的花。对前景中的花进行颜色取样,并缩小范围,以避免选中背景中有相似颜色的花。...6.若要在图像窗口中预览选区,请选取“选区预览”选项: 无显示原始图像。 灰度完全选定的像素显示为白色,部分选定的像素显示为灰色,未选定的像素显示黑色。...黑色杂边对选定的像素显示原始图像,对未选定的像素显示黑色。此选项适用于明亮的图像。 白色杂边对选定的像素显示原始图像,对未选定的像素显示白色。此选项适用于暗图像

11K50

时至今日,浏览器色彩居然仍旧失真?

失真现象包括色彩、透明度和缩放比例,在图像、CSS、SVG都有失真。...,黑色为75%的不透明度 在25%的透明度下叠加明亮的颜色,应该是为了正确地染上底层的黑暗区域,像灯光照在投影屏幕上一样洗掉它们。...透明度混合需要像本例中那样工作,以便像字体和形状抗锯齿这样的东西能够正常工作并看起来正确,在不同的背景颜色下具有一致的重量和平滑的边缘。...你的浏览器透明度失真情况 post15image5.png PNG的透明度 post15image6.png CSS rgba()背景 post15image7.png CSS的不透明度 post15image8...图像在缩小时应保持相同的整体亮度。不正确的渲染使最小的图像过于黑暗。 如果你有一个HiDPI显示器或正在使用缩放功能,你的浏览器已经在缩放了(不正确的),全尺寸的图像看起来会有问题。

4.3K177

【学习图片】08:WebP

后来,该格式的更新引入了无损压缩、类似PNG的阿尔法通道透明度和类似GIF的动画等选项,所有这些都可以与JPEG式的有损压缩同时使用。WebP是一种非常多才多艺的格式。...WebP的有损压缩算法基于VP8视频编解码器用于压缩视频关键帧的方法。从高层次来看,它类似于JPEG编码:WebP以“块”为单位操作,不是单个像素,并且具有类似亮度和色度之间的分割。...然后将编码在文件中的预期图像与预测之间的差异应用于预测值 - 类似于Git提交代表一个差异补丁,被应用在本地文件上,不是一个全新的文件副本。...图片左上角的低频信息——模糊的绿色背景叶子——看起来很糟糕。即使是一个没有经过专业训练的观众也会立即注意到质量问题——背景中微妙的渐变被压缩成了锯齿状、纯色的块。...WebP给我们相同的文件大小,但是更高质量的图像——除了一些我们的心理视觉系统如果不是这样紧密比较就无法察觉到的微小细节。

76610

动态图片技术 : 历史、格式与性能

各操作的执行时机与原始数据的读取进度通过背景色一一对应。 生成的字典 2.1.2 透明、动态图片特性 GIF 支持透明色,不支持透明度和 Alpha 通道。...但不是 PNG 的官方标准。 目前的支持情况:Android 未原生支持,iOS 8 以上版本的 Safari 支持,Chromium 即将支持。...一个分块的内容可以通过其周边的块预测;可通过预测获得的部分就可以直接记录预测方式,不记录实际色值。...可适应的块量化 2.3.3 透明、动态图片特性 WebP 支持透明度通道,也有对透明度的完整支持。但有损 WebP透明度通道上的实现与传统格式有所区别。...有损 WebP 包含一个专门存储透明度通道的分区。独立透明度通道分区也可以针对性地优化图片的占用空间。

3.1K00

撩妹技能 get,教你用 canvas 画一场流星雨

流星经过的地方会越来越模糊最后消失不见,那有没有可以让画布画的图像每过一帧就变模糊一点不是全部清除的办法?如果可以这样,就可以把每一帧用线段画一小段流星的运动轨迹,最后画出流星的效果。 骗纸!...先不急着激动,这个流星雨有点单调,可以看到上面的代码中,每一帧,我们用了透明度为 0.2 的黑色刷了一遍画布,背景漆黑一片,如果说我们的需求是透明背景呢?...是不是豁然开朗,一目了然? 对于我们来说,原图像是每一帧画完的所有流星,目标图像是画完流星之后半透明覆盖画布的黑色矩形。...而我们每一帧要保留的就是,上一帧 0.8 透明度的流星,覆盖画布黑色矩形我们不能显示。...destination-in :只保留了源图像(矩形)和目标图像(圆)交集区域的源图像 destination-out:只保留了源图像(矩形)减去目标图像(圆)之后区域的源图像 上述示例目标图像透明度

88821

如何使虚拟现实体验更加真实?(下)

例如,像 Microsoft HoloLens 这样的光学透视显示器无法渲染黑色值,因为它们依靠附加光来创建虚拟图像。...首先是他们无法通过在场景中添加光线来正确渲染黑色。除非处于非常黑暗的场景中,否则通常需要将光线移开才能在这些类型的显示器上显示黑色图像。...当使用传统的亮模式用户界面(左)时,黑色的字母从背景中消失,当使用暗模式用户界面(右)时,背景看起来完全透明。...虽然这对于室内或光线昏暗的环境通常不是问题,但如果用户处于一个有大量环境光的区域,如晴天的户外,那么虚拟图像可能会失去对比度,以至于可能出现被冲淡甚至完全透明。...在我们进行的用户调研中,我们的参与者在他们自己的平板显示器上查看VR图像不是使用全息透镜,这会产生一定的误差。

1.3K20

纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

它是作为默认主题(浅色主题)的一个补充模式存在。 深色主题将会降低设备屏幕的显示亮度,同时仍保持最低程度的色彩对比度。...在APP的顶部菜单中显示主题开关 ? 在弹出菜单的菜单层中显示开关 ? 在APP的设置列表当中显示开关 属性 深色主题使用的是深灰色,不是黑色来作为主要的色彩。...为了确保深色主题中色彩具有足够高的灵活性和可用性,建议在深色主题中选取较浅的色调(色彩饱和度范围在200-50之间),不是默认情况下的色彩主题(色彩饱和度范围从900-500之间)。...深色主题的色彩应该足以覆盖整个深色主题的UI界面,包括: 色彩(主色、次要色以及色彩变体) 界面主体(背景和控件) 状态呈现(比如报错状态) 内容呈现(字体排版和图像) ?...在深色背景上的浅色文本 当浅色文本出现在深色背景上的时候(这里是白色文本置于黑色背景之上),它应该遵循下面的不透明度设置规则: 最重要的内容,白色文本不透明度设置为87% 中等重要的内容,白色文本的不透明度

9.5K10

python图像处理-个性化头像

这里的putalpha正常里面是放入一个0-255的数字的,表示要将这整张图片设置为透明度为多少,这是方式对于整张图片都更改透明度非常方便,但是对于更改局部或者特定形状部分的透明度就不行了;这里使用另外一种方式...,传入一张灰度图模式的圆形图片(灰度图是黑白图片,灰度0是显示黑色的,灰度255是显示白色的),猫的圆形外的透明度就被设置成黑色所代表的数值0,0在透明度中是表示完全透明的,最终猫的圆外就变成透明了,...里面白色部分不透明显示出一个圆形。...上面的效果并不是我们想要的,paste除了上面两个参数,还有第三个参数蒙版图像,这里要注意蒙版图像和putalpha的图像有所区别,中间是黑色,边缘是白色;因为蒙版的运行原理是,灰度图黑色时数值是0,表示透明度就是完全透明的意思...,白色数值是255,表示透明图是完全不透明,所以整个效果就是黑色部分会透明显示出下面一层的猫,白色部分不透明也就保留原来效果。

1.1K10

Emacs 29快到了!我们能期待什么

支持 Webp 图片 很长一段时间以来,Emacs 已经能够显示图像,但 webp 还不行。好吧,现在已经解决了!...事实上,对 webp 图像的支持已成为默认行为,因为您需要传递--without-webp给 Emacs 的配置脚本以禁用 webp 支持。 C++ 模式现在支持 C++20 标准 是的。...真正的背景透明度 直到最近,如果您想使用 Emacs 实现透明度,您别无选择,只能使整个框架透明,包括文本和图像。...由于 frame 参数alpha-background及其相关的alphaBackgroundX 资源,现在可以只为框架的背景设置透明度不会影响屏幕上的任何其他元素。...然而,其他格式仍然依赖其他依赖项和库才能正常工作,例如 Webp 图像。 下一步是什么? 随着 Emacs 29 分支被创建出来,master 分支上的开发现在将转向 Emacs 30。

2.4K20
领券