当前位置: 首页 > news >正文

使用 Node.js 生成优化的图像格式

使用 Node.js 生成优化的图像格式

图像是任何 Web 应用程序的重要组成部分,但如果优化不当,它们也可能成为性能问题的主要根源。在本文中,我们将介绍如何使用 Node.js 自动生成优化的图像格式,并以最适合用户浏览器的格式显示它们。

配置

首先我们需要一个为我们处理图像处理的库,而Sharp就是本文将使用的图像处理库。Sharp 是一个用于图像处理和操作的高性能 Node.js 库。它的设计速度快、内存效率高,非常适合处理大图像和生成多种图像格式。

安装:

npm i sharp

图像生成脚本

优化网络图像的第一步是为每个图像生成多种格式,每种格式都有自己的优点和缺点。某些格式(例如 JPEG)适合具有多种颜色的复杂图像,而其他格式(例如 WebP)更适合具有较少颜色的简单图像。具体的图片格式分析请看前端图片格式这篇文章。

要生成不同的图像格式,我们可以使用 Node.jsSharp 图像处理库。下面是一个示例脚本,它为图像文件夹中的每个图像生成 avifwebp 格式:

const sharp = require('sharp');
const fs = require('fs');const inputFolder = 'images';
const outputFolder = 'output';const formats = ['avif', 'webp'];if (!fs.existsSync(outputFolder)) {fs.mkdirSync(outputFolder);
}fs.readdir(inputFolder, (err, files) => {if (err) {console.error(err);return;}files.forEach(file => {if (file.endsWith('.jpg') || file.endsWith('.jpeg') || file.endsWith('.png')) {const inputPath = `${inputFolder}/${file}`;const name = file.substring(0, file.lastIndexOf('.'));formats.forEach(format => {const outputPath = `${outputFolder}/${name}.${format}`;if (!fs.existsSync(outputPath)) {sharp(inputPath).toFormat(format, { quality: 80 }).toFile(outputPath, (err) => {if (err) {console.error(err);} else {console.log(`${name}.${format} saved`);}});}});}});
});

代码说明

const sharp = require('sharp');
const fs = require('fs');const inputFolder = 'images';
const outputFolder = 'output';const formats = ['avif', 'webp'];

在这几行代码中,导入sharpfs库,将输入文件夹设置为images,将输出文件夹设置为output,并将要生成的格式定义为avifwebp

if (!fs.existsSync(outputFolder)) {fs.mkdirSync(outputFolder);
}

在这里,代码检查是否存在输出文件夹outputFolder,如果不存在,则使用 fs.mkdirSync()方法来创建它。这可确保在生成任何图像之前输出文件夹存在。

fs.readdir(inputFolder, (err, files) => {if (err) {console.error(err);return;}
})

使用fs.readdir方法来判断输入文件夹是否存在。

files.forEach(file => {if (file.endsWith('.jpg') || file.endsWith('.jpeg') || file.endsWith('.png')) {//...}
})

这段代码使用forEach方法遍历输入文件夹中的所有文件。如果文件名以.jpg.jpeg、 或.png结尾,则继续生成相应的avifwebp文件。

const inputPath = `${inputFolder}/${file}`;
const name = file.substring(0, file.lastIndexOf('.'));

这里,将输入文件路径定义为inputPath,并提取不带扩展名的文件名作为输出文件名。

formats.forEach(format => {const outputPath = `${outputFolder}/${name}.${format}`;if (!fs.existsSync(outputPath)) {sharp(inputPath).toFormat(format, { quality: 80 }).toFile(outputPath, (err) => {if (err) {console.error(err);} else {console.log(`${name}.${format} saved`);}});} 
});

在这里,脚本使用formats.forEach()循环遍历每种格式(即avifwebp)。对于每种格式,它将输出文件路径定义为outputPath

如果输出文件不存在,则使用 SharptoFormat()函数以指定格式生成相应的图像,质量为 80。然后使用toFile()保存输出文件,并向控制台记录一条消息,指示文件已保存。

在浏览器中显示优化的图像

一旦我们为每个输入图像生成了多种优化的图像格式,我们就可以在应用程序中显示它们。为此,我们可以使用 HTML中的<picture><source>元素来指定不同格式的不同图像源。下面是一个以最适合用户浏览器的格式显示图像的例子:

<picture><source srcSet="./output/1.avif" type="image/avif" /><source srcSet="./output/1.webp" type="image/webp" /><img src="./images/1.png" />
</picture>

img 它将用作不支持avifwebp的浏览器的后备显示图像。

在浏览器的请求:
在这里插入图片描述

可以看到浏览器使用webp的方式展示图片。

结论

网站上的图像加载速度可能很慢,并且在不同设备上看起来并不总是很好。重要的是要让它们加载得更快、看起来更好,这样人们才能更喜欢我们的网站。在本文中我们学习了如何使用 SharpHTML 中的<picture><source>制作同一图像的不同版本,并为每种设备显示最佳版本。通过这样做,我们的网站对于每个使用它的人来说将会更快、看起来更好!

相关文章:

使用 Node.js 生成优化的图像格式

使用 Node.js 生成优化的图像格式 图像是任何 Web 应用程序的重要组成部分&#xff0c;但如果优化不当&#xff0c;它们也可能成为性能问题的主要根源。在本文中&#xff0c;我们将介绍如何使用 Node.js 自动生成优化的图像格式&#xff0c;并以最适合用户浏览器的格式显示它们…...

【WinAPI详解】<CreateWindowEx详解>

函数原型: HWND CreateWindowEx(DWORD dwExStyle, //窗口的扩展风格&#xff08;加强版专有&#xff09;LPCTSTR lpClassName, //已经注册的窗口类名称LPCTSTR lpWindowName,//窗口标题栏的名字DWORD dwStyle, //窗口的基本风格int x, //窗口左上角水平坐标位置int …...

【Git】分支管理

文章目录 一、理解分支二、创建、切换、合并分支三、删除分支四、合并冲突五、合并模式六、分支策略七、bug分支八、强制删除分支 努力经营当下 直至未来明朗&#xff01; 一、理解分支 HEAD指向的是master分支&#xff0c;master中指向的是最新一次的提交&#xff0c;也就是m…...

玩转单元测试之gtest

引言 程序开发的时候&#xff0c;往往需要编写一些测试样例来完成功能测试&#xff0c;以保证自己的代码在功能上符合预期&#xff0c;能考虑到一些异常边界问题等等。 gtest快速入门 1.引入gtest # 使用的是1.10版本&#xff0c;其他版本可根据需要选择 git clone -b v1.1…...

Tomcat 一次请求的生命周期

在使用 Tomcat 的时候&#xff0c;我们只需要在 Servlet 实现类中写我们的业务逻辑代码即可&#xff0c;不需要管 Socket 连接、协议处理要怎么实现&#xff0c;因为这部分作为不经常变动的部分&#xff0c;被封装到了 Tomcat 中&#xff0c;程序员只需要引入 Tomcat 中即可&am…...

spring cloud gateway中配置uri

gateway中配置uri配置有三种方式: websocket方式&#xff1a;uri: ws://localhost:9000http方式: uri: http://localhost:8130/lb注册中心配置方式&#xff08;注册的服务名称&#xff09;: uri: lb://monitor-ms gateway的lb方式识别的服务名称命名规则&#xff1a; "[…...

使用NAudio录制wav音频

NAudio NAudio官网 环境 Unity2019.4.34f1c1 Window10 NAudio 1.10 .Net 3.5 录制音频 WaveInEvent类可录制音频 StartRecording方法 启用录制StopRecording方法 停止录制DataAvailable 录制中回调RecordingStopped 录制结束回调 WaveFileWriter类可存储音频 Write方法…...

数据结构之动态内存管理机制

目录 数据结构之动态内存管理机制 占用块和空闲块 系统的内存管理 可利用空间表 分配存储空间的方式 空间分配与回收过程产生的问题 边界标识法管理动态内存 分配算法 回收算法 伙伴系统管理动态内存 可利用空间表中结点构成 分配算法 回收算法 总结 无用单元收…...

【汇编语言】栈及栈操作的实现

文章目录 栈结构栈操作栈的小结 栈结构 栈是一种只能在一端插入或删除的数据结构&#xff1b;栈有两个基本的操作&#xff1a;入栈和出栈&#xff1b; 入栈&#xff1a;将一个新的元素放到栈顶&#xff1b;出栈&#xff1a;从栈顶取出一个元素&#xff1b; 栈的操作规则&#…...

【JavaEE】面向切面编程AOP是什么-Spring AOP框架的基本使用

【JavaEE】Spring AOP&#xff08;1&#xff09; 文章目录 【JavaEE】Spring AOP&#xff08;1&#xff09;1. Spring AOP 是什么1.1 AOP 与 Spring AOP1.2 没有AOP的世界是怎样的1.3 AOP是什么 2. Spring AOP 框架的学习2.1 AOP的组成2.1.1 Aspect 切面2.1.2 Pointcut 切点2.1…...

SpringBoot+微信小程序奶茶在线点单小程序系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBoot微信小程序框架开发的奶茶在线点单小程序系统。首先&#xff0c;这是一个前后端分离的项目&#xff…...

【支付宝小程序】开发基础--文件结构教程

&#x1f996;我是Sam9029&#xff0c;一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 &#x1f431;‍&#x1f409;&#x1f431;‍&#x1f409;恭喜你&#xff0c;若此文你认为写的不错&#xff0c;不要吝啬你的赞扬&#xff0c;求收…...

LLM 生成式配置的推理参数温度 top k tokens等 Generative configuration inference parameters

在这个视频中&#xff0c;你将了解一些方法和相关的配置参数&#xff0c;这些参数可以用来影响模型在下一个词生成时的最终决策方式。如果你在Hugging Face网站或AWS的游乐场中使用过LLMs&#xff0c;你可能已经看到了这些控制选项&#xff0c;用来调整LLM的行为。每个模型都暴…...

npm的镜像源和代理的查看和修改

一、镜像源 查询当前镜像源 npm get registry 设置为淘宝镜像 npm config set registry http://registry.npm.taobao.org/ 设置回默认的官方镜像 npm config set registry https://registry.npmjs.org/ 设置electron为淘宝镜像 npm config set ELECTRON_MIRROR "h…...

IP库新增经过实践的Verilog 库

网上严重缺乏实用的 Verilog 设计。Project F 库是尝试让 FPGA 初学者变得更好部分。 设计包括 Clock- 时钟生成 (PLL) 和域交叉Display - 显示时序、帧缓冲区、DVI/HDMI 输出Essential- 适用于多种设计的便捷模块Graphics- 绘制线条和形状Maths- 除法、LFSR、平方根、正弦....…...

SLAM-VIO视觉惯性里程计

SLAM 文章目录 SLAM前言IMU与视觉比较单目视觉缺陷&#xff1a;融合IMU优势&#xff1a;相机-IMU标定松耦合紧耦合基于滤波的融合方案&#xff1a;基于优化的融合方案&#xff1a; 前言 VIO&#xff08;visual-inertial odometry&#xff09;即视觉惯性里程计&#xff0c;有时…...

分布式 RPC 框架入门

分布式 RPC 框架入门 警告 torch.distributed.rpc 程序包是实验性的&#xff0c;随时可能更改。 它还需要 PyTorch 1.4.0才能运行&#xff0c;因为这是第一个支持 RPC 的版本。 本教程使用两个简单的示例来演示如何使用 torch.distributed.rpc 软件包构建分布式训练&#xf…...

Spring boot与Spring cloud 之间的关系

Spring boot与Spring cloud 之间的关系 Spring boot 是 Spring 的一套快速配置脚手架&#xff0c;可以基于spring boot 快速开发单个微服务&#xff0c;Spring Boot&#xff0c;看名字就知道是Spring的引导&#xff0c;就是用于启动Spring的&#xff0c;使得Spring的学习和使用…...

报名开启 | HarmonyOS第一课“营”在暑期系列直播

<HarmonyOS第一课>2023年再次启航&#xff01; 特邀HarmonyOS布道师云集华为开发者联盟直播间 聚焦HarmonyOS 4版本新特性 邀您一同学习赢好礼&#xff01; 你准备好了吗&#xff1f; ↓↓↓预约报名↓↓↓ 点击关注了解更多资讯&#xff0c;报名学习...

Apache DolphinScheduler 支持使用 OceanBase 作为元数据库啦!

DolphinScheduler是一个开源的分布式任务调度系统&#xff0c;拥有分布式架构、多任务类型、可视化操作、分布式调度和高可用等特性&#xff0c;适用于大规模分布式任务调度的场景。目前DolphinScheduler支持的元数据库有Mysql、PostgreSQL、H2&#xff0c;如果在业务中需要更好…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

Android屏幕刷新率与FPS(Frames Per Second) 120hz

Android屏幕刷新率与FPS(Frames Per Second) 120hz 屏幕刷新率是屏幕每秒钟刷新显示内容的次数&#xff0c;单位是赫兹&#xff08;Hz&#xff09;。 60Hz 屏幕&#xff1a;每秒刷新 60 次&#xff0c;每次刷新间隔约 16.67ms 90Hz 屏幕&#xff1a;每秒刷新 90 次&#xff0c;…...

Qt学习及使用_第1部分_认识Qt---Qt开发基本流程

前言 学以致用,通过QT框架的学习,一边实践,一边探索编程的方方面面. 参考书:<Qt 6 C开发指南>(以下称"本书") 标识说明:概念用粗体倾斜.重点内容用(加粗黑体)---重点内容(红字)---重点内容(加粗红字), 本书原话内容用深蓝色标识,比较重要的内容用加粗倾…...