使用 Node.js 生成優(yōu)化的圖像格式

圖像是任何 Web 應用程序的重要組成部分，但如果優(yōu)化不當，它們也可能成為性能問題的主要根源。在本文中，我們將介紹如何使用 Node.js 自動生成優(yōu)化的圖像格式，并以最適合用戶瀏覽器的格式顯示它們。

配置

首先我們需要一個為我們處理圖像處理的庫，而Sharp就是本文將使用的圖像處理庫。Sharp 是一個用于圖像處理和操作的高性能 Node.js 庫。它的設計速度快、內(nèi)存效率高，非常適合處理大圖像和生成多種圖像格式。

安裝：

npm i sharp

圖像生成腳本

優(yōu)化網(wǎng)絡圖像的第一步是為每個圖像生成多種格式，每種格式都有自己的優(yōu)點和缺點。某些格式（例如 JPEG）適合具有多種顏色的復雜圖像，而其他格式（例如 WebP）更適合具有較少顏色的簡單圖像。具體的圖片格式分析請看前端圖片格式這篇文章。

要生成不同的圖像格式，我們可以使用 Node.js 和 Sharp 圖像處理庫。下面是一個示例腳本，它為圖像文件夾中的每個圖像生成 avif 和 webp 格式：

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'];

在這幾行代碼中，導入sharp和fs庫，將輸入文件夾設置為images，將輸出文件夾設置為output，并將要生成的格式定義為avif和webp。

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

在這里，代碼檢查是否存在輸出文件夾outputFolder，如果不存在，則使用 fs.mkdirSync()方法來創(chuàng)建它。這可確保在生成任何圖像之前輸出文件夾存在。

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結(jié)尾，則繼續(xù)生成相應的avif和webp文件。

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()循環(huán)遍歷每種格式（即avif和webp）。對于每種格式，它將輸出文件路徑定義為outputPath

如果輸出文件不存在，則使用 Sharp 的toFormat()函數(shù)以指定格式生成相應的圖像，質(zhì)量為 80。然后使用toFile()保存輸出文件，并向控制臺記錄一條消息，指示文件已保存。

在瀏覽器中顯示優(yōu)化的圖像

一旦我們?yōu)槊總€輸入圖像生成了多種優(yōu)化的圖像格式，我們就可以在應用程序中顯示它們。為此，我們可以使用 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 它將用作不支持avif或webp的瀏覽器的后備顯示圖像。

在瀏覽器的請求：

可以看到瀏覽器使用webp的方式展示圖片。

結(jié)論

網(wǎng)站上的圖像加載速度可能很慢，并且在不同設備上看起來并不總是很好。重要的是要讓它們加載得更快、看起來更好，這樣人們才能更喜歡我們的網(wǎng)站。在本文中我們學習了如何使用 Sharp 和 HTML 中的<picture>，<source>制作同一圖像的不同版本，并為每種設備顯示最佳版本。通過這樣做，我們的網(wǎng)站對于每個使用它的人來說將會更快、看起來更好！文章來源地址http://www.zghlxwxcb.cn/news/detail-661948.html

到了這里，關(guān)于使用 Node.js 生成優(yōu)化的圖像格式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！