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:

Webseite für Rechtsanwalt und Steuerberater

Ihre Kanzlei verdient einen Webauftritt, der so professionell und sicher ist wie Ihre Beratung. Ich realisiere moderne, datenschutzkonforme Webseiten, die einfach funktionieren und Vertrauen schaffen – ohne Datenbank-Risiko und Wartungsstress.

Web

Gmail als Web-App im Brave Browser einrichten

Progressive Web Apps (PWAs) sind Webseiten, die wie native Apps funktionieren. Sie bieten ein app-ähnliches Erlebnis direkt im Browser, ohne Installation aus einem App-Store. Mit dem Brave Browser kannst du PWAs nutzen, um deine Lieblingsdienste wie Gmail effizienter zu verwenden.

Web

LanguageTool unter MacOS lokal installieren

LanguageTool ist ein vielseitiges, Open-Source-Tool zur Überprüfung von Grammatik, Rechtschreibung und Stil in über 30 Sprachen. Es kann als eigenständige Anwendung, Webservice oder als Plugin in Programmen wie Browsern und Office-Suiten genutzt werden.

MacOS

Bereit für Ihr Projekt?