WebP Bilder mit Laravel Mix erstellen

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:

• Laravel Mix Webp npm Module
• Laravel Mix
• WebP Format Erklärung Wikipedia