[Draft] Test using new image resizing service

ui/src/design-system/components/card/card.tsx

@@ -29,7 +29,7 @@ export const Card = ({
     <div className={styles.container} style={{ maxWidth }}>
       <div className={styles.square}>
         {image ? (
-          <img src={image.src} alt={image.alt} className={styles.image} />
+          <img src={image.src + '?width=300&height=300'} alt={image.alt} className={styles.image} />
         ) : (
           <div className={styles.image}>
             <Icon

ui/src/design-system/components/image-carousel/image-carousel.tsx

@@ -68,7 +68,7 @@ const BasicImageCarousel = ({
       <div style={getPlaceholderStyles(size?.ratio)} />
       <div className={classNames(styles.slide, styles.visible)}>
         {image ? (
-          <img src={image.src} alt={image.alt} className={styles.image} />
+          <img src={image.src + '?width=300&height=300'} alt={image.alt} className={styles.image} />
         ) : (
           <Icon
             type={IconType.Photograph}
@@ -178,7 +178,7 @@ const MultiImageCarousel = ({
                   [styles.visible]: index === slideIndex,
                 })}
               >
-                <img src={image.src} alt={image.alt} className={styles.image} />
+                <img src={image.src + '?width=300&height=300'} alt={image.alt} className={styles.image} />
               </div>
             )
           })}

ui/src/pages/session-details/playback/playback.tsx

@@ -27,7 +27,7 @@ export const Playback = ({ session }: { session: SessionDetails }) => {
         onMouseOut={() => setShowOverlay(false)}
       >
         <Frame
-          src={activeCapture?.src}
+          src={activeCapture?.src + '?width=1024'}
           width={activeCapture?.width ?? session.firstCapture.width}
           height={activeCapture?.height ?? session.firstCapture.height}
           detections={activeCapture?.detections ?? []}