Zephyrnet-Logo

Nützliche Tools zum Erstellen von AVIF-Bildern

Datum:

AVIF (AV1-Bilddateiformat) ist eine moderne Bilddateiformatspezifikation zum Speichern von Bildern, die im Vergleich zu anderen Formaten wie JPG, JPEG, PNG und WebP eine viel größere Dateireduktion bietet. Version 1.0.0 der AVIF-Spezifikation wurde im Februar 2019 fertiggestellt und von Alliance for Open Media der Öffentlichkeit zugänglich gemacht.

In diesem Artikel lernen Sie einige browserbasierte Tools und Befehlszeilentools zum Erstellen von AVIF-Bildern kennen.

Warum AVIF statt JPGs, PNGS, WebP und GIF verwenden?

  • Verlustfreie Komprimierung und verlustbehaftete Komprimierung
  • JPEG leidet unter schrecklicher Streifenbildung
  • WebP ist viel besser, aber im Vergleich zu AVIF gibt es immer noch eine merkliche Blockigkeit
  • Mehrere Farbräume
  • 8, 10, 12-Bit-Farbtiefe

Vorsichtsmaßnahmen

Jake Archibald, schrieb eine Artikel vor ein paar Jahren mit diesem neuen Bildformat vertraut gemacht und uns auch dabei geholfen, einige Nachteile beim Komprimieren von Bildern zu identifizieren, sollten Sie normalerweise auf diese beiden achten, wenn Sie zu AVIF komprimieren:

  1. Wenn ein Benutzer das Bild im Kontext der Seite betrachtet und es aufgrund der Komprimierung hässlich erscheint, ist diese Komprimierungsstufe nicht akzeptabel. Aber eine winzige Kerbe ü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 von Bedeutung.

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

Daten zur Unterstützung der avif-Funktion in den wichtigsten Browsern von caniuse.com

Browser-Lösungen

Squoosh

Screenshot von Squoosh.
Screenshot von 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.

Eigenschaften
  • Maximale Dateigröße: 4 MB
  • Bildoptimierungseinstellungen (auf der rechten Seite)
  • Download-Steuerelemente – dazu gehört die Anzeige der Größe der resultierenden Datei und der prozentualen Reduzierung gegenüber dem Originalbild
  • Kostenlos zu benutzen

AVIF.io

Screenshot von AVIF.io.
Screenshot von AVIF.io.

AVIF. Und 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 werden komprimierte Versionen davon zurückgegeben.

Eigenschaften
  • Conversion-Einstellungen (befindet sich oben rechts im Upload-Banner)
  • Kostenlos zu benutzen

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

Kommandozeilenlösungen

avif-cli

avif-cli by Liebes können Sie Ihre in einem Ordner gespeicherten Bilder (PNG, JPEG usw.) in AVIF-Bilder mit Ihrer angegebenen Verkleinerungsgröße konvertieren.

Hier sind die Anforderungen 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 all Ihrer Bilddateien
  • ./output/ – stellt den Speicherort Ihres Ausgabeordners dar
Eigenschaften
  • Kostenlos zu benutzen
  • Die Konvertierungsgeschwindigkeit kann eingestellt werden

Über weitere Befehle können Sie sich informieren avif-cli GitHub-Seite.

scharf

scharf ist ein weiteres nützliches Tool zum Konvertieren großer Bilder in gängigen Formaten in kleinere, webfreundliche AVIF-Bilder.

Hier sind die Anforderungen und was Sie tun müssen:

  • Node.js 12.13.0+

Installieren Sie das Paket:

npm install sharp

Erstellen Sie eine JavaScript-Datei mit dem Namen 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()

Wo  path_to_image stellt den Pfad zu Ihrem Bild mit seinem Namen und seiner Erweiterung dar, dh:

./imgs/example.jpg

Und path_to_output_image stellt den Pfad dar, in dem Ihr Bild mit seinem Namen und gespeichert werden soll neu Erweiterung, dh:

/sharp-compressed/compressed-example.avif

Führen Sie den Befehl in Ihrem Terminal aus:

node sharp-example.js

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

Eigenschaften
  • Kostenlos zu benutzen
  • Bilder können gedreht, verschwommen, in der Größe geändert, zugeschnitten, skaliert und mehr verwendet werden sharp

Siehe auch: Artikel von Stanley Ulili über So verarbeiten Sie Bilder in Node.js mit Sharp.

Zusammenfassung

AVIF ist eine Technologie, die Frontend-Entwickler für ihre Projekte in Betracht ziehen sollten. Mit diesen Tools können Sie Ihre vorhandenen JPEG- und PNG-Bilder in das AVIF-Format konvertieren. Aber wie bei jedem neuen Tool in Ihrem Workflow müssen die Vor- und Nachteile entsprechend Ihrem speziellen Anwendungsfall richtig bewertet werden.

Ich hoffe, Sie haben das Lesen dieses Artikels genauso genossen, wie ich es genossen habe, ihn zu schreiben. Vielen Dank für Ihre Zeit und ich wünsche Ihnen einen schönen Tag!

spot_img

Neueste Intelligenz

spot_img