Nützliche Tools zur Erstellung von AVIF Bildern

AVIF (AV1 Image File Format) ist eine moderne Spezifikation für Bilddateiformate zur Speicherung von Bildern, die im Vergleich zu anderen Formaten wie JPG, JPEG, PNG und WebP eine deutlich größere Dateieinsparung bieten. Version 1.0.0 der AVIF-Spezifikation wurde im Februar 2019 finalisiert und von der Alliance for Open Media veröffentlicht.

In diesem Artikel lernen Sie einige browserbasierte Tools und Kommandozeilentools zur Erstellung von AVIF-Bildern kennen.

Warum AVIF gegenüber JPGs, PNGs, WebP und GIF verwenden?

• Verlustfreie Komprimierung und verlustbehaftete Komprimierung
• JPEG leidet unter schrecklichem Banding
• WebP ist viel besser, aber im Vergleich zu AVIF gibt es immer noch spürbare Blockartefakte
• Mehrere Farbräume
• 8, 10, 12-Bit-Farbtiefe

Einschränkungen

Jake Archibald schrieb vor ein paar Jahren einen Artikel über dieses neue Bildformat und half uns auch, einige Nachteile bei der Komprimierung von Bildern zu identifizieren. Normalerweise sollten Sie auf diese beiden achten, wenn Sie zu AVIF komprimieren.

1. Wenn ein Benutzer das Bild im Kontext der Seite betrachtet und es ihm aufgrund der Komprimierung hässlich erscheint, dann ist dieses Komprimierungsniveau nicht akzeptabel. Aber eine winzige Stufe über dieser Grenze ist in Ordnung.
2. Es ist in Ordnung, wenn das Bild im Vergleich zum Original merkliche Details verliert, es sei denn, dieses Detail ist für den Kontext des Bildes wichtig.

Siehe auch: Addy Osmani bei Smashing Magazine geht ausführlich auf die Verwendung von AVIF und WebP ein.

Browserlösungen

Squoosh

Squoosh ist eine beliebte Web-App zur Bildkomprimierung, mit der Sie Bilder in zahlreichen Formaten in andere weit verbreitete komprimierte Formate, einschließlich AVIF, konvertieren können.

Funktionen

• Dateigrößenlimit: 4MB
• Bildeinstellungen zur Optimierung (auf der rechten Seite)
• Download-Optionen – dazu gehört die Anzeige der Größe der resultierenden Datei und der prozentualen Reduzierung gegenüber dem Originalbild
• Kostenlos nutzbar

AVIF.io

AVIF.io ist ein Bildtool, das keinerlei Code erfordert. Alles, was Sie tun müssen, ist, Ihre ausgewählten Bilder in PNG, JPG, GIF usw. hochzuladen, und es liefert Ihnen komprimierte Versionen davon.

Funktionen

• Konfigurationseinstellungen (oben rechts über dem Upload-Banner)
• Kostenlos nutzbar

Antworten auf Ihre Fragen finden Sie auf der FAQ-Seite von AVIF.io.

Kommandozeilenlösungen

avif-cli

avif-cli von lovell ermöglicht es Ihnen, Ihre Bilder (PNG, JPEG usw.) in einem Ordner zu nehmen und sie in AVIF-Bilder Ihrer angegebenen Reduktionsgröße zu konvertieren.

Hier sind die Voraussetzungen und was Sie tun müssen

• Node.js 12.13.0+

Installieren Sie das Paket

npm install avif

Führen Sie den Befehl in Ihrem Terminal aus

npx avif --input="./imgs/*" --output="./output/" --verbose

• ./imgs/* – repräsentiert den Speicherort aller Ihrer Bilddateien
• ./output/ – repräsentiert den Speicherort Ihres Ausgabeordners

Funktionen

• Kostenlos nutzbar
• Konvertierungsgeschwindigkeit kann eingestellt werden

Weitere Befehle finden Sie auf der avif-cli GitHub-Seite.

sharp

sharp ist ein weiteres nützliches Tool zur Konvertierung großer Bilder in gängigen Formaten in kleinere, webfreundliche AVIF-Bilder.

Hier sind die Voraussetzungen und was Sie tun müssen

• Node.js 12.13.0+

Installieren Sie das Paket

npm install sharp

Erstellen Sie eine JavaScript-Datei namens sharp-example.js und kopieren Sie diesen Code

const sharp = require('sharp')

const convertToAVIF = () => {
    sharp('path_to_image')
    .toFormat('avif', {palette: true})
    .toFile(__dirname + 'path_to_output_image')
}

convertToAVIF()

Wobei path_to_image den Pfad zu Ihrem Bild mit seinem Namen und seiner Erweiterung darstellt, z.B.

./imgs/example.jpg

Und path_to_output_image stellt den Pfad dar, an dem Sie Ihr Bild mit seinem Namen und neuen Erweiterung speichern möchten, z.B.

/sharp-compressed/compressed-example.avif

Führen Sie den Befehl in Ihrem Terminal aus

node sharp-example.js

Und da haben Sie es! Sie sollten eine komprimierte AVIF-Datei an Ihrem Ausgabeort haben!

Funktionen

• Kostenlos nutzbar
• Bilder können mit sharp rotiert, unscharf gemacht, in der Größe geändert, zugeschnitten, skaliert und vieles mehr werden.

Siehe auch: Stanley Ulilis Artikel über How To Process Images in Node.js With Sharp.

Fazit

AVIF ist eine Technologie, die Frontend-Entwickler für ihre Projekte in Betracht ziehen sollten. Diese Tools ermöglichen es Ihnen, Ihre vorhandenen JPEG- und PNG-Bilder in das AVIF-Format zu konvertieren. Aber wie bei der Einführung eines neuen Tools in Ihren Workflow müssen die Vor- und Nachteile entsprechend Ihrem spezifischen Anwendungsfall sorgfältig bewertet werden.

Ich hoffe, Ihnen hat das Lesen dieses Artikels genauso viel Spaß gemacht wie mir das Schreiben. Vielen Dank für Ihre Zeit und ich wünsche Ihnen einen schönen Tag!