[Website] Convert remaining images to WebP and compress some current ones. (#21404)

As title. Also deleted some unused assets that are no longer required.

packages/twenty-website/public/images/home/logo-bar/others-shape.svg

@@ -1,3 +0,0 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 157 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="shape" d="M4 0.5H153C154.933 0.5 156.5 2.067 156.5 4V30.8594C156.5 31.6178 156.253 32.3556 155.798 32.9619L145.922 46.1025C145.261 46.9821 144.224 47.4999 143.124 47.5H4C2.067 47.5 0.5 45.933 0.5 44V4C0.5 2.067 2.067 0.5 4 0.5Z" fill="var(--fill-0, #FAFAFA)" stroke="var(--stroke-0, #8174F8)"/>
-</svg>

packages/twenty-website/src/app/[locale]/(home)/page.tsx

@@ -41,7 +41,7 @@ export default async function HomePage({ params }: HomePageProps) {
       <link
         as="image"
         fetchPriority="high"
-        href="/illustrations/generated/home-background-bridge.png"
+        href="/illustrations/generated/home-background-bridge.webp"
         rel="preload"
       />
       <link

packages/twenty-website/src/app/[locale]/releases/page.tsx

@@ -41,7 +41,7 @@ export default async function ReleasesPage({ params }: ReleasesPageProps) {
        */}
       <link
         as="image"
-        href="/illustrations/generated/milestone.jpg"
+        href="/illustrations/generated/milestone.webp"
         rel="preload"
       />
       <Menu

packages/twenty-website/src/lib/halftone/utils/materials.ts

@@ -446,7 +446,7 @@ const GLASS_ENVIRONMENT_INTENSITY_MULTIPLIER = 0.12;
 const GLASS_ENVIRONMENT_ZOOM = 1.55;
 const GLASS_TRANSMISSION_BACKGROUND = new THREE.Color(0x030303);
 const GLASS_TEXTURE_URLS = {
-  environment: '/halftone/materials/glass/environment.jpg',
+  environment: '/halftone/materials/glass/environment.webp',
 } as const;
 const MAX_TEXTURE_ANISOTROPY = 8;
 

packages/twenty-website/src/sections/Hero/visuals/hooks/use-home-background-halftone.ts

@@ -13,7 +13,7 @@ import { useEffect, useState, type RefObject } from 'react';
 import * as THREE from 'three';
 
 const HOME_BACKGROUND_IMAGE_URL =
-  '/illustrations/generated/home-background-bridge.png';
+  '/illustrations/generated/home-background-bridge.webp';
 
 const REFERENCE_PREVIEW_DISTANCE = 4;
 

packages/twenty-website/src/sections/Hero/visuals/utils/milestone-config.ts

@@ -8,7 +8,7 @@ import {
 
 export type MilestoneSettingsOverrides = HalftoneStudioSettingsOverrides;
 
-export const MILESTONE_IMAGE_URL = '/illustrations/generated/milestone.jpg';
+export const MILESTONE_IMAGE_URL = '/illustrations/generated/milestone.webp';
 export const MILESTONE_IMAGE_FIT: HalftoneImageFit = 'cover';
 export const MILESTONE_PREVIEW_DISTANCE = 4;