【Squoosh】谷歌开源在线图片压缩工具

cover

简介

Squoosh是一个图像压缩 web 应用程序,通过多种格式减少图像大小。其功能特性如下:

  • 压缩:较小的图像意味着更快的加载时间。Squoosh 可以减少文件大小并保持高质量。
  • 简易:操作简单。打开图像,设置压缩参数,检查压缩前后图像的差异,最后保存即可。
  • 安全:没有隐私泄露的问题。图像不会被发送到服务器,其压缩过程是在本地浏览器进行的。

使用

squoosh.app(在线压缩)

  1. 打开Squoosh官网。

image

  1. 点击中间带加号的图标从本地选择待压缩的图像(或直接将本地图像拖拽到该位置)。

image

  1. 窗口右下角设置压缩选项,左右拖动正中间的双三角按钮可对比压缩前后的画质,如果觉得压缩后的大小还合适,而且图片质量也能接受,下载即可。

image


压缩前压缩后
压缩前压缩后

Squoosh CLI(离线压缩)

如果有很多图片需要批量压缩的话,就不建议一张一张地上传到网站上进行处理了,这样太没效率了,推荐使用 Squoosh CLI 工具进行批压缩。

Squoosh CLI 可以通过命令行的方式运行 Squoosh web 应用程序上的所有编解码器。它使用工作池来并行处理图像,可以将同一个编解码器应用与多张图像。

Squoosh CLI 虽然不是目前最快的图像压缩工具,当然也不打算成为,但是它的速度足以同时压缩很多张图像。

安装
npm i -g @squoosh/cli

npx @squoosh/cli <options...>
用法
Usage: squoosh-cli [options] <files...>

Options:
  -V, --version                                          output the version number
  -d, --output-dir <dir>                                 Output directory (default: ".")
  -s, --suffix <suffix>                                  Append suffix to output files (default: "")
  --max-optimizer-rounds <rounds>                        Maximum number of compressions to use for auto optimizations (default: "6")
  --optimizer-butteraugli-target <butteraugli distance>  Target Butteraugli distance for auto optimizer (default: "1.4")
  --resize [config]                                      Resize the image before compressing
  --quant [config]                                       Reduce the number of colors used (aka. paletting)
  --rotate [config]                                      Rotate image
  --mozjpeg [config]                                     Use MozJPEG to generate a .jpg file with the given configuration
  --webp [config]                                        Use WebP to generate a .webp file with the given configuration
  --avif [config]                                        Use AVIF to generate a .avif file with the given configuration
  --jxl [config]                                         Use JPEG-XL to generate a .jxl file with the given configuration
  --wp2 [config]                                         Use WebP2 to generate a .wp2 file with the given configuration
  --oxipng [config]                                      Use OxiPNG to generate a .png file with the given configuration
  -h, --help                                             display help for command
示例
  1. 单图压缩
squoosh-cli --webp auto .\test.png
  • --webp:选择编解码器类型为 webp
  • auto:编解码器的优化参数,auto 是自动优化的意思
  • .\test.png:待压缩的图片

image

  1. 批量压缩
squoosh-cli --webp auto .\logo\ -d .\output\
  • .\logo\:待压缩的所有图片存放的文件夹
  • -d:指定压缩后图片的存放文件夹
  • .\output\:压缩后图片的存放文件夹

image

除使用 auto 参数自动配置编解码器的参数外,也可手动指定参数。不知道如何指定?Squoosh.app 其实直接提供了复制命令行的按钮,只需要先调整好参数,然后按下这个按钮,就可以了。

image

插画

【画师】Mauve 【P站ID】82756421
<think>好的,用户想学习如何减小图片文件的体积,询问图片压缩方法,涉及IT图像处理、减小文件大小和技术实现。我需要提供一个结构清晰的中文回答,并生成相关问题。首先,得明确图片压缩的主要方法,分为有损和无损压缩,然后具体说明每种方法的技术实现和适用场景。 首先,有损压缩,常见的是调整分辨率和降低质量。比如JPEG压缩,可以通过调整压缩率来减小文件大小。另外,转换格式也很重要,比如WebP格式比JPEG更高效。然后是工具推荐,如Photoshop、在线工具TinyPNG,以及命令行工具ImageMagick。接着是无损压缩,如PNG优化,使用工具如OptiPNG。还有删除元数据,使用exiftool清除EXIF信息。 需要确保所有数学公式用$...$,比如计算压缩率时可能需要公式。独立公式用$$...$$,但这里可能用不上。然后生成相关问题,比如如何选择压缩方法,批量处理工具,压缩对画质的影响,移动端优化方法,WebP兼容性问题等。 注意引用标识,比如在提到JPEG压缩标准时添加[^1]。检查LaTeX语法是否正确,虽然这个问题可能涉及较少数学公式,但如果有的话要正确使用。最后确保回答结构清晰,分步骤说明方法,推荐工具,并自然引用相关知识点。</think># 图片压缩方法与技术实现 ## 一、核心压缩原理 1. **有损压缩**:通过剔除人眼不敏感的高频细节实现压缩,例如$JPEG$算法采用离散余弦变换(DCT)将图像从空间域转换到频域[^1] 2. **无损压缩**:利用重复数据模式进行编码优化,典型算法包括$LZW$(用于$GIF$)和$DEFLATE$(用于$PNG$) $$ \text{压缩率} = \frac{\text{原始文件大小}}{\text{压缩后文件大小}} \times 100\% $$ ## 二、实践操作步骤 ### (一)有损压缩方案 1. **分辨率调整**: - 使用ImageMagick命令行工具: ```bash convert input.jpg -resize 50% output.jpg ``` - 推荐尺寸标准:网页图片宽度建议≤1920px,移动端≤750px 2. **质量参数优化**: - Photoshop导出时设置品质60-80 - FFmpeg压缩示例: ```bash ffmpeg -i input.png -q:v 80 output.jpg ``` 3. **格式转换策略**: | 格式 | 压缩率 | 透明度支持 | 动画支持 | |---------|--------|------------|----------| | WebP | 高 | ✔️ | ✔️ | | AVIF | 极高 | ✔️ | ❌ | | JPEG XL | 高 | ✔️ | ❌ | ### (二)无损优化方案 1. **元数据处理**: ```bash exiftool -all= input.jpg ``` 2. **PNG优化流程**: - 使用pngquant进行色深优化: ```bash pngquant --speed 1 --quality=65-80 input.png ``` - 使用zopflipng进行压缩优化: ```bash zopflipng -y input.png output.png ``` ## 三、开发级优化 1. **响应式图片技术**: ```html <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 100vw, 50vw"> ``` 2. **CDN动态压缩**: - 阿里云OSS支持通过URL参数进行实时处理: ``` https://bucket.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_800/quality,Q_75 ``` ## 四、专业工具推荐 1. 桌面软件:Squoosh谷歌开源)、RIOT 2. 在线服务:TinyPNG API(支持批量处理) 3. 开发库:Sharp(Node.js)、Pillow(Python)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Xavier Jiezou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值