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:

Firewalla DNS und CloudPanel VM

Wir verwenden als Firewall und Verwaltung der Geräte im Netzwerk die Lösung von Firewalla. Als Standardeinstellung bekommt jedes Gerät eine interne Domain mit der .lan…
Linux UnRaid Web

CloudPanel unter UnRaid installieren

CloudPanel ist ein kostenloses und modernes Server-Control-Panel zum Konfigurieren und Verwalten von Webapps mit Fokus auf Benutzerfreundlichkeit.

Laravel Linux UnRaid Web

UnRaid Docker Disk vergrößern

Kurztipp: Docker Image (vDisk) Größe erweitern bzw. vergrößern

UnRaid

Bereit für Ihr Projekt?