Bildoptimierung: Konvertieren und komprimieren Sie PNG, JPG zu WebP in Node.js

Das digitale Zeitalter hat Bilder in den Vordergrund unseres Surferlebnisses gebracht. Das Problem dabei ist jedoch, dass diese Bilder oft erhebliche Bandbreite beanspruchen und sich auf die Leistung von Websites auswirken können. Diesem Problem können wir durch die Reduzierung der Bildgröße mittels eines Vorgangs namens Bildoptimierung entgegenwirken. In diesem Artikel werden wir erkunden, wie man Bilddateien wie PNG und JPG in WebP konvertiert und sie mit Node.js komprimiert.

# Warum WebP wählen?

WebP, ein modernes Bildformat, entwickelt von Google, bietet eine überlegene verlustfreie und verlustbehaftete Komprimierung für Webbilder. Durch die Konvertierung von PNG- und JPG-Dateien in WebP können wir kleinere Dateigrößen erreichen, ohne die Bildqualität zu beeinträchtigen und letztendlich unsere Websites schneller laden zu lassen.

# Node.js einrichten

Bevor wir mit dem Konvertierungsprozess beginnen, stellen wir sicher, dass Node.js installiert ist. Falls nicht, laden Sie es herunter und installieren Sie es entsprechend Ihrem Betriebssystem.

# Installation der erforderlichen Module

Wir werden zwei npm-Pakete verwenden: sharp für die Bildkonvertierung und imagemin-webp für die Bildkomprimierung.

npm install sharp imagemin imagemin-webp

# Konvertieren von Bildern in WebP

Verwenden wir das sharp-Modul, um ein PNG- oder JPG-Bild in WebP zu konvertieren. Dies geschieht, indem die Eingabedatei gelesen und in das WebP-Format umgewandelt wird.

const sharp = require('sharp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => console.log('Bildkonvertierung abgeschlossen.'))
  .catch(err => console.error(err));

# Komprimieren von WebP-Bildern

Komprimieren wir das konvertierte WebP-Bild mit dem imagemin-webp-Modul.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
  await imagemin(['output.webp'], {
    destination: 'compressed_images',
    plugins: [
      imageminWebp({quality: 50})
    ]
  });

  console.log('Bildkomprimierung abgeschlossen.');
})();

# Vollständiger Code

const sharp = require('sharp');
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => {
    (async () => {
      await imagemin(['output.webp'], {
        destination: 'compressed_images',
        plugins: [
          imageminWebp({quality: 50})
        ]
      });

      console.log('Bildkonvertierung und -komprimierung abgeschlossen.');
    })();
  })
  .catch(err => console.error(err));

Dieses vollständige Skript konvertiert Ihr Bild in das WebP-Format und komprimiert es.

# Fazit

Da haben Sie es: eine effiziente Möglichkeit, PNG und JPG in WebP mit Node.js zu konvertieren und zu komprimieren. Jetzt können Sie Ihre Bilder optimieren, die Ladezeiten Ihrer Website verkürzen und Ihren Benutzern ein besseres Erlebnis bieten. Mit etwas Übung werden Ihnen diese Schritte leicht von der Hand gehen.

# FAQ

1. Warum sollte ich WebP anstelle von PNG oder JPG verwenden? WebP bietet eine überlegene Komprimierung und ermöglicht kleinere Dateigrößen ohne wesentlichen Qualitätsverlust der Bilder.

2. Warum müssen Bilder komprimiert werden? Die Komprimierung von Bildern verringert ihre Dateigröße, was sich erheblich auf die Ladezeiten von Websites auswirken und Bandbreite sparen kann.

3. Kann ich für diese Aufgabe andere Programmiersprachen verwenden? Ja, auch andere Sprachen wie Python, Java usw. verfügen über Bibliotheken zur Bildkonvertierung und -komprimierung. Dieses Tutorial konzentriert sich jedoch auf Node.js.

4. Was ist, wenn der Konvertierungs- oder Komprimierungsprozess fehlschlägt? Stellen Sie sicher, dass Node.js und alle erforderlichen Module ordnungsgemäß installiert sind. Wenn das Problem weiterhin besteht, liegt möglicherweise ein Problem mit dem Bild selbst vor.

5. Kann ich das Komprimierungsniveau anpassen? Ja, das Plugin imagemin-webp ermöglicht die Anpassung des Qualitätsparameters, um das Komprimierungsniveau zu steuern.