网站首页 > 技术文章 正文
谷歌出品的免费开源在线图片压缩工具,效果惊人,支持多种格式。
关于 Squoosh
Squoosh 是谷歌出品的一款在线图像压缩工具,使用简单,有极高的压缩比,能够帮助我们把图片大小进行压缩,不管是设计 UI 切图、自媒体文章配图还是 PPT 配图这样的使用场景,都要用到压缩图片。
我们知道,具有超高压缩比的 webp 图片格式,就是谷歌发布的,而 Squoosh 也是一个面向开发者推广 webp 图片格式的开发工具。
Squoosh 的功能特性
- 压缩率很高,在保存图片清晰度的同时大幅降低文件大小
- 使用简单,打开浏览器就,拖入或选择图片就能使用
- 支持生成 JPG / PNG / WEBP 等多种常用图片格式
- 支持高级的压缩功能,比如旋转、裁剪、调色、平滑等
- 支持开发者集成在自己的项目中,通过简单的 api 来实现图片压缩
- 利用浏览器自身的算力来完成压缩,不会上传图片,速度快,也很安全
使用 Squoosh 来压缩图片
压缩图片我们一般会想到用 Photoshop 这样的专业图像处理软件,不过今天介绍的 Squoosh 使用起来非常简单,在浏览器中打开 Squoosh 的网址后,点击选择图片或直接把图片拖进网页里,默认就会生成压缩预览,拖动中间的分隔线可以对比压缩前后的效果。
在左下方显示压缩后的大小,也可以更改输出的图片格式,如果对大小不满意,还可以调整图片质量,最后直接下载图片即可。
不过 Squoosh 这个在线工具貌似以“炫技”为主,对于想要压缩大量图片的需求,目前还是不支持,只能一张一张压缩,体验有些欠缺,而且只支持英文界面,高级压缩选项有很多图像相关的专业名词,不容易理解。
开发集成图片压缩功能
谷歌开发并且开源这款工具的初衷,是希望更多开发者使用它来降低图片的大小的同时还保证了图片质量,使用户获得更快的上网体验。
目前 Squoosh 提供 CLI 命令行和 api 的开发方式,使用 api 开发者可以很方便地集成到自己的项目中。下面是 api 方式开发集成的方法:
安装 Squoosh
$ npm install @squoosh/lib
在开发项目中引入和初始化
import { ImagePool } from '@squoosh/lib';
import { cpus } from 'os';
const imagePool = new ImagePool(cpus().length);
压缩图片
import fs from 'fs/promises';
const file = await fs.readFile('./path/to/image.png');
const image = imagePool.ingestImage(file);
const preprocessOptions = {
// 压缩参数:比如缩放图片
resize: {
width: 100,
height: 50,
}
};
await image.preprocess(preprocessOptions);
const encodeOptions = {
mozjpeg: {}, // 默认压缩输出为jpeg格式
jxl: {
quality: 90, // 设置压缩质量
},
};
const result = await image.encode(encodeOptions);
Squoosh 还支持通过 node.js 在后端使用,更全的 api 调用可直接访问 github 代码仓库中的这个目录。
之前推荐过的 tinypng 、图压都是简单好用的免费图片压缩工具,tinypng 虽然也支持开发者调用,但是需要注册开发者账号,图片也需要上传到 tinypng 的服务器去压缩,每月只有可怜的 200 张免费额度,超过后需付费使用。而 Squoosh 不仅完全免费,所用代码也完全开源,可谓是大厂的良心之作。
免费开源说明
Squoosh 是一款谷歌出品的免费开源的在线图片压缩工具,源码基于 Apache License 2.0 协议开源,托管在 Github 上,任何个人和公司都可以免费使用,也可以将源码用在自己开发的项目上。
需要注意的是,Squoosh 的 Github 仓库主页是这个在线工具的代码,下载运行后其实是在本地搭建了压缩工具。要了解开发接入相关需要找到对应的目录。
关注我,持续分享高质量的免费开源、免费商用的资源。
↓↓点击查看本次分享的网址。
猜你喜欢
- 2024-12-02 实用技巧分享:你知道如何实现油猴脚本的导出与本地导入吗?
- 2024-12-02 详细介绍一下Spring Boot中对于文件的压缩以及解压缩操作?
- 2024-12-02 前端入门——html 中如何使用图片
- 2024-12-02 超好用 Vue.js 图片裁切组件Vue-ImgCutter
- 2024-12-02 Vue项目优化篇
- 2024-12-02 热门在线图片压缩工具,一次解决平时在办公时遇到的压缩问题
- 2024-12-02 Java pdf下载优化:Java图片压缩
- 2024-12-02 在线图片压缩效果怎么样?有没有免费的工具?
- 2024-12-02 手搓一个TinyPng压缩图片的WebpackPlugin
- 2024-12-02 前端开发使用工具 gulp
你 发表评论:
欢迎- 07-08记oracle日志挖掘实操&查询归档不正常增长情况(一)
- 07-08Oracle 伪列!这些隐藏用法你都知道吗?
- 07-08orcl数据库查询重复数据及删除重复数据方法
- 07-08重大故障!业务核心表被truncate删除,准备跑路……
- 07-08oracle数据恢复—oracle执行truncate命令误删除数据的数据恢复
- 07-08Oracle-rac 修改scanip(oracle 修改sequence cache)
- 07-08ORACLE RAC CDB和PDB切换(oracle数据库rac切换)
- 07-08Oracle rac haip作用(oracle rac的典型特征)
- 596℃几个Oracle空值处理函数 oracle处理null值的函数
- 590℃Oracle分析函数之Lag和Lead()使用
- 577℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 573℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 569℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 562℃【数据统计分析】详解Oracle分组函数之CUBE
- 549℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 542℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- 记oracle日志挖掘实操&查询归档不正常增长情况(一)
- Oracle 伪列!这些隐藏用法你都知道吗?
- orcl数据库查询重复数据及删除重复数据方法
- 重大故障!业务核心表被truncate删除,准备跑路……
- oracle数据恢复—oracle执行truncate命令误删除数据的数据恢复
- Oracle-rac 修改scanip(oracle 修改sequence cache)
- ORACLE RAC CDB和PDB切换(oracle数据库rac切换)
- Oracle rac haip作用(oracle rac的典型特征)
- 新手小白怎么学UI设计 推荐学习路线是什么
- 超实用!0基础UI设计自学指南(0基础学ui设计好就业吗)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)