Blog

Laravel

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">

Mein Ziel ist es, selbst bei hoher Komplexität der Zielvorgabe, sinnvolle Lösungen mit innovativer Technologie für Sie zu entwickeln und nachhaltig zu betreuen. Um das gewährleisten zu können, arbeite ich seit vielen Jahren mit einem eingespielten Team von Projektmanagern, Programmierern, Designern und Fotografen zusammen.

Wolfgang Hollaus

Geschäftsleitung

Wir freuen uns auf Ihre Anfrage!

Kontaktieren Sie uns unverbindlich zu allen Fragen für individuelle Webapplikationen, Webseiten oder Automatisierungen und Digitalisierungen in Ihrem Unternehmen.

Angebot gleich anfragen
App screenshot