WebP Bilder mit Laravel Mix erstellen

Mit Hilfe von Laravel Mix können Sie automatisiert Bilder (z.B. JPG, PNG) in das WebP Format umwandeln.

Um die Ladegeschwindigkeit Ihrer Webseite zu erhöhen, können Sie (zusätzlich) Bilder im WebP Format zur Verfügung stellen. Wir verwenden dazu Laravel Mix bzw. das Laravel Mix Webp PlugIn.

Laravel Mix Webp installieren:

npm install --save-dev laravel-mix-webp

webpack.mix.js anpassen:

require('laravel-mix-webp') mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ]).ImageWebp({ from: 'public/img', to: 'public/img', imageminWebpOptions: { quality: 78 }, })

Testen:

npm run development

Alle Bilder aus dem public/img Verzeichnis sollten jetzt zusätzlich im WebP Format zur Verfügung stehen.

Verwenden:

Das WebP Bild kann optional im srcset Tag angegeben werden. Moderne Web Browser laden somit das WebP anstelle dem alten Format.

<img src="logo.png" srcset="logo.webp">

WEITERFÜHRENDE LINKS:

Neueste Blog Einträge:

Cronjobs unter MacOS mit BetterTouchTool

Die ultimative Alternative zu Cronjobs auf MacOS: BetterTouchTool zum Automatisieren von Aufgaben!

Backup MacOS

Fotos effizient verkleinern und sicher offline synchronisieren

Wir haben ein Bash Script entwickelt, dass die Größe aller Fotos im angegebenen Verzeichnis inkl. Unterverzeichnisse verkleinert. Die Funktionen sind: Die verkleinerten Fotos können un…
Android Backup Linux MacOS

Cloudpanel Error - /usr/bin/clpctl: 5: printf: %q: invalid directive

Je nach Server OS bzw. Einstellungen kann bei Cloudpanel im CLI Modus diese Fehlermeldung kommen: $ sudo clpctl db:show:master-credentials /usr/bin/clpctl: 5: printf: %q: invalid directive…
CloudPanel

Bereit für Ihr Projekt?