replaced AI Tools CTA images with webp files, added preloading

src/website/packages/fakeyou.com/public/index_fakeyou.html

@@ -43,6 +43,43 @@
       href="%PUBLIC_URL%/mascot/kitsune_pose3.webp"
     />
 
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/2d_vid_com_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/2d_vid_com_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/2d_vid_com_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/2d_vid_com_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/3d_vid_com_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/3d_vid_com_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/3d_vid_com_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/3d_vid_com_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/lipsync_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/lipsync_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/lipsync_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/lipsync_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/live_portrait_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/live_portrait_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/live_portrait_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/live_portrait_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/vst_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/vst_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/vst_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/vst_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/webcam_acting_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/webcam_acting_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/webcam_acting_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/webcam_acting_3x.webp 3x"
+    />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#1c1c25" />
     <meta

src/website/packages/fakeyou.com/public/index_storyteller.html

@@ -43,6 +43,43 @@
       href="%PUBLIC_URL%/mascot/kitsune_pose3.webp"
     />
 
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/2d_vid_com_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/2d_vid_com_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/2d_vid_com_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/2d_vid_com_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/3d_vid_com_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/3d_vid_com_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/3d_vid_com_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/3d_vid_com_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/lipsync_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/lipsync_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/lipsync_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/lipsync_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/live_portrait_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/live_portrait_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/live_portrait_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/live_portrait_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/vst_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/vst_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/vst_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/vst_3x.webp 3x"
+    />
+    <link
+      rel="preload"
+      as="image"
+      href="%PUBLIC_URL%/images/ai-tools/webcam_acting_1x.webp"
+      imagesrcset="%PUBLIC_URL%/images/ai-tools/webcam_acting_1x.webp 1x, %PUBLIC_URL%/images/ai-tools/webcam_acting_2x.webp 2x, %PUBLIC_URL%/images/ai-tools/webcam_acting_3x.webp 3x"
+    />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#1c1c25" />
     <meta name="description" content="Storyteller.ai AI creation engine" />
@@ -53,13 +90,18 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-K7MJ8LMJ7S"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-K7MJ8LMJ7S"
+    ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-      gtag('config', 'G-K7MJ8LMJ7S');
+      gtag("config", "G-K7MJ8LMJ7S");
     </script>
 
     <!--

src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx

@@ -32,7 +32,7 @@ export default function AITools() {
       title: t("productVideoStyleTransferTitle"),
       text: t("productVideoStyleTransferText"),
       videoSrc: "/videos/ai-tools/vst_video.mp4",
-      videoPosterSrc: "/images/ai-tools/vst_video_poster.jpg",
+      videoPosterSrc: "/images/ai-tools/vst",
       imgAlt: "Video Style Transfer",
       badgeContent: {
         type: "new",
@@ -45,7 +45,7 @@ export default function AITools() {
       title: t("productLivePortraitTitle"),
       text: t("productLivePortraitText"),
       videoSrc: "/videos/ai-tools/lp_video.mp4",
-      videoPosterSrc: "/images/ai-tools/lp_video_poster.jpg",
+      videoPosterSrc: "/images/ai-tools/live_portrait",
       imgAlt: "Live Portrait",
       badgeContent: {
         type: "new",
@@ -58,7 +58,7 @@ export default function AITools() {
       title: t("productLipsyncTitle"),
       text: t("productLipsyncText"),
       videoSrc: "/videos/ai-tools/ls_video.mp4",
-      videoPosterSrc: "/images/ai-tools/ls_video_poster.jpg",
+      videoPosterSrc: "/images/ai-tools/lipsync",
       imgAlt: "Lipsync",
     },
     {
@@ -66,7 +66,7 @@ export default function AITools() {
       title: "2D Video Compositor",
       text: "Compose videos and images with AI",
       videoSrc: "/videos/ai-tools/vcomp_video_2.mp4",
-      videoPosterSrc: "/images/ai-tools/vcomp_video_poster_2.jpg",
+      videoPosterSrc: "/images/ai-tools/2d_vid_com",
       imgAlt: "Video Compositor",
       videoPosition: "top",
     },
@@ -75,7 +75,7 @@ export default function AITools() {
       title: "3D Video Compositor",
       text: "Build videos with AI 3D engine",
       videoSrc: "/videos/ai-tools/vcomp_video.mp4",
-      videoPosterSrc: "/images/ai-tools/vcomp_video_poster.jpg",
+      videoPosterSrc: "/images/ai-tools/3d_vid_com",
       imgAlt: "Video Compositor",
     },
     {
@@ -83,7 +83,7 @@ export default function AITools() {
       title: "Webcam Acting",
       text: "Act as your character through your camera",
       videoSrc: "/videos/ai-tools/ca_video.mp4",
-      videoPosterSrc: "/images/ai-tools/ca_video_poster.jpg",
+      videoPosterSrc: "/images/ai-tools/webcam_acting",
       imgAlt: "Video Compositor",
     },
     {

src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx

@@ -133,7 +133,7 @@ export function AIToolsItem({
           >
             {videoPosterSrc && (
               <div
-                className={`h-100 w-100 ${
+                className={`h-100 w-100 object-fit-cover ${
                   showPoster ? "opacity-100" : "opacity-0"
                 }`}
                 style={{
@@ -145,7 +145,11 @@ export function AIToolsItem({
                 }}
               >
                 <img
-                  src={videoPosterSrc}
+                  {...{
+                    fetchPriority: "high",
+                    src: `${videoPosterSrc}_1x.webp`,
+                    srcSet: `${videoPosterSrc}_1x.webp, ${videoPosterSrc}_2x.webp 2x, ${videoPosterSrc}_3x.webp 3x`,
+                  }}
                   className="h-100 w-100 object-fit-cover"
                   alt={imgAlt}
                 />