开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

有没有一个npm包可以像tinypng.com和compresspng.com这样的网络工具一样有效地压缩透明的png图片？

是的，有一个npm包可以像tinypng.com和compresspng.com这样有效地压缩透明的PNG图片，它就是"imagemin-pngquant"。

imagemin-pngquant是一个基于pngquant的插件，它可以在保持透明度的同时，压缩PNG图片的大小。它通过减少PNG图像的颜色数量和优化调色板来实现压缩效果，从而减小文件大小，提高加载速度。

该插件的优势包括：

高效压缩：使用pngquant算法，可以有效地减小PNG图片的文件大小，而不会损失透明度。
保持透明度：插件能够在压缩PNG图片的同时保持其透明度，确保图像质量不受影响。
简单易用：通过npm安装后，只需在项目中引入插件并配置相关参数，即可开始使用。

imagemin-pngquant的应用场景包括但不限于：

网站优化：通过压缩PNG图片，可以减小网页的加载时间，提升用户体验。
移动应用开发：在移动应用中使用压缩后的PNG图片，可以减少应用的安装包大小，提高应用的下载速度。
图片处理工具：作为一个通用的PNG图片压缩工具，imagemin-pngquant可以用于各种图片处理任务。

推荐的腾讯云相关产品是"云函数 SCF"，它是一个无服务器的云计算产品，可以用于部署和运行Node.js应用程序。通过将imagemin-pngquant集成到云函数中，可以实现在云端对PNG图片进行压缩的功能。您可以通过以下链接了解更多关于腾讯云函数 SCF 的信息：https://cloud.tencent.com/product/scf

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

网站图片优化

图像压缩 JPEG/JPG PNG (PNG-8 与 PNG-24) WebP 图像压缩 1.使用 imagemin cd进入项目根目录 npm install imagemin 2.创建一个名为 imagemin.js...高质量的压缩方式：当我们把图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质以 24 位存储单个图，可以呈现多达 1600 万种颜色，足以应对大多数场景下对色彩的要求,压缩前后的质量损耗不易察觉...使用场景适用于呈现色彩丰富的图片大的背景图轮播图 Banner图缺陷处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显不支持透明度处理，透明图片需要召唤...WebP 优点像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身官方介绍与 PNG 相比，WebP 无损图像的尺寸缩小了...通过以无损和有损格式编码图像来提供更小的文件大小，使其成为 JPEG 和 PNG 的一个很好的替代方案清晰度通常可以与 JPEG 和 PNG相提并论，而且文件大小要小得多浏览器对 WebP 支持并不普遍

1.6K3 0

性能优化——图片压缩、加载和格式选择

PNG - 8 与 PNG - 24 png 是一种采用无损压缩算法的位图格式。优势无损压缩完全支持 alpha 透明度。可以重复保存且不降低图像质量。...业务场景 SVG 是文本文件，我们既可以像写代码一样定义 SVG ，把它写在 HTML 里、成为 DOM 的一部分。...也就是说我们牺牲的渲染性能大于资源请求性能，这样做不太值得。我们可以看到，大多数用 Base64 编码的图片都是小图。 WebP 一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式。...图片格式小结给大家整理了思维导图: OSS 搭配 CDN 我们原始的方式是将图片等资源一起放入项目中打包上线。这样做的缺点在于打包出来的包大不说，用户请求资源的速度也会受到限制。...和学习其他新技术不同的是，当你想学习一套新的框架时，阅读文档和源码几乎可以让你在使用过程中游刃有余。但性能优化却不一样，它只能让我们去摸索去领悟去突破，它是一种经验也是一种习惯更是一种嗅觉。

8865 0

嗯，手搓一个TinyPng压缩图片的WebpackPlugin也SoEasy啦

这样在交付项目时有可能被细心的QA小姐姐抓个正着，怎么和设计图对比起来不清晰啊！工具图片压缩工具此时可能有些同学已转战到手动压缩图片了。...，这个可理解，即使收费也一样，毕竟每个人都上传单张10多M的图片，哪个服务器能受得了。...再来就是可压缩类型，图片类型一般是jpg、png、gif、svg和webp，gif压缩后一般都会失真，svg通常用在矢量图标上很少用在场景图片上，webp由于兼容性问题很少被使用，故能压缩jpg和png...不过细心的同学看标题就知道用什么方式处理了。压缩类型 gif压缩后一般都会失真，svg通常用在矢量图标上很少用在场景图片上，webp由于兼容性问题很少被使用，故能压缩jpg和png就足够了。...有些同学可能会说，刷新页面不就行了吗，每次压缩20张图片，再刷新再压缩，万一有500张图片呢，你就刷新25次吗，这样很好玩是吧！

9122 0

给ipa瘦身

所谓的ipa，其实就是苹果移动端设备中应用程序的安装包，跟安卓应用程序安装包（APK）是一样的道理。今天我们要聊的就是如何给一个iOS应用程序的安装包瘦身，也就是减少安装包的体积。...这是一个可视化工具，页面如下：配置到工程路径以后，直接点击右下角的search按钮，就可以检索没有用到的图片了~ 搜索完成后，如下：这样我们就可以将无用资源删除了~ 图片资源压缩无用图片资源处理完了...WebP 支持 Alpha 透明和 24-bit 颜色数，不会像PNG8那样因为色彩不够而出现毛边。那么怎么将图片转成WebP呢？...但是在使用ImageOptim进行图片压缩后，要将项目中的COMPRESS_PNG_FILES和STRIP_PNG_TEXT设置成NO。...图片资源压缩工具除了ImageOptim之外，还可以使用Tinypng（https://tinypng.com/）,可以选取一个自己喜欢的GUI工具，具体使用和ImageOptim差不多。‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

1501 0

Mac效率工具

有很多 npm 包是很好的工具，以我经常用的一个举例吧 anywhere[4] 它可以随时随地将你的当前目录变成一个静态文件服务器的根目录，只需要你在当前目前下执行一个anywhere命令。...这样就实现了一个局域网下，文件互传的功能，我经常使用它来和同事之间传递文件，毕竟内网传递速度就是快。 Gem[5] Gem 是 Ruby 模块的包管理器。...日常工具 Snipaste[6] 最好用的截图工具，我要向大家强烈安利它，不仅有正常的截图、编辑等功能，还有一个其他软件都没有而且我经常用的功能 -- 贴图，可以直接将图片像便签一样贴在桌面上。...BuildTimeAnalayer.png ImageOptim[26] 图片压缩工具 ImageOptim.png Lookin[27] Lookin 可以查看与修改 iOS App 里的 UI 对象...Network Link Conditioner[32] 这是一个来自苹果官方的工具，它可以模拟任何网络环境，如 3G，Edge 等等，也可以重新定义当前的网络环境，如网络延迟、带宽或丢包率。

2.3K3 1

前端性能和加载体验优化实践

构建缩包，按需加载 i. NPM 首先通过 Webpack 插件 webpack-bundle-analyzer 分析出项目中用到的 NPM 包及大小。...24 位图像和 8 位 Alpha 透明度的支持，这意味着动画将拥有更好的质量，其诞生的目的是为了替代老旧的 GIF 格式，但它目前并没有获得 PNG 组织官方的认可。...[转图片格式] 但是 133k 的体积依旧很大，让人难以接受。作为动画效果，只要让视频循环播放，就能达到和 GIF 一样的效果，然后我又试了主流的 MP4、WebM。...PNG/JPG 压缩图片上传前先通过工具压缩下（例如：https://tinypng.com/）,正常都会有 50~80% 的减少。 [点击查看大图] iv....用户黏性 - 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验。

1.4K2 0

TinyPNG：在线 PNGJPEG 图片无损压缩工具

PNG 很有用，因为它是唯一一种广受支持的格式，它可以部分存储透明图像。虽然 PNG 格式使用压缩，但文件仍然可以很大。JPEG 是网站和应用程序上照片的最流行格式。...许多 JPEG 文件没有使用最佳压缩，浪费了宝贵的字节。使用 TinyPNG 能为你的应用和网站压缩图片。它将使用更少的带宽，让网站加载速度更快。 TinyPNG 是做什么的？...TinyPNG 使用智能无损压缩技术减小文件大小你的 PNG 文件。通过有选择地减少图像中的颜色数，存储数据所需的字节数更少。...TinyPNG 官网地址 https://tinypng.com/ TinyPNG 使用方法工具使用很简单，如果我们不需要 API 功能，直接在主页顶部上传需要压缩的图片。...支持 .PNG 和 .JPG 格式，支持一次批量20张图片同时压缩。

1.3K5 0

PNG图片压缩对比分析

业务的增加导致图片越来越多，通过分析可以知道PNG格式图片是项目中数量最多的图片，关于PNG图片的介绍可以参考：PNG文件格式详解。为了实现减包任务，对图片进行压缩是很重要的一部分。...pngquant 根据官网https://pngquant.org/介绍，pngquant是国外的一个有损的PNG压缩开源库，提供了命令行形式和源码库形式。...将24位或32位的RGBA PNG图转换成8位PNG图并保留透明度通道。通过这个库的转化可以显著减少png文件大小（通常减少70%）。...5）RDM自动化编译时间增加的问题，由于res目录下的JPG图片和第三方jar包的PNG图片都是本地手动压缩处理的，不用考虑时间问题。...通过本次图片压缩优化，可以达到以下几个目的： 1）res目录下的PNG可以减少1.97MB，PNG的减包效果如下图，res目录下的JPG图片可以减少200KB，第三方jar包(assets)目录的PNG

9.7K11 0

图片一键压缩，支持批量压缩

最近在写项目时用到了很多图片，由于考虑到图片过大会占用许多服务器资源所以就想到了去压缩图片，但是由于图片太多所以用photoshop操作也挺麻烦就找到了一个网站，如下 https://tinypng.com.../ tinypng 智能PNG和JPEG压缩超过10亿个PNG和JPEG图像经过优化，并且还在不断增加！...PNG非常有用，因为它是唯一可以存储部分透明图像的广泛支持的格式。格式使用压缩，但是文件仍然可以很大。使用TinyPNG缩小应用程序和网站的图像。它将使用更少的带宽并更快地加载。它是如何工作的？...您可以使用“ 保存为Web”将图像导出为24位透明PNG文件，并将其上传到TinyPNG。我们将它们转换为索引为PNG的小文件。您也可以安装TinyPNG Photoshop插件。...它使您可以直接从Photoshop缩放，预览和保存压缩的PNG和JPEG图像。为什么创建TinyPNG？很好的问题！我们经常使用PNG图片，但对加载时间感到沮丧。

1.1K2 0

【前端纯干货】原来TinyPNG可以这样玩！

前端er，又称为切图仔，平时经常需要用PSD导出PNG或JPG，但是导出来的的图片一般比较大，往往需要用一些其他工具压缩后再发布到生产环境。...初体验tinypng真是把我惊呆了，一般的PNG压缩率竟然可以高达50%-70%，并且肉眼看不出来任何的画质损失！...TinyPNG的原理是将PNG24位真彩色图片压缩成PNG8位索引图片，从而做到基本不损失画质和观感。至于具体算法怎么实现的也没有深入研究守，有兴趣的可以自行查阅相关资料。...然而，这么好用的压缩工具有一个很明显缺陷的，就是每天只能正常压缩20张图片。超过20张之后，就会经常出来Too many files uploaded at once。如下红色的部分： ?...只需要全局安装： npm i -g super-tinypng 然后在你想要压缩图片的目录里面运行super-tinypng就能自动压缩图片了，并且不会有数量限制！

1.6K2 0

APK瘦身全面总结——如何从32.6M到13.6M

版本更新会导致很多资源用不到，然后依旧存在包中。这事我是交给老大的做的，毕竟项目他最熟。于是乎删了差不多100多张图片。因为做了图片适配。所以删除的图片资源差不多是在400张的样子。这样。...你们对比着你们的项目一个个的删就行了。图片瘦身之熊猫大法前面我也说了。用svg适配改的代码量太大了。于是乎我转用了熊猫瘦身，也就是tinypng。官方网站：https://tinypng.com。...PNG是有用的，因为它是唯一广泛支持的格式，可以存储部分透明的图像。格式使用压缩，但是文件仍然可能很大。使用TinyPNG缩小您的应用程序和网站的图像。它将使用更少的带宽和更快的加载。...你们可以让你们的UI给你们图片的时候就用Tinypng压缩在发过来。不过有的公司就给你个设计稿。...只要你用心去做，就一定可以解决。就像我当初给自己的目标是小于20M一样。虽然现在和20M差不多。不过如果那边测试可以通过。那便是13.6M而不是20M。希望我的方法能帮助到你们。欢迎讨论~~~

9296 0

Android APP 终极瘦身指南

：使用tinypng有损压缩 android打包本身会对png进行无损压缩，所以使用像tinypng这样的有损压缩是有必要的。...Tinypng的官方网站：http://tinypng.com/ 第6条：使用jpg格式如果对于非透明的大图，jpg将会比png的大小有显著的优势，虽然不是绝对的，但是通常会减小到一半都不止。...第9条：覆盖第三库里的大图有些第三库里引用了一些大图但是实际上并不会被我们用到，就可以考虑用1x1的透明图片覆盖。...第15条：使用着色方案相信你的工程里也有很多selector文件，也有很多相似的图片只是颜色不同，通过着色方案我们能大大减轻这样的工作量，减少这样的文件。...总结 App瘦身是一个长期的过程，建议可以进行每个版本对APK大小进行监控，列出增加和减小的点，做到持续的统计和追踪，从而给公司带来效益。

2.6K1 0

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

此外，JPEG 图像不支持透明度处理，透明图片需要召唤 PNG 来呈现。...PNG (PNG-8 与 PNG-24) PNG 的优缺点 PNG（可移植网络图形格式）是一种无损压缩的高保真的图片格式。8 和 24，这里都是二进制数的位数。...看一看，自己判断一下: 原图(913kb) 优化后的图像(187kb) WebP WebP 的优点 WebP 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片...将 WebP 图像提供给支持它们的浏览器 WebP 是谷歌引入的一种相对较新的格式，它的目标是通过以无损和有损格式编码图像来提供更小的文件大小，使其成为 JPEG 和 PNG 的一个很好的替代方案。...这意味着你无需设置或 source 标记的样式，因为浏览器不会渲染这些标记。因此，你可以像以前一样继续使用 img 标签进行样式设置。

1.1K2 0

推荐一个好用的图片压缩网站！清晰度不变的同时体积减小一大半

，那么这时候你可能会有这么一个需求： “有没有什么办法在保证图片清晰度的时候把图片的体积压缩到最小？...所以，今天给大家推荐一个非常好用的图片压缩网站，可以将图片体积缩小一大半，同时几乎不改变图片清晰度。...我们来看下主页：可以看到，网站的一个大标题就是 "Smart WebP, PNG and JPEG compression"，意思就是智能的 WebP、PNG 和 JPEG 格式的压缩工具。...TinyPNG 网站举了一个例子：可以看到原始图片和压缩后的图片对比几乎没有什么差别，而压缩前图片有 57KB，压缩后只有 15 KB。...不知道大家有没有听说过一种 PNG 图片格式，叫做 APNG，其实就是 Animated PNG，就是可以动的 PNG 图片，比如这张图片：https://ezgif.com/images/apng.png

1.4K2 0

Android APK瘦身全面总结——如何从32.6M到13.6M

版本更新会导致很多资源用不到，然后依旧存在包中。这事我是交给老大的做的，毕竟项目他最熟。于是乎删了差不多100多张图片。因为做了图片适配。所以删除的图片资源差不多是在400张的样子。这样。...你们对比着你们的项目一个个的删就行了。图片瘦身之熊猫大法前面我也说了。用svg适配改的代码量太大了。于是乎我转用了熊猫瘦身，也就是tinypng。官方网站：https://tinypng.com。...PNG是有用的，因为它是唯一广泛支持的格式，可以存储部分透明的图像。格式使用压缩，但是文件仍然可能很大。使用TinyPNG缩小您的应用程序和网站的图像。它将使用更少的带宽和更快的加载。...你们可以让你们的UI给你们图片的时候就用Tinypng压缩在发过来。不过有的公司就给你个设计稿。...只要你用心去做，就一定可以解决。就像我当初给自己的目标是小于20M一样。虽然现在和20M差不多。不过如果那边测试可以通过。那便是13.6M而不是20M。希望我的方法能帮助到你们。

1.8K2 0

【腾讯云前端性能优化大赛】前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）

[webpack-bundle-analyzer] 结合项目可以分析出哪些包可以去除，哪些包可以有更好的替代品。...[转图片格式] 但是 133k 的体积依旧很大，让人难以接受。作为动画效果，只要让视频循环播放，就能达到和 GIF 一样的效果，然后我又试了主流的 MP4、WebM。.../JPG 压缩图片上传前先通过工具压缩下（例如：https://tinypng.com/）,正常都会有 50~80% 的减少。...用户黏性 - 和 Native App 一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验。...-- 在Windows 8上，我们可以将网站固定在开始屏幕上，而且支持个性化自定义色块icon和背景图片。这个标签是用来定义色块的背景图的。色块图应该为144*144像素的png格式图片，背景透明。

2.7K12 1

超全面的 UI 工作流程指南（四）：切图标注

通常我们只需要对 icon 与图片进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果。...；输出的切图应当尽可能的压缩大小，以降低 APP 的总大小，提升用户使用时的加载速度（推荐在线压缩：https://tinypng.com）；所有的变形字体把它当成 icon 来切；切图输出格式：...png-24；重复的东西只切一个。...△ 城易logo 二是，导出序列图片压缩打包给开发人员。三是导出 json 。...Figma 网址：https://www.figma.com/ 支持 sketch 导入，Figma 也像 Zeplin 一样，标注页面间距与尺寸，并且支持各种图片格式、尺寸、形态输出，开发人员也有相应的代码可用参考

3.1K4 1

Android性能优化系列之apk瘦身

包体分析在Android Studio工具栏里，打开build–>Analyze APK, 选择要分析的APK包可以看到占用空间的主要是代码、图片、资源和lib和assert文件，主要方向精简代码...有损压缩 TinyPNG工具只支持上传PNG图片到官网上压缩，然后下载保存，在保持alpha通道的情况下对PNG的压缩可以达到1/3之内，而且用肉眼基本上分辨不出压缩的损失....Tinypng的官方网站：http://tinypng.com/ 使用jpg格式如果对于非透明的大图，jpg将会比png的大小有显著的优势，虽然不是绝对的，但是通常会减小到一半都不止。...覆盖第三库里的大图有些第三库里引用了一些大图但是实际上并不会被我们用到，就可以考虑用1x1的透明图片覆盖。...使用着色方案相信你的工程里也有很多selector文件，也有很多相似的图片只是颜色不同，通过着色方案我们能大大减轻这样的工作量，减少这样的文件。

1K3 0

推荐5 个免费且好用的图片压缩网站，让网站打开速率快起来

不但能够将图片批量上传压缩，还能够在压缩之后提供多种压缩大小后的图片提供下载，对 PNG 图片的压缩效果尤其优秀。 Pix Fix 网址：zh.pixfix.com 可压缩 JPG 和 PNG。...Pix Fix 和 recompressor 出自同一团队之手，除了配色，两个网站的布局设计几乎一样。...如果你要压缩 JPG 图片的话，建议使用 Pix Fix，它能够清理被噪声和过度 JPG 压缩损坏的图像，效果极佳。压缩后，还能够对压缩之后的图片进行细节修改。...TinyPNG 网址：tinypng.com 可压缩 JPG 和 PNG。...这个网站的优点，一是可以选择各种常用的尺寸或自定义尺寸进行压缩，非常方便；二是压缩 GIF 支持帧数抽取的方式，这种方式压缩力度大，且对图片清晰度影响小。

2.5K5 0

PicGo：搭建图床

下载地址：https://nodejs.org/dist/latest-v12.x/ 大家根据自己的需要选择对应的版本安装包安装即可。 ? PicGo主页面： ?...以上就是完成了PicGo的安装，下面有基于SM·MS与Gitee： SM·MS安装之后，在Typora中有时不能正常显示。 Gitee正常。可以进行图片压缩，再进行上传。...（图片压缩：https://tinypng.com/）基于SM·MS的图床 1.注册 SM·MS网站：https://sm.ms/ ? 2.获取API Token ? ?...基于Gitee的图床首先你得有一个Gitee账号。网址：https://gitee.com/ 1.新建仓库主页右上角+，新建仓库。按照图片中的红色框框内容，进行设置。 ?...Typora中的设置 1.图像上传 Typora中偏好设置----图像 ? ? 按照上述操作：插入图片时… 改为上传图片上传服务设定与图片一样即可 2.验证图片上传点击验证图片上传选项 ?

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭