feat: improve image quality in UX

argos-ci · May 29, 2024 · d4c6708 · d4c6708
1 parent a8f898b
commit d4c6708
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 21 deletions.
diff --git a/apps/frontend/src/pages/Build/BuildDetail.tsx b/apps/frontend/src/pages/Build/BuildDetail.tsx
@@ -10,6 +10,7 @@ import { IconButtonLink } from "@/ui/IconButton";
 import { Link } from "@/ui/Link";
 import { Time } from "@/ui/Time";
 import { Tooltip } from "@/ui/Tooltip";
+import { TwicPicture } from "@/ui/TwicPicture";
 import { useScrollListener } from "@/ui/useScrollListener";
 
 import { BuildDetailToolbar } from "./BuildDetailToolbar";
@@ -279,7 +280,7 @@ const BaseScreenshot = ({ diff, buildId }: { diff: Diff; buildId: string }) => {
             dimensions={diff.baseScreenshot!}
             contained={contained}
           >
-            <img
+            <TwicPicture
               key={key}
               className={clsx(contained && "max-h-full")}
               alt="Baseline screenshot"
@@ -305,12 +306,12 @@ const BaseScreenshot = ({ diff, buildId }: { diff: Diff; buildId: string }) => {
           }
         >
           <ScreenshotContainer dimensions={diff} contained={contained}>
-            <img
+            <TwicPicture
               key={diffKey}
               className={clsx("relative opacity-0", contained && "max-h-full")}
               {...diffAttrs}
             />
-            <img
+            <TwicPicture
               key={baseKey}
               className="absolute left-0 top-0"
               alt="Baseline screenshot"
@@ -364,7 +365,7 @@ const CompareScreenshot = ({
             dimensions={diff.compareScreenshot!}
             contained={contained}
           >
-            <img
+            <TwicPicture
               key={key}
               className={clsx(contained && "max-h-full max-w-full")}
               alt="Changes screenshot"
@@ -386,7 +387,7 @@ const CompareScreenshot = ({
             dimensions={diff.compareScreenshot!}
             contained={contained}
           >
-            <img
+            <TwicPicture
               key={key}
               className={clsx(contained && "max-h-full")}
               alt="Failure screenshot"
@@ -408,7 +409,7 @@ const CompareScreenshot = ({
             dimensions={diff.compareScreenshot!}
             contained={contained}
           >
-            <img
+            <TwicPicture
               key={key}
               className={clsx(contained && "max-h-full")}
               alt="Retried failure screenshot"
@@ -430,7 +431,7 @@ const CompareScreenshot = ({
             dimensions={diff.compareScreenshot!}
             contained={contained}
           >
-            <img
+            <TwicPicture
               key={key}
               className={clsx(contained && "max-h-full")}
               alt="Baseline screenshot"
@@ -470,15 +471,15 @@ const CompareScreenshot = ({
           }
         >
           <ScreenshotContainer dimensions={diff} contained={contained}>
-            <img
+            <TwicPicture
               key={compareKey}
               className={clsx(
                 "absolute left-0 top-0",
                 visible && "opacity-disabled",
               )}
               {...compareAttrs}
             />
-            <img
+            <TwicPicture
               key={diffKey}
               className={clsx(
                 opacity,

diff --git a/apps/frontend/src/pages/Build/BuildDiffList.tsx b/apps/frontend/src/pages/Build/BuildDiffList.tsx
@@ -30,6 +30,7 @@ import { Badge } from "@/ui/Badge";
 import { Button, ButtonIcon, ButtonProps } from "@/ui/Button";
 import { HotkeyTooltip } from "@/ui/HotkeyTooltip";
 import { Truncable } from "@/ui/Truncable";
+import { TwicPicture } from "@/ui/TwicPicture";
 
 import { getGroupLabel } from "./BuildDiffGroup";
 import {
@@ -242,20 +243,20 @@ const ListHeader = ({
   );
 };
 
-const getImgAttributes = (
+function getImgAttributes(
   url: string,
   dimensions?: { width: number; height: number },
-) => {
-  const src = dimensions
-    ? `${url}?contain-max=${dimensions.width * 2}x${dimensions.height * 2}`
-    : url;
+) {
   return {
-    key: src,
-    src,
+    key: url,
+    src: url,
     width: dimensions?.width,
     height: dimensions?.height,
+    transforms: dimensions
+      ? [`contain-max=${dimensions.width * 2}x${dimensions.height * 2}`]
+      : [],
   };
-};
+}
 
 const DiffImage = memo(({ diff }: { diff: Diff }) => {
   const dimensions = getDiffDimensions(diff);
@@ -270,7 +271,7 @@ const DiffImage = memo(({ diff }: { diff: Diff }) => {
         dimensions,
       );
       return (
-        <img
+        <TwicPicture
           key={key}
           {...attrs}
           className="max-h-full max-w-full object-contain"
@@ -283,7 +284,7 @@ const DiffImage = memo(({ diff }: { diff: Diff }) => {
         dimensions,
       );
       return (
-        <img
+        <TwicPicture
           key={key}
           {...attrs}
           className="max-h-full max-w-full object-contain"
@@ -305,13 +306,13 @@ const DiffImage = memo(({ diff }: { diff: Diff }) => {
             className="relative"
             style={{ width: dimensions.width, height: dimensions.height }}
           >
-            <img
+            <TwicPicture
               key={compareKey}
               {...compareAttrs}
               className="absolute w-full"
             />
             <div className="bg-app absolute inset-0 opacity-70" />
-            <img
+            <TwicPicture
               key={diffKey}
               {...diffAttrs}
               className="relative z-10 max-h-full w-full"

diff --git a/apps/frontend/src/ui/TwicPicture.tsx b/apps/frontend/src/ui/TwicPicture.tsx
@@ -0,0 +1,32 @@
+export function twic(url: string, transforms: string[]): string {
+  return `${url}?twic=v1/${transforms.join("/")}`;
+}
+
+export function TwicPicture(
+  props: React.ImgHTMLAttributes<HTMLImageElement> & {
+    src: string;
+    transforms?: string[];
+  },
+) {
+  const { src, transforms = [], ...rest } = props;
+  return (
+    <picture>
+      <source
+        srcSet={twic(src, ["format=avif", "quality=90", ...transforms])}
+        type="image/avif"
+      />
+      <source
+        srcSet={twic(src, ["format=webp", "quality=90", ...transforms])}
+        type="image/webp"
+      />
+      <source
+        srcSet={twic(src, ["format=png", "quality=90", ...transforms])}
+        type="image/png"
+      />
+      <img
+        src={twic(src, ["format=png", "quality=90", ...transforms])}
+        {...rest}
+      />
+    </picture>
+  );
+}