web: serve editorial images at quality 90 and add sizes to image blocks

web/src/components/blocks/ImageWithTextBlock.tsx

@@ -13,6 +13,15 @@ const ImageWithTextBlockFragmentDefinition = graphql(`
   }
 `);
 
+// "original" is left out: it renders at its intrinsic size, where next/image's
+// default 1x/2x srcset is the right one.
+const IMAGE_FORMAT_SIZES: Record<string, string> = {
+  bleed: "100vw",
+  // viewport minus --spacing-sitepadding-inline on both sides
+  fullwidth:
+    "(min-width: 1800px) calc(100vw - 20rem), (min-width: 1400px) calc(100vw - 12rem), (max-width: 600px) calc(100vw - 2rem), calc(100vw - 4rem)",
+};
+
 export function ImageWithTextBlock({
   block,
 }: {
@@ -28,6 +37,7 @@ export function ImageWithTextBlock({
       attribution={image.attribution}
       caption={block.text}
       imageFormat={block.imageFormat}
+      sizes={IMAGE_FORMAT_SIZES[block.imageFormat]}
     />
   );
 }

web/src/components/general/Image.tsx

@@ -35,7 +35,7 @@ export function ImageFigure(props: ImageProps) {
       className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
     >
       <div className={styles.imageWrapper}>
-        <MaybeNextImage {...imageProps} />
+        <MaybeNextImage quality={90} {...imageProps} />
         {attribution && <div className={styles.attribution}>{attribution}</div>}
       </div>
       {caption && <figcaption>{caption}</figcaption>}