使用 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>制作同一图像的不同版本,并为每种设备显示最佳版本。通过这样做,我们的网站对于每个使用它的人来说将会更快、看起来更好!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45696.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Eureka:服务注册-信息配置-自我保护机制

首先在提供者服务下&#xff0c;添加一个依赖 <!-- Eureka --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-eureka</artifactId><version>1.4.6.RELEASE</version><…

科大讯飞星火模型申请与chatgpt 3.5模型以及new bing的对比

科大讯飞星火模型 申请科大讯飞星火认知大模型账号科大讯飞星火认知大模型使用1.界面介绍2. 在编程能力上与chatgpt 3.5对比科大讯飞星火模型chatgpt 3.5模型 3. 在图片生成能力上与new bing对比 总结 申请科大讯飞星火认知大模型账号 注册网址&#xff1a; 科大讯飞星火认知大…

回归预测 | MATLAB实现BO-SVM贝叶斯优化支持向量机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现BO-SVM贝叶斯优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现BO-SVM贝叶斯优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程序设计…

22-组件通信

一. 什么是组件通信 组件通信&#xff0c;就是指 组件与组件 之间的数据传递 1. 组件的数据是独立的&#xff0c;无法直接访问其他组件的数据。 2. 想用其他组件的数据 -> 组件通信 二. 不同的组件关系 和 组件通信方案分类 组件关系分类: 1. 父子关系 2. 非父子关系 组件…

基于web的旅游管理系统/旅游网站的设计与实现

摘要 随着计算机技术&#xff0c;网络技术的迅猛发展&#xff0c;Internet 的不断普及&#xff0c;网络在各个领域里发挥了越来越重要的作用。特别是随着近年人民生活水平不断提高&#xff0c;在线旅游给景区商家的业务带来了更大的发展机遇。 在经济快速发展的带动下&#xff…

ICLR2020 Query2Box:基于BOX嵌入的向量空间知识推理8.15+8.16+8.17+8.18

Query2Box&#xff1a;基于BOX嵌入的向量空间知识推理 摘要介绍相关工作Query2Box&#xff1a;向量空间中KG的逻辑推理知识图谱与合取查询基于box嵌入的实体集推理Box嵌入源节点的初始box集合投影运算符几何相交运算符实体到box的距离训练目标使用析取范式处理析取向DNF转换聚合…

构建 NodeJS 影院微服务并使用 docker 部署它(02/4)

一、说明 构建一个微服务的电影网站&#xff0c;需要Docker、NodeJS、MongoDB&#xff0c;这样的案例您见过吗&#xff1f;如果对此有兴趣&#xff0c;您就继续往下看吧。 图片取自网络 — 封面由我制作 这是✌️“构建 NodeJS 影院微服务”系列的第二篇文章。 二、对第一部分的…

商城-学习整理-高级-商城业务-异步线程池(十三)

目录 一、线程1、初始化线程的 4 种方式2、线程池的七大参数3、线程池的运行流程&#xff1a;4、例子5、常见的 4 种线程池6、开发中为什么使用线程池 二、CompletableFuture 异步编排0、业务场景&#xff1a;1、创建异步对象2、计算完成时回调方法3、handle 方法4、线程串行化…

CSS 字体修饰属性

前言 字体修饰属性 属性说明font-family指定文本显示字体font-size设置字体的大小font-weight设置字体的粗细程度font-style设置字体的倾斜样式text-decoration给文本添加装饰线text-indent设置文本的缩进text-align设置文本的对齐方式line-height设置行高color设置文本的颜色…

Docker 的基本概念和优势,在应用程序开发中的实际应用。

Docker是一个开源的容器化平台&#xff0c;让开发者能够轻松地打包、运输和运行应用程序。其基本概念包括&#xff1a; 镜像(Image)&#xff1a;一个镜像是一个只读的软件包&#xff0c;它包含了运行应用所需的所有代码、库文件、环境变量和配置文件等。 容器(Container)&…

Nginx转发请求到后端服务报400 Bad Request

问题描述 系统部署好后&#xff0c;进行测试时发现有部分接口出错&#xff0c;项目采用Nginx作为后端代理服务器&#xff0c;有Nginx统一将请求转发到后端的网关服务&#xff0c;再由网关服务路由到具体的服务上&#xff0c;发布好后&#xff0c;大部分接口都是正常的&#xff…

Linux 线程并发运行

一、并发与并行 并行&#xff1a;两个线程在同一时刻同时执行&#xff0c;需要有两个处理器。 并发&#xff1a;两个线程在同一时刻交替执行&#xff0c;只有一个处理器。 并行是一种特殊的并发。 二、线程并发运行 代码如下&#xff1a; 代码分析&#xff1a; 主函数中第…

第 111 场LeetCode 双周赛题解

A 统计和小于目标的下标对数目 数据量小&#xff0c;直接枚举数对 class Solution { public:int countPairs(vector<int> &nums, int target) {int n nums.size();int res 0;for (int i 0; i < n; i)for (int j 0; j < i; j)if (nums[i] nums[j] < tar…

[Go版]算法通关村第十二关青铜——不简单的字符串转换问题

目录 题目&#xff1a;转换成小写字母思路分析&#xff1a;大写字母ASCII码 32 小写字母ASCII码Go代码Go代码-优化: 大写字母ASCII码 | 32 小写字母ASCII码 题目&#xff1a;字符串转换整数&#xff08;atoi&#xff09;思路分析&#xff1a;去除首部空格 明确正负 读取数…

【Spring Boot】详解条件注解以及条件拓展注解@Conditional与@ConditionOnXxx

Spring Conditional Spring 4.0提供的注解。作用是给需要装载的Bean增加一个条件判断。只有满足条件才会装在到IoC容器中。而这个条件可以由自己去完成的&#xff0c;可以通过重写Condition接口重写matches()方法去实现自定义的逻辑。所以说这个注解增加了对Bean装载的灵活性。…

STM32 CubeMX (第四步Freertos内存管理和CPU使用率)

STM32 CubeMX STM32 CubeMX &#xff08;第四步Freertos内存管理和CPU使用率&#xff09; STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用STM32 CubeMX 库&#xff0c;配置Fr…

通过安全日志读取WFP防火墙放行日志

前言 之前的文档中&#xff0c;描写了如何对WFP防火墙进行操作以及如何在防火墙日志中读取被防火墙拦截网络通讯的日志。这边文档&#xff0c;着重描述如何读取操作系统中所有被放行的网络通信行为。 读取系统中放行的网络通信行为日志&#xff0c;在win10之后的操作系统上&am…

高阶数据结构-图

高阶数据结构-图 图的表示 图由顶点和边构成&#xff0c;可分为有向图和无向图 邻接表法 图的表示方法有邻接表法和邻接矩阵法&#xff0c;以上图中的有向图为例&#xff0c;邻接表法可以表示为 A->[(B,5),(C,10)] B->[(D,100)] C->[(B,3)] D->[(E,7)] E->[…

FPGA原理与结构——ROM IP的使用与测试

一、前言 本文介绍Block Memory Generator v8.4 IP核 实现ROM&#xff0c;在学习一个IP核的使用之前&#xff0c;首先需要对于IP核的具体参数和原理有一个基本的了解&#xff0c;具体可以参考&#xff1a; FPGA原理与结构——块RAM&#xff08;Block RAM,BRAM&#xff09;http…

供应链安全和第三方风险管理:讨论如何应对供应链中的安全风险,以及评估和管理第三方合作伙伴可能带来的威胁

第一章&#xff1a;引言 在当今数字化时代&#xff0c;供应链的安全性越来越受到重视。企业的成功不仅仅依赖于产品和服务的质量&#xff0c;还取决于供应链中的安全性。然而&#xff0c;随着供应链越来越复杂&#xff0c;第三方合作伙伴的参与也带来了一系列安全风险。本文将…