Update compress-images action

Author: tunetheweb

.github/workflows/compress-images.yml

@@ -22,12 +22,14 @@ on:
       - '**.jpeg'
       - '**.png'
       - '**.webp'
+      - '**.avif'
   pull_request:
     paths:
       - '**.jpg'
       - '**.jpeg'
       - '**.png'
       - '**.webp'
+      - '**.avif'
   workflow_dispatch:
   schedule:
     # Run a full compression every Sunday at 11pm to start the week right

src/content/en/2021/css.md

@@ -892,7 +892,7 @@ Some other things we found in analyzing gradient values:
 * Color-stop interpolation (a.k.a. "midpoints") were used in 21% of all gradient instances.
 
 {{ figure_markup(
-  image="most-color-stops.png",
+  image="most-color-stops.jpg",
   classes="height-16vw-122px",
   caption="The linear gradient with the most color stops.",
   description="A screenshot of the gradient with the most color stops, which is a series of intricate multicolor stripes of varying hues, shading from a dirty goldenrod to greenish-blue to salmon to burnt orange.",

src/content/ja/2021/css.md

@@ -892,7 +892,7 @@ CSSグラデーションを使用しているページの割合は、昨年と
 * カラーストップ補間（別名「ミッドポイント」）は、すべてのグラデーションインスタンスの21％で使用されました。
 
 {{ figure_markup(
-  image="most-color-stops.png",
+  image="most-color-stops.jpg",
   classes="height-16vw-122px",
   caption="もっとも多くのカラーストップを持つ線形グラデーションです。",
   description="もっとも多くのカラーストップがあるグラデーションのスクリーンショット。汚れた金色から緑青、サーモン、焦げたオレンジへと変化する、さまざまな色合いの複雑なマルチカラーストライプが連続しています。",