:x

:x

img/convert.sh

@@ -1,11 +1,12 @@
 #!/bin/bash
 
 set -e
+shopt -s nullglob
 
 function make_jpg {
 	if [ ! -f $2/$1 ]; then
 		echo "Converting $2/$1"
-		convert $1 -resize $2x$2 -quality 30 $2/$1
+		magick $1 -resize $2x$2 -quality 30 $2/$1
 	fi
 }
 
@@ -13,7 +14,15 @@ function make_webp {
 	NAME="$(basename $1 .jpg).webp"
 	if [ ! -f $2/$NAME ]; then
 		echo "Converting $2/$NAME"
-		convert $1 -resize $2x$2 -quality 30 $2/$NAME
+		magick $1 -resize $2x$2 -quality $3 $2/$NAME
+	fi
+}
+
+function make_avif {
+	NAME="$(basename $1 .jpg).avif"
+	if [ ! -f $2/$NAME ]; then
+		echo "Converting $2/$NAME"
+		magick $1 -resize $2x$2 -quality $3 $2/$NAME
 	fi
 }
 
@@ -24,19 +33,29 @@ for f in original/*.jpg; do
 done
 
 for img in *.jpg; do
-	make_jpg $img 2400
-	make_jpg $img 1600
-	make_jpg $img 1200
-	make_jpg $img 800
-	make_jpg $img 600
-	make_jpg $img 400
-	make_jpg $img 200
+	make_jpg $img 2400 &
+	make_jpg $img 1600 &
+	make_jpg $img 1200 &
+	make_jpg $img 800 &
+	make_jpg $img 600 &
+	make_jpg $img 400 &
+	make_jpg $img 200 &
 
-	make_webp $img 2400
-	make_webp $img 1600
-	make_webp $img 1200
-	make_webp $img 800
-	make_webp $img 600
-	make_webp $img 400
-	make_webp $img 200
+	make_webp $img 2400 50 &
+	make_webp $img 1600 50 &
+	make_webp $img 1200 50 &
+	make_webp $img 800 40 &
+	make_webp $img 600 40 &
+	make_webp $img 400 40 &
+	make_webp $img 200 40 &
+
+	make_avif $img 2400 70 &
+	make_avif $img 1600 70 &
+	make_avif $img 1200 70 &
+	make_avif $img 800 60 &
+	make_avif $img 600 60 &
+	make_avif $img 400 50 &
+	make_avif $img 200 50 &
+
+	wait
 done

src/components/picture.tsx

@@ -17,6 +17,7 @@ export interface State {
 interface SrcSetInfo {
   jpeg: string;
   webp: string;
+  avif: string;
   bestSrc: string;
 }
 
@@ -45,6 +46,7 @@ export class Picture extends React.PureComponent<Props, State> {
 
     return (
       <picture>
+        <source srcSet={srcSet.avif} type="image/avif" />
         <source srcSet={srcSet.webp} type="image/webp" />
         <source srcSet={srcSet.jpeg} type="image/jpeg" />
         <img
@@ -61,6 +63,7 @@ export class Picture extends React.PureComponent<Props, State> {
   private _srcset = (): SrcSetInfo => {
     const jpegSrcSet: string[] = [];
     const webpSrcSet: string[] = [];
+    const avifSrcSet: string[] = [];
     let bestSize = 800;
     let bestScale = Infinity;
 
@@ -75,8 +78,10 @@ export class Picture extends React.PureComponent<Props, State> {
       if (scale >= 1 || size === 2400) {
         const jpeg = `img/${size}/${this.props.image.src}`;
         const webp = jpeg.replace("jpg", "webp");
+        const avif = jpeg.replace("jpg", "avif");
         jpegSrcSet.push(`${jpeg} ${scale}x`);
         webpSrcSet.push(`${webp} ${scale}x`);
+        avifSrcSet.push(`${avif} ${scale}x`);
         if (scale < bestScale) {
           bestSize = size;
           bestScale = scale;
@@ -87,6 +92,7 @@ export class Picture extends React.PureComponent<Props, State> {
     return {
       jpeg: jpegSrcSet.join(","),
       webp: webpSrcSet.join(","),
+      avif: avifSrcSet.join(","),
       bestSrc: `img/${bestSize}/${this.props.image.src}`,
     };
   };