Merge remote-tracking branch 'upstream/main'

Author: tunetheweb

.github/workflows/compress-images.yml

@@ -53,6 +53,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           compressOnly: ${{ github.event_name != 'pull_request' }}
           jpegProgressive: true
+          minPctChange: '10.0'
       - name: Create Pull Request
         # If it's not a pull request then commit any changes as a new PR
         if: |

sql/2024/media/video_adoption.sql

@@ -1,7 +1,7 @@
 #standardSQL
 # How many pages use <video>?
 # video_adoption.sql
-# â\x9d• Updated in 2024
+# ❕ Updated in 2024
 
 SELECT
   client,

sql/2025/seo/core-web-vitals-2025.sql

@@ -16,16 +16,24 @@ SELECT
     COUNT(DISTINCT IF(IS_GOOD(fast_fid, avg_fid, slow_fid), origin, NULL)),
     COUNT(DISTINCT IF(IS_NON_ZERO(fast_fid, avg_fid, slow_fid), origin, NULL))
   ) AS pct_good_fid,
+  # Origins with good INP divided by origins with any INP.
+  SAFE_DIVIDE(
+    COUNT(DISTINCT IF(IS_GOOD(fast_inp, avg_inp, slow_inp), origin, NULL)),
+    COUNT(DISTINCT IF(IS_NON_ZERO(fast_inp, avg_inp, slow_inp), origin, NULL))
+  ) AS pct_good_inp,
   # Origins with good CLS divided by origins with any CLS.
   SAFE_DIVIDE(
     COUNT(DISTINCT IF(IS_GOOD(small_cls, medium_cls, large_cls), origin, NULL)),
     COUNT(DISTINCT IF(IS_NON_ZERO(small_cls, medium_cls, large_cls), origin, NULL))
   ) AS pct_good_cls,
-  # Origins with good LCP, FID, and CLS dividied by origins with any LCP, FID, and CLS.
+  # Origins with good LCP, FID/INP, and CLS dividied by origins with any LCP, and CLS.
   SAFE_DIVIDE(
     COUNT(DISTINCT IF(
       IS_GOOD(fast_lcp, avg_lcp, slow_lcp) AND
-      IS_GOOD(fast_fid, avg_fid, slow_fid) IS NOT FALSE AND
+      (
+        (date >= '2024-03-01' AND IS_GOOD(fast_inp, avg_inp, slow_inp) IS NOT FALSE) OR
+        (date < '2024-03-01' AND IS_GOOD(fast_fid, avg_fid, slow_fid) IS NOT FALSE)
+      ) AND
       IS_GOOD(small_cls, medium_cls, large_cls), origin, NULL
     )),
     COUNT(DISTINCT IF(

src/config/2025.json

@@ -74,8 +74,7 @@
           "part": "II",
           "chapter_number": "8",
           "title": "SEO",
-          "slug": "seo",
-          "todo": true
+          "slug": "seo"
         },
         {
           "part": "II",

src/config/contributors.json

@@ -443,6 +443,17 @@
     },
     "twitter": "kripken"
   },
+  "Amaka-maxi": {
+    "avatar_url": "211726608",
+    "github": "Amaka-maxi",
+    "name": "Amaka Chulwuma",
+    "linkedin": "amaka-chukwuma-jubilee",
+    "teams": {
+      "2025": [
+        "authors"
+      ]
+    }
+  },
   "cyberandy": {
     "avatar_url": "837037",
     "github": "cyberandy",
@@ -627,6 +638,14 @@
     },
     "twitter": "arturjanc"
   },
+  "augustin_delport": {
+    "name": "Augustin Delport",
+    "teams": {
+      "2025": [
+        "analysts"
+      ]
+    }
+  },
   "ashleyish": {
     "avatar_url": "35119235",
     "github": "ashleyish",
@@ -659,11 +678,11 @@
     "name": "Barry Pollard",
     "teams": {
       "2019": [
-        "brainstormers",
         "authors",
-        "reviewers",
+        "brainstormers",
+        "developers",
         "editors",
-        "developers"
+        "reviewers"
       ],
       "2020": [
         "analysts",
@@ -1103,6 +1122,21 @@
       ]
     }
   },
+  "chr156r33n": {
+    "avatar_url": "75560394",
+    "bluesky": "chris-green.net",
+    "github": "chr156r33n",
+    "linkedin": "chrisgreenseo",
+    "name": "Chris Green",
+    "teams": {
+      "2025": [
+        "analysts",
+        "authors"
+      ]
+    },
+    "twitter": "chrisgreenseo",
+    "website": "https://www.torquepartnership.com/"
+  },
   "svgeesus": {
     "avatar_url": "2506926",
     "github": "svgeesus",
@@ -2163,6 +2197,9 @@
       ],
       "2024": [
         "authors"
+      ],
+      "2025": [
+        "reviewers"
       ]
     },
     "twitter": "Jammer_Volts",
@@ -3166,6 +3203,9 @@
       "2024": [
         "authors",
         "editors"
+      ],
+      "2025": [
+        "editors"
       ]
     },
     "twitter": "MichaelLewittes",
@@ -3268,8 +3308,8 @@
         "authors"
       ],
       "2025": [
-        "authors",
-        "analysts"
+        "analysts",
+        "authors"
       ]
     },
     "website": "https://accessibility.civicactions.com/"
@@ -3347,6 +3387,9 @@
     "teams": {
       "2024": [
         "editors"
+      ],
+      "2025": [
+        "editors"
       ]
     },
     "website": "https://montserrat-cano.com/"
@@ -4486,6 +4529,9 @@
     "teams": {
       "2022": [
         "authors"
+      ],
+      "2025": [
+        "authors"
       ]
     },
     "twitter": "SophieBrannon"
@@ -4550,6 +4596,18 @@
     "twitter": "allema_s",
     "website": "https://sebastienallemand.fr/"
   },
+  "hello-sharon": {
+    "avatar_url": "211817205",
+    "github": "hello-sharon",
+    "linkedin": "sharonmcclintic",
+    "name": "Sharon McClintic",
+    "teams": {
+      "2025": [
+        "editors"
+      ]
+    },
+    "website": "https://www.lumar.io/"
+  },
   "tjmonsi": {
     "avatar_url": "2645718",
     "github": "tjmonsi",

src/content/en/2021/media.md

@@ -433,19 +433,59 @@ When browsers pick a resource to load out of a `srcset`, they first assign every
 
 On a 500-CSS-`px`-wide viewport, these resources will be assigned the following densities:
 
-| Resource | Density |
-|---|---|
-| `large.jpg` | `1000w` ÷ `500px` = 2x |
-| `medium.jpg` | `750w` ÷ `500px` = 1.5x |
-| `small.jpg` | `500w` ÷ `500px` = 1x |
+<figure>
+  <table>
+    <thead>
+      <tr>
+        <th>Resource</th>
+        <th>Density</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>large.jpg</code></td>
+        <td><code>1000w</code> ÷ <code>500px</code> = 2x</td>
+      </tr>
+      <tr>
+        <td><code>medium.jpg</code></td>
+        <td><code>750w</code> ÷ <code>500px</code> = 1.5x</td>
+      </tr>
+      <tr>
+        <td><code>small.jpg</code></td>
+        <td><code>500w</code> ÷ <code>500px</code> = 1x</td>
+      </tr>
+    </tbody>
+  </table>
+  <figcaption>{{ figure_link(caption="500px densities") }}</figcaption>
+</figure>
 
 However, on a 1000-CSS-`px`-wide viewport, these same resources, marked up with the same `srcset` and `sizes` values, will have different densities:
 
-| Resource | Density |
-|---|---|
-| `large.jpg` | `1000w` ÷ `1000px` = 1x |
-| `medium.jpg` | `750w` ÷ `1000px` = 0.75x |
-| `small.jpg` | `500w` ÷ `1000px` = 0.5x |
+<figure>
+  <table>
+    <thead>
+      <tr>
+        <th>Resource</th>
+        <th>Density</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>large.jpg</code></td>
+        <td><code>1000w</code> ÷ <code>1000px</code> = 1x</td>
+      </tr>
+      <tr>
+        <td><code>medium.jpg</code></td>
+        <td><code>750w</code> ÷ <code>1000px</code> = 0.75x</td>
+      </tr>
+      <tr>
+        <td><code>small.jpg</code></td>
+        <td><code>500w</code> ÷ <code>1000px</code> = 0.5x</td>
+      </tr>
+    </tbody>
+  </table>
+  <figcaption>{{ figure_link(caption="1000px densities") }}</figcaption>
+</figure>
 
 After these densities are calculated, browsers pick the resource with the density that's the best match for the current browsing context. It's safe to say that in this example, the `srcset` did not contain a wide-enough range of resources. Viewports measuring more than 1,000 CSS `px` across, with higher than `1x` densities, are not uncommon; if you're reading this on a laptop, you're probably browsing in such a context, right now. And in these contexts, the best browsers can do is pick `large.jpg`, whose 1x density will still appear blurry on the high-density display.