AVIF for the two pictures every visitor fetches

The banner on the home page is that page's largest contentful paint --
literally the thing Google times the page by -- and at 1280 wide it was
99.5 KB. The logo lockup is in the header of every page. Both now have
an AVIF beside them, offered first through <picture>; a browser that
cannot read it skips the source and takes the WebP underneath, which is
the file it gets today.

  hero 1280w   99.5 KB -> 58.0 KB   42% smaller
  hero  800w   44.3 KB -> 26.0 KB   41% smaller
  logo  400w   27.2 KB -> 17.4 KB   36% smaller
  logo  240w   16.8 KB -> 10.1 KB   40% smaller

Smaller is easy; smaller without looking worse is the part worth
checking. Decoded against the original and compared pixel by pixel, mean
absolute error per channel, alpha composited rather than discarded:

  hero 1280w   2.50 -> 2.51   the same picture, at 58% of the weight
  hero  800w   3.18 -> 2.93   closer to the original than the WebP is
  logo  400w   2.28 -> 1.31   closer
  logo  240w   3.42 -> 1.68   closer

The logo gains most because flat colour and hard edges are what AVIF is
best at and what WebP handles worst. Its transparency survives the
encode and the dimensions match exactly, which is the thing to confirm
before believing any of the above -- an opaque AVIF would have put a
black box in the header of every page.

scripts/image-variants.mjs writes them, from the same widths the markup
asks for, and runs first in build and dev. It writes nothing when the
copies are already newer than their source, so a publish that changes no
picture produces no diff. Like fetch-content.mjs it never fails the
build: sharp is a native dependency, and a machine that cannot install
it still publishes the site from what is committed, and says so.

The WebP files are left exactly as they are. The first version of this
regenerated them too, at a lower quality, which is a generation of loss
for nothing -- the gain here is the format, not the quality dial.

<picture> wraps the img with display:contents, so it is a wrapper for
the browser's choosing rather than a box in the layout. The hero img is
absolutely positioned and an inline <picture> around it would still
generate a line box inside the band.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0128YzbhrfGdegUSc9RrARRf

Author: claude

.site-manifest.json

@@ -18,13 +18,20 @@
   "index.html",
   "maruti-brezza-self-drive-car-rental-nagercoil.avif",
   "monthly",
+  "mountain-road-at-sunrise-self-drive-car-rental-1280w.avif",
   "mountain-road-at-sunrise-self-drive-car-rental-1280w.webp",
+  "mountain-road-at-sunrise-self-drive-car-rental-800w.avif",
   "mountain-road-at-sunrise-self-drive-car-rental-800w.webp",
+  "mountain-road-at-sunrise-self-drive-car-rental.avif",
   "mountain-road-at-sunrise-self-drive-car-rental.webp",
   "nitesha-cars-and-bikes-emblem.webp",
+  "nitesha-cars-and-bikes-logo-nagercoil-v2-240w.avif",
   "nitesha-cars-and-bikes-logo-nagercoil-v2-240w.webp",
+  "nitesha-cars-and-bikes-logo-nagercoil-v2-400w.avif",
   "nitesha-cars-and-bikes-logo-nagercoil-v2-400w.webp",
+  "nitesha-cars-and-bikes-logo-nagercoil-v2-800w.avif",
   "nitesha-cars-and-bikes-logo-nagercoil-v2-800w.webp",
+  "nitesha-cars-and-bikes-logo-nagercoil-v2.avif",
   "nitesha-cars-and-bikes-logo-nagercoil-v2.webp",
   "nri",
   "photos",

.vite/manifest.json

@@ -10,8 +10,8 @@
     "file": "assets/SectionArt-CRGDPXOj.js",
     "name": "SectionArt"
   },
-  "_ServicePage-CUlAmDzQ.js": {
-    "file": "assets/ServicePage-CUlAmDzQ.js",
+  "_ServicePage-Bh0tG8oR.js": {
+    "file": "assets/ServicePage-Bh0tG8oR.js",
     "name": "ServicePage",
     "imports": [
       "_SectionArt-CRGDPXOj.js",
@@ -20,7 +20,7 @@
     ]
   },
   "index.html": {
-    "file": "assets/index-BF7vtdGq.js",
+    "file": "assets/index-BLvM1V5H.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,
@@ -52,7 +52,7 @@
     ]
   },
   "src/pages/About.tsx": {
-    "file": "assets/About-BzCVrfp8.js",
+    "file": "assets/About-CQstl_Tc.js",
     "name": "About",
     "src": "src/pages/About.tsx",
     "isDynamicEntry": true,
@@ -63,17 +63,17 @@
     ]
   },
   "src/pages/Bikes.tsx": {
-    "file": "assets/Bikes-Dv_LRU5Z.js",
+    "file": "assets/Bikes-DeiEEcyN.js",
     "name": "Bikes",
     "src": "src/pages/Bikes.tsx",
     "isDynamicEntry": true,
     "imports": [
       "_SectionArt-CRGDPXOj.js",
-      "_ServicePage-CUlAmDzQ.js"
+      "_ServicePage-Bh0tG8oR.js"
     ]
   },
   "src/pages/Blog.tsx": {
-    "file": "assets/Blog-DpOLuxrk.js",
+    "file": "assets/Blog-BAQSnyr1.js",
     "name": "Blog",
     "src": "src/pages/Blog.tsx",
     "isDynamicEntry": true,
@@ -84,7 +84,7 @@
     ]
   },
   "src/pages/CarModel.tsx": {
-    "file": "assets/CarModel-3mwn1wxI.js",
+    "file": "assets/CarModel-BL9WUA5Z.js",
     "name": "CarModel",
     "src": "src/pages/CarModel.tsx",
     "isDynamicEntry": true,
@@ -96,7 +96,7 @@
     ]
   },
   "src/pages/CarRentalAreas.tsx": {
-    "file": "assets/CarRentalAreas-8L23kj3P.js",
+    "file": "assets/CarRentalAreas-CcmydeDQ.js",
     "name": "CarRentalAreas",
     "src": "src/pages/CarRentalAreas.tsx",
     "isDynamicEntry": true,
@@ -107,7 +107,7 @@
     ]
   },
   "src/pages/Cars.tsx": {
-    "file": "assets/Cars-BbO9qmad.js",
+    "file": "assets/Cars-D_N4tPjK.js",
     "name": "Cars",
     "src": "src/pages/Cars.tsx",
     "isDynamicEntry": true,
@@ -118,7 +118,7 @@
     ]
   },
   "src/pages/Contact.tsx": {
-    "file": "assets/Contact-c237v9Oz.js",
+    "file": "assets/Contact-6WhVYujm.js",
     "name": "Contact",
     "src": "src/pages/Contact.tsx",
     "isDynamicEntry": true,
@@ -129,7 +129,7 @@
     ]
   },
   "src/pages/Monthly.tsx": {
-    "file": "assets/Monthly-ByOScUoW.js",
+    "file": "assets/Monthly-DzBSMT1X.js",
     "name": "Monthly",
     "src": "src/pages/Monthly.tsx",
     "isDynamicEntry": true,
@@ -150,7 +150,7 @@
     ]
   },
   "src/pages/Nri.tsx": {
-    "file": "assets/Nri-B2gCQxC8.js",
+    "file": "assets/Nri-DJfCysJe.js",
     "name": "Nri",
     "src": "src/pages/Nri.tsx",
     "isDynamicEntry": true,
@@ -161,7 +161,7 @@
     ]
   },
   "src/pages/Places.tsx": {
-    "file": "assets/Places-C_QQisZd.js",
+    "file": "assets/Places-BbeoYCoi.js",
     "name": "Places",
     "src": "src/pages/Places.tsx",
     "isDynamicEntry": true,
@@ -172,7 +172,7 @@
     ]
   },
   "src/pages/Post.tsx": {
-    "file": "assets/Post-B1ssAaSI.js",
+    "file": "assets/Post-DyElzbI7.js",
     "name": "Post",
     "src": "src/pages/Post.tsx",
     "isDynamicEntry": true,
@@ -184,7 +184,7 @@
     ]
   },
   "src/pages/ServiceArea.tsx": {
-    "file": "assets/ServiceArea-B53mTnk2.js",
+    "file": "assets/ServiceArea-DcTvJ0yM.js",
     "name": "ServiceArea",
     "src": "src/pages/ServiceArea.tsx",
     "isDynamicEntry": true,
@@ -196,7 +196,7 @@
     ]
   },
   "src/pages/Services.tsx": {
-    "file": "assets/Services-tpC5Qisr.js",
+    "file": "assets/Services-BTa6cQCo.js",
     "name": "Services",
     "src": "src/pages/Services.tsx",
     "isDynamicEntry": true,
@@ -207,7 +207,7 @@
     ]
   },
   "src/pages/Tariff.tsx": {
-    "file": "assets/Tariff-D_KdO9V7.js",
+    "file": "assets/Tariff-D-LYSzjX.js",
     "name": "Tariff",
     "src": "src/pages/Tariff.tsx",
     "isDynamicEntry": true,
@@ -218,17 +218,17 @@
     ]
   },
   "src/pages/TouristVehicles.tsx": {
-    "file": "assets/TouristVehicles-C83w9fib.js",
+    "file": "assets/TouristVehicles-RrVKz8cY.js",
     "name": "TouristVehicles",
     "src": "src/pages/TouristVehicles.tsx",
     "isDynamicEntry": true,
     "imports": [
       "_SectionArt-CRGDPXOj.js",
-      "_ServicePage-CUlAmDzQ.js"
+      "_ServicePage-Bh0tG8oR.js"
     ]
   },
   "src/pages/Town.tsx": {
-    "file": "assets/Town-IKL8SGhs.js",
+    "file": "assets/Town-CubG62Uz.js",
     "name": "Town",
     "src": "src/pages/Town.tsx",
     "isDynamicEntry": true,
@@ -240,13 +240,13 @@
     ]
   },
   "src/pages/WeddingCars.tsx": {
-    "file": "assets/WeddingCars-DPLJS-0u.js",
+    "file": "assets/WeddingCars-Chn2e1h7.js",
     "name": "WeddingCars",
     "src": "src/pages/WeddingCars.tsx",
     "isDynamicEntry": true,
     "imports": [
       "_SectionArt-CRGDPXOj.js",
-      "_ServicePage-CUlAmDzQ.js"
+      "_ServicePage-Bh0tG8oR.js"
     ]
   }
 }