fix: use webp images in layout

src/app/tools/layout.tsx

@@ -19,17 +19,32 @@ export default function ToolsLayout({ children }: ToolsLayoutProps) {
       <div
         style={{
           height: 128,
-          backgroundImage: `url(/assets/banners/${toolId}.png)`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
           boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           gap: 4,
           flexDirection: 'column',
+          position: 'relative',
+          overflow: 'hidden',
         }}
       >
+        <div
+          style={{
+            position: 'absolute',
+            backgroundImage: `url(/assets/banners/${toolId}.webp)`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            width: '100%',
+            height: '100%',
+            top: 0,
+            left: 0,
+            zIndex: -1,
+            filter: 'blur(4px)',
+            transform: 'scale(calc((128 + 8) / 128))',
+          }}
+        />
+
         <span
           style={{
             color: theme.colors.textHighContrast,