网站首页 > 技术文章 正文
谷歌出品的免费开源在线图片压缩工具,效果惊人,支持多种格式。
关于 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
你 发表评论:
欢迎- 最近发表
-
- 用AI做微信小程序的完整步骤_如何用ai制作微信表情包
- 自习室预约的微信小程序设计与实现-计算机毕业设计源码+LW文档
- 微信小程序开发入门指南_微信小程序开发入门教程
- 写字机器人好用吗? 组装就花了5个小时 还要学习软件、录入字体
- 白描网页版 - 高效准确且免费的OCR文字识别工具
- 字体图形面板与图标字体使用_字体图标的优势和劣势
- 作为前端工程师必须懂得的33个CSS核心概念
- Flutter程序员开发炫酷的登录页面 字体库运用 路由学习 源码分享
- 2025Q3开源字体盘点:让你的代码和文档'颜值'飙升!
- Agent杂谈:Agent的能力上下限及「Agent构建」核心技术栈调研分享~
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)