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

【优化】1338- 分享一下图像优化原理

使用CSS比同等视觉效果的图像资源的字节数要小非常多,这是毋庸置疑的。另一个好处是CSS不受分辨率影响,使用CSS渲染出的视觉效果可以在任何分辨率和缩放级别下始终清晰地显示。...首先,本文会介绍两种图像资源:矢量图与栅格图(位图),并分别介绍优化它们的原理。随后介绍无损压缩与有损压缩以及它们的区别。在本文的最后,我们会介绍什么是高分辨率屏幕。...希望通过本篇文章的介绍,可以让您对图像优化的原理有一个直观的感受。 1. 矢量图与栅格图(位图) 矢量图与栅格图(位图)是两种不同的图像格式。...以矢量图为例,程序绘制一个半径为r的圆所需的主要信息是: 半径r 圆心坐标 轮廓样式与颜色(可能是透明) 填充样式与颜色(可能是透明) 矢量图的内容是这些绘制相关的关键信息,同样的图像如果是栅格图(位图...如果我们将色彩深度调整为 RGB 通道一共只需要 8 位,那么加上 Alpha 透明度通道的 8 位,一共为 16 位,也就是说每个像素两个字节(16位 = 2个字节),与原来每个像素 4 个字节相比,

85900

位图矢量图GIFPNGJPEGWEBP一网打尽

❝想把一件事做好,那就先把眼前的小事攻克 ❞ 大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。 前言 最近,在做项目资源打包优化。...如果我们项目中如果对图像展示有较高的要求,那么我们就需要选择位图,但是由于其文件资源较大,我们在兼顾展示的情况下还需要做一点的优化处理。...它保留了图像的所有细节,并拥有1600万种颜色,因此非常适合复杂的视觉效果。PNG文件可以在几乎任何图像查看器、网络浏览器和图形工具中查看。...在动画领域,GIF相比PNG有更好的展示效果,所以优先选择GIF格式。PNG旨在成为单一图像格式,并不用于创建动画图形。...在进行GIF与JPEG比较时,图像质量和文件大小是考虑的两个主要因素。 ❝如前所述,GIF和JPEG之间的一个显著区别是JPEG在压缩时会丢失数据,而GIF使用的是无损压缩算法。

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

    emwin教程_emwin教程

    相反流位图可放置在任何存储器中,并可按照与 C 文件位图相同的方式使用 (1)BmpCvt[位图转换器] 作用将位图从PC格式转换为C文件,emwin可使用的位图在C文件中定义为 GUI_BITMAP...; 2) YSize:位图的高度; 3) BytesPerLine:位图图像每一行的字节数,该参数与位图的宽度和颜色格式有关, 假设位图使用的颜色格式是 ARGB8888,乘上图片的宽度,就是图像每一行的字节数...; 4) BitsPerPixel:位图图像单个像素所占的位数,该参数和上一个参数都与位图的宽 度和颜色格式有关,假设位图使用的颜色格式是 ARGB8888,那么图像单个像素数据就 占 32 位; 5)...还是刚才的 RGB565 像素格式,这次我交换红色和蓝色的存放顺序,就变成了另一种像素格式 BGR565,但色彩深度还是 16 位 重要颜色API GUI_SetBkColor() 设置背景色颜色...窗口的特点: 是矩形的; 有一个 Z 位置; 可能隐藏或显示; 可能包含有效和/或无效区域; 可能有也可能没有透明度; 可能有也可能没有回调函数。

    5.4K40

    常见图片文件格式简析下载_图片的文件格式有哪些

    16位图像使用2字节保存颜色值,常见有两种格式:5位红5位绿5位蓝和5位红6位绿5位蓝,即555格式和565格式。555格式只使用了15位,最后一位保留,设为0。...也就是说,JPEG图像存储格式既满足了人眼对色彩和分辨率的要求,又适当的去除了图像中很难被人眼所分辨出的色彩,在图像的清晰与大小中JPEG找到了一个很好的平衡点。...GIF文件的数据,是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右,它不属于任何应用程序。目前几乎所有相关软件都支持它,公共领域有大量的软件在使用GIF图像文件。...GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。...PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可,所以被广泛应用于互联网及其他方面上。 PNG另一个非正式的名称来源为递归缩写:“PNG is Not GIF”。

    1.2K20

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

    在对图片有了基本的了解之后,接下来对图片进行分下类,有利于理解各种格式图片的特点。 根据图的类型分类 点阵图(位图) 矢量图 位图(点阵图) 位图,也叫做点阵图,像素图。...构成点阵图的最小单位是像素,位图就是由像素阵列的排列来实现其显示效果的,每个像素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个像素,我们可以改变图像的色相、饱和度、透明度,从而改变图像的显示效果...其压缩率一般在 50% 左右,它不属于任何应用程序所以几乎所有相关软件都支持它,公共领域有大量的软件在使用 GIF 图像文件。...SVG 可以与 JavaScript 技术一起运行 SVG图形格式支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。 SVG图形格式可以用来动态生成图形。...由于图片相关的知识确实太多了,我只是把一些我觉得必要的写出来,下面在网上找到了一个选择图片过程的表格和图,下次不知道选择什么图片格式,直接看图就行。

    1.1K21

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

    在对图片有了基本的了解之后,接下来对图片进行分下类,有利于理解各种格式图片的特点。 根据图的类型分类 点阵图(位图) 矢量图 位图(点阵图) 位图,也叫做点阵图,像素图。...构成点阵图的最小单位是像素,位图就是由像素阵列的排列来实现其显示效果的,每个像素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个像素,我们可以改变图像的色相、饱和度、透明度,从而改变图像的显示效果...其压缩率一般在 50% 左右,它不属于任何应用程序所以几乎所有相关软件都支持它,公共领域有大量的软件在使用 GIF 图像文件。...SVG 可以与 JavaScript 技术一起运行 SVG图形格式支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。 SVG图形格式可以用来动态生成图形。...参考链接 赵鑫 真彩色与伪彩色、直接色的区别 10 个免费的图像压缩优化工具和脚本 网页中图片格式的选择 「一个有温度的前端号」

    1.4K20

    【STM32H7教程】第56章 STM32H7的DMA2D应用之刷色块,位图和Alpha混合

    将前景层里面起始坐标(40,30),长480,高272的数据与背景层里面起始坐标(50,40),长480,高272的数据复制到输出区起始地址(60,50),长480,高272的区域。...56.3.4   转换PNG图片为RGB565格式位图 转换方法与56.4.1小节相似,主要下面两个地方不同:   第1点不同:使用电脑端的画图小软件将前面下载的图标转换为BMP格式(PNG图片中的透明通道会滤被掉...第4个图:两个位图混合。 第5个图:Alpha透明度200的位图显示。 第6个图:Alpha透明度100的位图显示。...第4个图:两个位图混合。 第5个图:Alpha透明度200的位图显示。 第6个图:Alpha透明度100的位图显示。...LCD第2个图:显示ARGB8888位图。   LCD第3个图:显示RGB565位图。   LCD第4个图:两个位图混合。   LCD第5个图:Alpha透明度200的位图显示。

    1.3K10

    关于图片,我有话说

    分辨率决定了位图细节的精细程度,通常情况下,分辨率越高包含的像素就越高,图像就越清晰。 像素:是指在由一个数字序列表示的图像中的一个最小单位,称为像素。...例如1x1英寸的两个图像,分辨率为72ppi的图像包含72x72=5184个像素,而分辨率为300ppi的图像则包含300x300=90000个像素。...opacity 和 transparency 才和透明度有关,前者是不透明度,后者是透明度。比如 css 中的「opacity: 0.5」就是设定元素有 50% 的不透明度。...也就是说,「Alpha 通道」储存一个值,其外在表现是「透明度」,Alpha 和透明度没啥关系。 .png: 常用格式 - 带透明通道的无损图片格式!...PNG文件采用LZ77算法的派生算法进行压缩,其结果是获得高的压缩比,不损失数据。.png格式的图片有一个「Alpha通道」。

    50310

    CImage 类

    大家好,又见面了,我是你们的朋友全栈君。 CImage 提供增强的位图支持,包括加载和保存采用 JPEG、GIF、BMP 和可移植网络图形格式的图像 (PNG) 格式。...因为一次只能选择一个 ,所以不能将与 关联的 HBITMAPHDCHBITMAPCImage 选定到另一个 HDC 中。...pszAllFilesDescription 如果此参数不是 NULL ,则筛选器字符串将在列表的开头有一个附加筛选器。...如果返回值为正,则位图为自顶向下的 DIB,其原点为左上角。 注解 螺距是两个内存地址之间的距离(以字节为单位),表示一个位图行的开头和下一个位图行的开头。...例如,如果图像格式具有每个像素4位的,则 GetPixelAddress 返回字节中第一个像素的地址,并且必须计算每个字节2个像素。 备注 此方法仅支持 DIB 节位图。

    3.4K40

    Bitmap图片压缩,大图加载防止OOM

    32位和24位能表示的颜色一样多,多一个了透明度。 Android Bitmap使用的三种颜色格式:ALPHA_8–每个像素占1个字节,存储透明度信息,没有颜色信息。...ARGB_8888--每个像素占4个字节存储颜色信息,A R G B各一个字节,能表示2^24种颜色,还有一个字节存储透明度信息。...先看一些基础知识(后面有答案) Android官网-提供备用位图 这篇文章链接中的有讲到: 要在像素密度不同的设备上提供良好的图形质量,您应该以相应的分辨率在应用中提供每个位图的多个版本(针对每个密度级别提供一个版本...之后,每当您引用@drawable/xxx时,系统都会根据屏幕的 dpi 选择适当的位图。如果您没有为某个密度提供特定于密度的资源,那么系统会选取下一个最佳匹配项并对其进行缩放以适合屏幕。...比如采样率设置为 1/2 ,所以是两个像素生成一个像素。邻近采样的方式比较粗暴,直接选择其中的一个像素作为生成像素,另一个像素直接抛弃。

    2.8K00

    Bitmap图片压缩,大图加载防止OOM

    32位和24位能表示的颜色一样多,多一个了透明度。 Android Bitmap使用的三种颜色格式: ALPHA_8–每个像素占1个字节,存储透明度信息,没有颜色信息。...ARGB_8888--每个像素占4个字节存储颜色信息,A R G B各一个字节,能表示2^24种颜色,还有一个字节存储透明度信息。...先看一些基础知识(后面有答案) Android官网-提供备用位图 这篇文章链接中的有讲到: 要在像素密度不同的设备上提供良好的图形质量,您应该以相应的分辨率在应用中提供每个位图的多个版本(针对每个密度级别提供一个版本...之后,每当您引用@drawable/xxx时,系统都会根据屏幕的 dpi 选择适当的位图。如果您没有为某个密度提供特定于密度的资源,那么系统会选取下一个最佳匹配项并对其进行缩放以适合屏幕。...比如采样率设置为 1/2 ,所以是两个像素生成一个像素。邻近采样的方式比较粗暴,直接选择其中的一个像素作为生成像素,另一个像素直接抛弃。

    2K20

    photoshop学习笔记

    CTRL+S 可以把内容存储起来 另存为:CTRL+SHIFT+S,把文件重新保存一份 默认的格式:PSD(源文件格式) 打开的方式:CTRL+O 把文档拖拽至软件中也可以打开 (六):移动选取与移动内容的区别...曲线路径的绘制:选择属性栏的“路径”,点击确定第一个锚点,再次单击并拖拽,通过调整控制手柄来调 整曲线的弧度,再次单击并拖拽,直到闭合。...—图案——自定义图案——最后一个 (一)矢量图与位图 矢量图:由点,线,形,以数学矢量方式来记录的图形。...特点:放大不失真 位图:是由像素来构成的图像 特点:放大失真 (二)选区绘制的形状与形状工具绘制的形状的区别 选区绘制的属于位图:需要新建图层,放大会失真 形状工具绘制的属于矢量图:不需要新建图层,...通道中白色表示相应的色值达到最大,黑色表示相应的色值达到最小, 灰色表示有相应的色值,越靠近白色,色值越大,越靠近黑色,色值越小 (四)调色和校色 校色:当图像偏色时,通过调色工具对其进行校正 调色:把图像从一个色调调整到另一个色调

    3.2K20

    【STM32F429】第6章 ThreadX GUIX上手之STM32F429 DMA2D加速

    DMA2D可以直接绘制ARGB8888,RGB565颜色格式位图,并且可以方便的做各种透明效果和图像混合显示。 LCD的加速全靠DMA2D,所以务必要熟练掌握其用法。...将前景层里面起始坐标(40,30),长480,高272的数据与背景层里面起始坐标(50,40),长480,高272的数据复制到输出区起始地址(60,50),长480,高272的区域。...6.3.4 转换PNG图片为RGB565格式位图 转换方法与56.4.1小节相似,主要下面两个地方不同: 第1点不同:使用电脑端的画图小软件将前面下载的图标转换为BMP格式(PNG图片中的透明通道会滤被掉...6.6 实验例程设计框架 通过程序设计框架,让大家先对配套例程有一个全面的认识,然后再理解细节,本次实验例程的设计框架如下: ?...第4个图:两个位图混合。 第5个图:Alpha透明度200的位图显示。 第6个图:Alpha透明度100的位图显示。 LCD界面显示效果如下: ?

    75810

    【STM32H7】第6章 ThreadX GUIX上手之STM32H7 DMA2D加速

    DMA2D可以直接绘制ARGB8888,RGB565颜色格式位图,并且可以方便的做各种透明效果和图像混合显示。 LCD的加速全靠DMA2D,所以务必要熟练掌握其用法。...将前景层里面起始坐标(40,30),长480,高272的数据与背景层里面起始坐标(50,40),长480,高272的数据复制到输出区起始地址(60,50),长480,高272的区域。...6.3.4 转换PNG图片为RGB565格式位图 转换方法与56.4.1小节相似,主要下面两个地方不同: 第1点不同:使用电脑端的画图小软件将前面下载的图标转换为BMP格式(PNG图片中的透明通道会滤被掉...6.6 实验例程设计框架 通过程序设计框架,让大家先对配套例程有一个全面的认识,然后再理解细节,本次实验例程的设计框架如下: ?...第4个图:两个位图混合。 第5个图:Alpha透明度200的位图显示。 第6个图:Alpha透明度100的位图显示。 LCD界面显示效果如下: ?

    62620

    【说站】ps文件格式

    Photoshop 格式 (PSD) 是默认的文件格式,扩展名为“.psd”,而且是除大型文档格式 (PSB) 之外支持所有 Photoshop 功能的唯一格式。 2、TIFF标记图像文件格式。...标记图像文件格式(TIFF、TIF)用于在应用程序和计算机平台之间交换文件。 TIFF 是一种灵活的位图图像格式,受几乎所有的绘画、图像编辑和页面排版应用程序的支持。...JPEG格式支持 CMYK、RGB 和灰度颜色模式,但不支持透明度。 JPEG以24位色存储单个光栅图像,支持最高级别的压缩,不过这种压缩是有损耗的。JPEG 图像在打开时自动解压缩。...压缩级别越高,得到的图像品质越低;压缩级别越低,得到的图像品质越高。 4、GIF是压缩位图格式。 GIF分为静态GIF和动态GIF,是一种压缩位图格式,支持透明背景图像,适用于多种操作系统。...便携网络图形 (PNG) 格式是作为 GIF 的无专利替代品开发的,用于无损压缩和在 Web 上显示图像。与 GIF 不同,PNG 支持 24 位图像并产生无锯齿状边缘的背景透明度。

    1.5K40

    photoshop软件安装及名词解释(内附软件下载地址)

    总的来说就是:运行安装程序->断网试用->安装->打开软件->覆盖破解下面开始介绍几个小概念位图与矢量图这个概念应该在大计基上讲过,位图就是像素图,通过一个个像素格子填充颜色组合成大图,所以不停放大后会出现马赛克的效果...总的来说,位图经不起放大,矢量图可以无限放大;PS做的图基本都是位图,矢量图的常用软件有AI等;常见的jpg、png格式都是位图,矢量图的常用格式为pdf。...图片格式这里只说常见的位图格式:JPG、PNG、GIF简单的说,保存透明的格式用png,动图用gif,一般情况都可以用jpg更专业解释以及其他格式请自行百度尺寸与分辨率在PS里选择“文件”->“新建”(...另一个参数叫做分辨率(dpi)。根据之前位图的概念来看,像素格子越多,图片越经得起放大,分辨率就是描述这个像素格子多少的一个参数。...最核心的一个功能,它就像一张张透明的纸,纸上有不同的图像,然后所有纸摞在一起。

    56900

    Android-Bitmap

    位图是Windows标准格式图形文件,它将图像定义为由点(像素)组成,每个点可以由多种色彩表示,包括2、4、8、16、24和32位色彩。位图文件是非压缩格式的,需要占用较大存储空间。...而当我们通过代码,将这张图片加载进内存时,会先解析图片文件本身的数据格式,然后还原为位图,也就是 Bitmap 对象,Bitmap 的大小取决于像素点的数据格式以及分辨率两个因素。...ALPHA_8含义:ALPHA代表该像素只保存透明度,所以其每单位像素的计算公式为: 单位像素ALPHA_8占位计算为8bit等于1byte内存 Android中图片有四种颜色格式 ?...image 我们在对图片的8位,16位,32位做一个说明,讲一下区别(只是部分区别): 拿8位来说,它表示2的8次方,意味着有256种灰度或彩色组合,同样16位就是2的16次方,意味有65536种可能的颜色组合等...16位图像相比8位图像有较好的色彩过渡,更加细腻,携带的色彩信息可以更加丰富。其他位类同。 如果一个8位图像有10MB大小,它变成16时,大小就要翻一翻变成20MB。其他位类同。

    1.4K20

    前端切图-PhotoShop软件使用教程(png+jpg格式图片)

    你可以鼠标左键点住“裁剪工具”不松手,他会在右边展开(我这是工具栏在ps界面左侧的情况下)这一组的所有工具,在里边选择“切片工具”即可 我图中之所以框选了两个工具,是因为后期还要用到“切片选择工具”...+alt+s) 9.选择png-8/png-24格式,看你对图标的要求了 PNG8”是指8位索引色位图,“PNG24”是24位索引色位图; png8: 每一张“png8”图像,都最多只能展示256种颜色...,所以“png8”格式更适合那些颜色比较单一的图像, 例如纯色、logo、图标等;因为颜色数量少,所以图片的体积也会更小; png24: 每一张“png24”图像,可展示的颜色就远远多于“png8”了,...Png-8的透明度位置 Png-24的透明度位置 11.”保存全部切片“或者“保存选中切片” 这里还要说明一个问题,有时候一个页面中,我用切片工具选出好几张png图标准备切,然后保存的时候也选择png...接着再右击——“编辑内容” 点击“确定” 看,他就新建了一个“形状8”的页面,放的是我的png的小图标,  最后你保存为png也好,“存储为web所有格式”也好,自由发挥吧。

    1.8K100

    【Android 内存优化】图片文件压缩 ( Android 原生 API 提供的图片压缩功能能 | 图片质量压缩 | 图片尺寸压缩 )

    , 无法复原 ; ② 尺寸压缩 : 减小图片的尺寸大小 , 明显这个也是有损的 , 无法复原 ; ③ 不同压缩格式的压缩率 : webp > jpeg > png ; 如果图片不需要透明度 ( alpha..., 可以是文件输出流 , 也可以是网络流 ; ③ 返回值 : 如果压缩成功, 并写出到指令的输出流, 返回 true ; /** * 写出该位图压缩后的版本到输出流中 * 如果该方法返回...* 传入的压缩配置并不是所有的格式都接收所有的配置, * 从 BitmapFactory 返回的位图极有可能与原图位深度不同, * 如果是 JPEG 格式, 其没有透明度通道...---- 图片尺寸压缩函数原型 : 下面的函数原型中给出了详细注释 ; ① 函数作用 : 创建一个新的 Bitmap 对象 , 缩放一张已存在的位图 ; 如果指定的宽高与当前源位图的宽高一致 , 那么直接将源位图返回...返回源图 ; /** * 创建一个新的 Bitmap 对象 , 缩放一张已存在的位图 ; * 如果指定的宽高与当前源位图的宽高一致 , 那么直接将源位图返回 *

    4.3K20
    领券