Automate gallery image generation

ricktu288 · Oct 14, 2024 · 3c98145 · 3c98145
1 parent c384891
commit 3c98145
Show file tree

Hide file tree

Showing 482 changed files with 85 additions and 97 deletions.
diff --git a/package.json b/package.json
@@ -47,6 +47,6 @@
     "build-node": "webpack --config webpack.node.config.js",
     "build-images": "node ./scripts/buildImages.js",
     "start": "webpack serve --open simulator/ --mode=development",
-    "build": "npm run build-translations && npm run build-node && npm run build-images && npm run build-webpages && npm run build-simulator && npm run build-docs"
+    "build": "npm run build-translations && npm run build-webpages && npm run build-node && npm run build-images && npm run build-simulator && npm run build-docs"
   }
 }
diff --git a/scripts/buildImages.js b/scripts/buildImages.js
@@ -6,12 +6,12 @@ const { createCanvas, loadImage } = require('canvas');
 const sharp = require('sharp');
 const { info } = require('console');
 
-const inputDir = path.join(__dirname, '../src/webpages/gallery/');
-const outputDir = path.join(__dirname, '../dist/img_test/');
-
-// If the output directory does not exist, create it
-if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir, { recursive: true });
+const langs = ['en', 'pl', 'zh-CN', 'zh-TW'];
+const dirs = {
+  'en': path.join(__dirname, '../dist/gallery/'),
+  'pl': path.join(__dirname, '../dist/pl/gallery/'),
+  'zh-CN': path.join(__dirname, '../dist/cn/gallery/'),
+  'zh-TW': path.join(__dirname, '../dist/tw/gallery/')
 }
 
 const canvasLight = createCanvas();
@@ -33,7 +33,7 @@ const simulator = new Simulator(scene, ctxLight, ctxBelowLight, ctxAboveLight, c
 
 function loadScene(sceneJson, callback, backgroundImage) {
   if (sceneJson.backgroundImage) {
-    loadImage(inputDir + sceneJson.backgroundImage).then((image) => {
+    loadImage(dirs.en + sceneJson.backgroundImage).then((image) => {
       sceneJson.backgroundImage = null;
       loadScene(sceneJson, callback, image);
     });
@@ -54,39 +54,43 @@ function loadScene(sceneJson, callback, backgroundImage) {
   });
 }
 
-function initSimulatorForCropBox(cropBox) {
+function initSimulatorForCropBox(cropBox, skipLight) {
   scene.scale = cropBox.width / (cropBox.p4.x - cropBox.p1.x);
   scene.origin = { x: -cropBox.p1.x * scene.scale, y: -cropBox.p1.y * scene.scale };
 
-  const imageWidth = cropBox.width;
-  const imageHeight = cropBox.width * (cropBox.p4.y - cropBox.p1.y) / (cropBox.p4.x - cropBox.p1.x);
-
-  canvasLight.width = imageWidth;
-  canvasLight.height = imageHeight;
-  canvasBelowLight.width = imageWidth;
-  canvasBelowLight.height = imageHeight;
-  canvasAboveLight.width = imageWidth;
-  canvasAboveLight.height = imageHeight;
-  canvasGrid.width = imageWidth;
-  canvasGrid.height = imageHeight;
-  canvasVirtual.width = imageWidth;
-  canvasVirtual.height = imageHeight;
-  canvasFinal.width = imageWidth;
-  canvasFinal.height = imageHeight;
-
-  simulator.rayCountLimit = cropBox.rayCountLimit || 1e7;
+  if (!skipLight) {
+    const imageWidth = cropBox.width;
+    const imageHeight = cropBox.width * (cropBox.p4.y - cropBox.p1.y) / (cropBox.p4.x - cropBox.p1.x);
+
+    canvasLight.width = imageWidth;
+    canvasLight.height = imageHeight;
+    canvasBelowLight.width = imageWidth;
+    canvasBelowLight.height = imageHeight;
+    canvasAboveLight.width = imageWidth;
+    canvasAboveLight.height = imageHeight;
+    canvasGrid.width = imageWidth;
+    canvasGrid.height = imageHeight;
+    canvasVirtual.width = imageWidth;
+    canvasVirtual.height = imageHeight;
+    canvasFinal.width = imageWidth;
+    canvasFinal.height = imageHeight;
+    simulator.rayCountLimit = cropBox.rayCountLimit || 1e7;
+  }
 }
 
 function simulate(skipLight, callback) {
   simulator.eventListeners = {};
   simulator.on('simulationComplete', callback);
   simulator.on('simulationStop', callback);
   simulator.updateSimulation(skipLight, skipLight);
+  if (skipLight) {
+    callback();
+  }
 }
 
-function exportImageFromCropBox(cropBox, filename, callback) {
-  initSimulatorForCropBox(cropBox);
-  simulate(false, function () {
+function exportImageFromCropBox(cropBox, filename, skipLight, callback) {
+  initSimulatorForCropBox(cropBox, skipLight);
+  simulate(skipLight, function () {
     // Clear final canvas
     ctxFinal.fillStyle = 'black';
     ctxFinal.fillRect(0, 0, canvasFinal.width, canvasFinal.height);
@@ -97,38 +101,20 @@ function exportImageFromCropBox(cropBox, filename, callback) {
     ctxFinal.drawImage(canvasLight, 0, 0);
     ctxFinal.drawImage(canvasAboveLight, 0, 0);
 
-    // Save the final image as jpg
-    //const out = fs.createWriteStream(outputDir + filename);
-    //const stream = canvasFinal.createJPEGStream({ quality: 0.85 });
-    //stream.pipe(out);
-    //out.on('finish', callback);
-
-    // Save the final image as webp
-    /*
-    sharp(canvasFinal.toBuffer())
-      .webp()
-      .toFile(outputDir + filename, (err, info) => {
-        if (err) {
-          console.error(err);
-        }
-        callback();
-      });
-    */
-
     // Save the final image as avif
     sharp(canvasFinal.toBuffer())
       .avif()
-      .toFile(outputDir + filename, (err, info) => {
+      .toFile(filename, (err, info) => {
         if (err) {
-          console.error(err);
+          throw new Error(`Error processing image: ${err.message}`);
         }
         callback();
       });
   });
 }
 
-function exportImages(itemId, callback) {
-  const sceneJson = JSON.parse(fs.readFileSync(inputDir + itemId + '.json', 'utf8'));
+function exportImages(itemId, lang, isThumbnail, callback) {
+  const sceneJson = JSON.parse(fs.readFileSync(dirs[lang] + itemId + '.json', 'utf8'));
   loadScene(sceneJson, function () {
     // Find crop boxes, where the preview one is rectangular and the thumbnail one is square
     let cropBoxPreview = null;
@@ -144,46 +130,48 @@ function exportImages(itemId, callback) {
     }
 
     if (!cropBoxPreview) {
-      console.error('No preview crop box found');
-      return;
+      throw new Error('No preview crop box found');
     }
 
     if (!cropBoxThumbnail) {
-      console.error('No thumbnail crop box found');
-      return;
+      throw new Error('No thumbnail crop box found');
     }
 
     cropBoxPreview.width = 2280;
     cropBoxThumbnail.width = 500;
 
+    const skipLight = lang !== 'en'; // Different languages only differs in text, so we only need to re-render the light layer for the first language in the list.
+
     // Export preview image
-    exportImageFromCropBox(cropBoxPreview, itemId + '.avif', function () {
-      // Export thumbnail image
-      exportImageFromCropBox(cropBoxThumbnail, itemId + '-thumbnail.avif', function () {
-        callback();
-      });
+    exportImageFromCropBox(isThumbnail ? cropBoxThumbnail : cropBoxPreview, dirs[lang] + itemId + (isThumbnail ? '-thumbnail.avif' : '.avif'), skipLight, function () {
+      callback();
     });
   });
 }
 
-function exportImagesPromise(itemId) {
+function exportImagesPromise(itemId, lang, isThumbnail) {
   return new Promise((resolve) => {
-    exportImages(itemId, resolve);
+    exportImages(itemId, lang, isThumbnail, resolve);
   });
 }
 
 // Get all JSON files in the input directory
-//const items = fs.readdirSync(inputDir).filter(file => file.endsWith('.json') && file !== 'data.json').map(file => file.slice(0, -5));
-
-const items = ['apparent-depth', 'chaff-countermeasure', 'rainbows', 'branched-flow'];
+const items = fs.readdirSync(dirs.en).filter(file => file.endsWith('.json') && file !== 'data.json').map(file => file.slice(0, -5));
 
 async function exportAllImages() {
+  const beginTime = Date.now();
   for (let item of items) {
-    console.log('Exporting images for ' + item + '...');
-    const time = Date.now();
-    await exportImagesPromise(item);
-    console.log('Images exported in ' + (Date.now() - time) + ' ms' + '\n');
+    for (isThumbnail of [false, true]) {
+      for (let lang of langs) {
+        if (fs.existsSync(dirs[lang] + item + '.json')) {
+          const time = Date.now();
+          await exportImagesPromise(item, lang, isThumbnail);
+          console.log('Exported ' + (isThumbnail ? 'thumbnail' : 'preview') + ' for ' + item + ' in ' + lang + ' in ' + (Date.now() - time) + 'ms');
+        }
+      }
+    }
   }
+  console.log('Exported all images in ' + (Date.now() - beginTime) + 'ms');
 }
 
 exportAllImages();
diff --git a/src/webpages/cn/gallery/GRIN-slab-thumbnail.png b/src/webpages/cn/gallery/GRIN-slab-thumbnail.png
diff --git a/src/webpages/cn/gallery/GRIN-slab.png b/src/webpages/cn/gallery/GRIN-slab.png
diff --git a/src/webpages/cn/gallery/NL-simulation-thumbnail.png b/src/webpages/cn/gallery/NL-simulation-thumbnail.png
diff --git a/src/webpages/cn/gallery/NL-simulation.png b/src/webpages/cn/gallery/NL-simulation.png
diff --git a/src/webpages/cn/gallery/aplanatic-points-thumbnail.png b/src/webpages/cn/gallery/aplanatic-points-thumbnail.png
diff --git a/src/webpages/cn/gallery/aplanatic-points.png b/src/webpages/cn/gallery/aplanatic-points.png
diff --git a/src/webpages/cn/gallery/apparent-depth-thumbnail.png b/src/webpages/cn/gallery/apparent-depth-thumbnail.png
diff --git a/src/webpages/cn/gallery/apparent-depth.png b/src/webpages/cn/gallery/apparent-depth.png
diff --git a/src/webpages/cn/gallery/beam-directors-thumbnail.png b/src/webpages/cn/gallery/beam-directors-thumbnail.png
diff --git a/src/webpages/cn/gallery/beam-directors.png b/src/webpages/cn/gallery/beam-directors.png
diff --git a/src/webpages/cn/gallery/beam-expanders-thumbnail.png b/src/webpages/cn/gallery/beam-expanders-thumbnail.png
diff --git a/src/webpages/cn/gallery/beam-expanders.png b/src/webpages/cn/gallery/beam-expanders.png
diff --git a/src/webpages/cn/gallery/bended-pencil-thumbnail.png b/src/webpages/cn/gallery/bended-pencil-thumbnail.png
diff --git a/src/webpages/cn/gallery/bended-pencil.png b/src/webpages/cn/gallery/bended-pencil.png
diff --git a/src/webpages/cn/gallery/black-cat-becomes-white-thumbnail.png b/src/webpages/cn/gallery/black-cat-becomes-white-thumbnail.png
diff --git a/src/webpages/cn/gallery/black-cat-becomes-white.png b/src/webpages/cn/gallery/black-cat-becomes-white.png
diff --git a/src/webpages/cn/gallery/branched-flow-thumbnail.png b/src/webpages/cn/gallery/branched-flow-thumbnail.png
diff --git a/src/webpages/cn/gallery/branched-flow.png b/src/webpages/cn/gallery/branched-flow.png
diff --git a/src/webpages/cn/gallery/broken-pencil-thumbnail.png b/src/webpages/cn/gallery/broken-pencil-thumbnail.png
diff --git a/src/webpages/cn/gallery/broken-pencil.png b/src/webpages/cn/gallery/broken-pencil.png
diff --git a/src/webpages/cn/gallery/camera-obscura-thumbnail.png b/src/webpages/cn/gallery/camera-obscura-thumbnail.png
diff --git a/src/webpages/cn/gallery/camera-obscura.png b/src/webpages/cn/gallery/camera-obscura.png
diff --git a/src/webpages/cn/gallery/caustics-from-a-reflective-sphere-thumbnail.png b/src/webpages/cn/gallery/caustics-from-a-reflective-sphere-thumbnail.png
diff --git a/src/webpages/cn/gallery/caustics-from-a-reflective-sphere.png b/src/webpages/cn/gallery/caustics-from-a-reflective-sphere.png
diff --git a/src/webpages/cn/gallery/chaff-countermeasure-thumbnail.png b/src/webpages/cn/gallery/chaff-countermeasure-thumbnail.png
diff --git a/src/webpages/cn/gallery/chaff-countermeasure.png b/src/webpages/cn/gallery/chaff-countermeasure.png
diff --git a/src/webpages/cn/gallery/chromatic-aberration-thumbnail.png b/src/webpages/cn/gallery/chromatic-aberration-thumbnail.png
diff --git a/src/webpages/cn/gallery/chromatic-aberration.png b/src/webpages/cn/gallery/chromatic-aberration.png
diff --git a/src/webpages/cn/gallery/chromatic-dispersion-thumbnail.png b/src/webpages/cn/gallery/chromatic-dispersion-thumbnail.png
diff --git a/src/webpages/cn/gallery/chromatic-dispersion.png b/src/webpages/cn/gallery/chromatic-dispersion.png
diff --git a/src/webpages/cn/gallery/compound-microscope-thumbnail.png b/src/webpages/cn/gallery/compound-microscope-thumbnail.png
diff --git a/src/webpages/cn/gallery/compound-microscope.png b/src/webpages/cn/gallery/compound-microscope.png
diff --git a/src/webpages/cn/gallery/concave-lens-thumbnail.png b/src/webpages/cn/gallery/concave-lens-thumbnail.png
diff --git a/src/webpages/cn/gallery/concave-lens.png b/src/webpages/cn/gallery/concave-lens.png
diff --git a/src/webpages/cn/gallery/concave-mirror-wearable-display-thumbnail.png b/src/webpages/cn/gallery/concave-mirror-wearable-display-thumbnail.png
diff --git a/src/webpages/cn/gallery/concave-mirror-wearable-display.png b/src/webpages/cn/gallery/concave-mirror-wearable-display.png
diff --git a/src/webpages/cn/gallery/convex-lens-thumbnail.png b/src/webpages/cn/gallery/convex-lens-thumbnail.png
diff --git a/src/webpages/cn/gallery/convex-lens.png b/src/webpages/cn/gallery/convex-lens.png
diff --git a/src/webpages/cn/gallery/dichroic-rbg-splitter-and-combiner-thumbnail.png b/src/webpages/cn/gallery/dichroic-rbg-splitter-and-combiner-thumbnail.png
diff --git a/src/webpages/cn/gallery/dichroic-rbg-splitter-and-combiner.png b/src/webpages/cn/gallery/dichroic-rbg-splitter-and-combiner.png
diff --git a/...s/cn/gallery/einstein-ring-refocused-to-single-image-via-eyepiece-thumbnail.png b/...s/cn/gallery/einstein-ring-refocused-to-single-image-via-eyepiece-thumbnail.png
diff --git a/src/webpages/cn/gallery/einstein-ring-refocused-to-single-image-via-eyepiece.png b/src/webpages/cn/gallery/einstein-ring-refocused-to-single-image-via-eyepiece.png
diff --git a/src/webpages/cn/gallery/fresnel-lens-thumbnail.png b/src/webpages/cn/gallery/fresnel-lens-thumbnail.png
diff --git a/src/webpages/cn/gallery/fresnel-lens.png b/src/webpages/cn/gallery/fresnel-lens.png
diff --git a/src/webpages/cn/gallery/gan-based-lcd-pixel-thumbnail.png b/src/webpages/cn/gallery/gan-based-lcd-pixel-thumbnail.png
diff --git a/src/webpages/cn/gallery/gan-based-lcd-pixel.png b/src/webpages/cn/gallery/gan-based-lcd-pixel.png
diff --git a/src/webpages/cn/gallery/hyperbolic-lens-thumbnail.png b/src/webpages/cn/gallery/hyperbolic-lens-thumbnail.png
diff --git a/src/webpages/cn/gallery/hyperbolic-lens.png b/src/webpages/cn/gallery/hyperbolic-lens.png
diff --git a/src/webpages/cn/gallery/hyperbolic-mirror-thumbnail.png b/src/webpages/cn/gallery/hyperbolic-mirror-thumbnail.png
diff --git a/src/webpages/cn/gallery/hyperbolic-mirror.png b/src/webpages/cn/gallery/hyperbolic-mirror.png
diff --git a/src/webpages/cn/gallery/images-formed-by-two-mirrors-thumbnail.png b/src/webpages/cn/gallery/images-formed-by-two-mirrors-thumbnail.png
diff --git a/src/webpages/cn/gallery/images-formed-by-two-mirrors.png b/src/webpages/cn/gallery/images-formed-by-two-mirrors.png
diff --git a/src/webpages/cn/gallery/index-template-item.html b/src/webpages/cn/gallery/index-template-item.html
@@ -1,5 +1,5 @@
 <a href="{ID}" class="thumbnail example-container">
-  <img src="{ID}-thumbnail.png" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  <img src="{ID}-thumbnail.avif" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
   <div class="caption">
     <p class="example-title">{TITLE}</p>
     <p class="example-contributor">{CONTRIBUTORS}</p>

diff --git a/src/webpages/cn/gallery/inferior-mirage-thumbnail.png b/src/webpages/cn/gallery/inferior-mirage-thumbnail.png
diff --git a/src/webpages/cn/gallery/inferior-mirage.png b/src/webpages/cn/gallery/inferior-mirage.png
diff --git a/src/webpages/cn/gallery/internal-reflection-thumbnail.png b/src/webpages/cn/gallery/internal-reflection-thumbnail.png
diff --git a/src/webpages/cn/gallery/internal-reflection.png b/src/webpages/cn/gallery/internal-reflection.png
diff --git a/src/webpages/cn/gallery/interrogation-room-thumbnail.png b/src/webpages/cn/gallery/interrogation-room-thumbnail.png
diff --git a/src/webpages/cn/gallery/interrogation-room.png b/src/webpages/cn/gallery/interrogation-room.png
diff --git a/src/webpages/cn/gallery/keplerian-telescope-thumbnail.png b/src/webpages/cn/gallery/keplerian-telescope-thumbnail.png
diff --git a/src/webpages/cn/gallery/keplerian-telescope.png b/src/webpages/cn/gallery/keplerian-telescope.png
diff --git a/src/webpages/cn/gallery/lens-images-thumbnail.png b/src/webpages/cn/gallery/lens-images-thumbnail.png
diff --git a/src/webpages/cn/gallery/lens-images.png b/src/webpages/cn/gallery/lens-images.png
diff --git a/src/webpages/cn/gallery/logarithmic-spiral-lens-thumbnail.png b/src/webpages/cn/gallery/logarithmic-spiral-lens-thumbnail.png
diff --git a/src/webpages/cn/gallery/logarithmic-spiral-lens.png b/src/webpages/cn/gallery/logarithmic-spiral-lens.png
diff --git a/src/webpages/cn/gallery/luneburg-lens-thumbnail.png b/src/webpages/cn/gallery/luneburg-lens-thumbnail.png
diff --git a/src/webpages/cn/gallery/luneburg-lens.png b/src/webpages/cn/gallery/luneburg-lens.png
diff --git a/src/webpages/cn/gallery/maxwell-fisheye-lens-thumbnail.png b/src/webpages/cn/gallery/maxwell-fisheye-lens-thumbnail.png
diff --git a/src/webpages/cn/gallery/maxwell-fisheye-lens.png b/src/webpages/cn/gallery/maxwell-fisheye-lens.png
diff --git a/src/webpages/cn/gallery/maze-solution-thumbnail.png b/src/webpages/cn/gallery/maze-solution-thumbnail.png
diff --git a/src/webpages/cn/gallery/maze-solution.json b/src/webpages/cn/gallery/maze-solution.json
@@ -5,17 +5,17 @@
       "type": "Handle",
       "p1": {
         "x": 300,
-        "y": 600
+        "y": 597
       },
       "p2": {
         "x": 847.7103992768032,
-        "y": 647.2931549915269
+        "y": 644.2931549915269
       },
       "controlPoints": [
         {
           "newPoint": {
             "x": 847.7103992768032,
-            "y": 647.2931549915269
+            "y": 644.2931549915269
           },
           "targetObjIndex": 114,
           "dragContext": {
@@ -1289,7 +1289,7 @@
       },
       "p2": {
         "x": 847.7103992768032,
-        "y": 647.2931549915269
+        "y": 644.2931549915269
       },
       "brightness": "1"
     },

diff --git a/src/webpages/cn/gallery/maze-solution.png b/src/webpages/cn/gallery/maze-solution.png
diff --git a/src/webpages/cn/gallery/minimum-deviation-angle-thumbnail.png b/src/webpages/cn/gallery/minimum-deviation-angle-thumbnail.png
diff --git a/src/webpages/cn/gallery/minimum-deviation-angle.png b/src/webpages/cn/gallery/minimum-deviation-angle.png
diff --git a/src/webpages/cn/gallery/monochromatic-aberrations-thumbnail.png b/src/webpages/cn/gallery/monochromatic-aberrations-thumbnail.png
diff --git a/src/webpages/cn/gallery/monochromatic-aberrations.png b/src/webpages/cn/gallery/monochromatic-aberrations.png
diff --git a/src/webpages/cn/gallery/newtonian-telescope-thumbnail.png b/src/webpages/cn/gallery/newtonian-telescope-thumbnail.png
diff --git a/src/webpages/cn/gallery/newtonian-telescope.png b/src/webpages/cn/gallery/newtonian-telescope.png
diff --git a/src/webpages/cn/gallery/optical-cavity-thumbnail.png b/src/webpages/cn/gallery/optical-cavity-thumbnail.png
diff --git a/src/webpages/cn/gallery/optical-cavity.png b/src/webpages/cn/gallery/optical-cavity.png
diff --git a/src/webpages/cn/gallery/parabolic-mirror-thumbnail.png b/src/webpages/cn/gallery/parabolic-mirror-thumbnail.png
diff --git a/src/webpages/cn/gallery/parabolic-mirror.png b/src/webpages/cn/gallery/parabolic-mirror.png
diff --git a/src/webpages/cn/gallery/penrose-unilluminable-room-thumbnail.png b/src/webpages/cn/gallery/penrose-unilluminable-room-thumbnail.png
diff --git a/src/webpages/cn/gallery/penrose-unilluminable-room.png b/src/webpages/cn/gallery/penrose-unilluminable-room.png
diff --git a/src/webpages/cn/gallery/periscope-thumbnail.png b/src/webpages/cn/gallery/periscope-thumbnail.png
diff --git a/src/webpages/cn/gallery/periscope.png b/src/webpages/cn/gallery/periscope.png
diff --git a/src/webpages/cn/gallery/prisms-thumbnail.png b/src/webpages/cn/gallery/prisms-thumbnail.png
diff --git a/src/webpages/cn/gallery/prisms.png b/src/webpages/cn/gallery/prisms.png
diff --git a/src/webpages/cn/gallery/rainbows-thumbnail.png b/src/webpages/cn/gallery/rainbows-thumbnail.png
diff --git a/src/webpages/cn/gallery/rainbows.png b/src/webpages/cn/gallery/rainbows.png
diff --git a/src/webpages/cn/gallery/ray-relaying-thumbnail.png b/src/webpages/cn/gallery/ray-relaying-thumbnail.png
diff --git a/src/webpages/cn/gallery/ray-relaying.png b/src/webpages/cn/gallery/ray-relaying.png
diff --git a/src/webpages/cn/gallery/reflect-thumbnail.png b/src/webpages/cn/gallery/reflect-thumbnail.png
diff --git a/src/webpages/cn/gallery/reflect.png b/src/webpages/cn/gallery/reflect.png
diff --git a/src/webpages/cn/gallery/reflecting-monochromator-thumbnail.png b/src/webpages/cn/gallery/reflecting-monochromator-thumbnail.png
diff --git a/src/webpages/cn/gallery/reflecting-monochromator.png b/src/webpages/cn/gallery/reflecting-monochromator.png
diff --git a/src/webpages/cn/gallery/resonator-thumbnail.png b/src/webpages/cn/gallery/resonator-thumbnail.png
diff --git a/src/webpages/cn/gallery/resonator.png b/src/webpages/cn/gallery/resonator.png
diff --git a/src/webpages/cn/gallery/retroreflectors-thumbnail.png b/src/webpages/cn/gallery/retroreflectors-thumbnail.png
diff --git a/src/webpages/cn/gallery/retroreflectors.png b/src/webpages/cn/gallery/retroreflectors.png
diff --git a/src/webpages/cn/gallery/rochester-cloak-thumbnail.png b/src/webpages/cn/gallery/rochester-cloak-thumbnail.png
diff --git a/src/webpages/cn/gallery/rochester-cloak.png b/src/webpages/cn/gallery/rochester-cloak.png
diff --git a/src/webpages/cn/gallery/sea-mirage-thumbnail.png b/src/webpages/cn/gallery/sea-mirage-thumbnail.png
diff --git a/src/webpages/cn/gallery/sea-mirage.png b/src/webpages/cn/gallery/sea-mirage.png
diff --git a/src/webpages/cn/gallery/simple-double-gauss-lens-thumbnail.png b/src/webpages/cn/gallery/simple-double-gauss-lens-thumbnail.png
diff --git a/src/webpages/cn/gallery/simple-double-gauss-lens.png b/src/webpages/cn/gallery/simple-double-gauss-lens.png
diff --git a/src/webpages/cn/gallery/single-ray-demo-thumbnail.png b/src/webpages/cn/gallery/single-ray-demo-thumbnail.png
diff --git a/src/webpages/cn/gallery/single-ray-demo.png b/src/webpages/cn/gallery/single-ray-demo.png
diff --git a/src/webpages/cn/gallery/solar-eclipses-thumbnail.png b/src/webpages/cn/gallery/solar-eclipses-thumbnail.png
diff --git a/src/webpages/cn/gallery/solar-eclipses.png b/src/webpages/cn/gallery/solar-eclipses.png
diff --git a/src/webpages/cn/gallery/specular-and-diffuse-reflection-thumbnail.png b/src/webpages/cn/gallery/specular-and-diffuse-reflection-thumbnail.png
diff --git a/src/webpages/cn/gallery/specular-and-diffuse-reflection.png b/src/webpages/cn/gallery/specular-and-diffuse-reflection.png
diff --git a/src/webpages/cn/gallery/spherical-lens-and-mirror-thumbnail.png b/src/webpages/cn/gallery/spherical-lens-and-mirror-thumbnail.png
diff --git a/src/webpages/cn/gallery/spherical-lens-and-mirror.png b/src/webpages/cn/gallery/spherical-lens-and-mirror.png
diff --git a/src/webpages/cn/gallery/telescope-thumbnail.png b/src/webpages/cn/gallery/telescope-thumbnail.png
diff --git a/src/webpages/cn/gallery/telescope.png b/src/webpages/cn/gallery/telescope.png
diff --git a/src/webpages/cn/gallery/template.html b/src/webpages/cn/gallery/template.html
@@ -8,7 +8,7 @@
 <meta property="og:title" content="{TITLE} - 射线光学模拟">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://phydemo.app/ray-optics/cn/gallery/{ID}">
-<meta property="og:image" content="https://phydemo.app/ray-optics/cn/gallery/{ID}-thumbnail.png">
+<meta property="og:image" content="https://phydemo.app/ray-optics/cn/gallery/{ID}-thumbnail.avif">
   <meta property="og:description" content="自由、开源的网页程序，用于建立及模拟二维几何光学场景。">
 <meta property="og:locale" content="zh-CN">
 <link rel="canonical" href="https://phydemo.app/ray-optics/cn/gallery/{ID}">
@@ -47,7 +47,7 @@ <h1><b><span>{TITLE}</span></b></h1>
 <p>
 <a href="https://phydemo.app/ray-optics/simulator/?zh-CN#../cn/gallery/{ID}" target="_blank" class="btn btn-success btn-lg">在模拟器中打开</a>
 </p>
-<img src="{ID}.png" alt="{ALT}" style="width:100%">
+<img src="{ID}.avif" alt="{ALT}" style="width:100%">
 </center>
 
   <div style="float: right; padding-top: 10px;">

diff --git a/src/webpages/cn/gallery/transverse-and-longitudinal-magnification-thumbnail.png b/src/webpages/cn/gallery/transverse-and-longitudinal-magnification-thumbnail.png
diff --git a/src/webpages/cn/gallery/transverse-and-longitudinal-magnification.png b/src/webpages/cn/gallery/transverse-and-longitudinal-magnification.png
diff --git a/src/webpages/cn/gallery/vanishing-point-thumbnail.png b/src/webpages/cn/gallery/vanishing-point-thumbnail.png
diff --git a/src/webpages/cn/gallery/vanishing-point.png b/src/webpages/cn/gallery/vanishing-point.png
diff --git a/src/webpages/cn/gallery/zoom-lens-thumbnail.png b/src/webpages/cn/gallery/zoom-lens-thumbnail.png
diff --git a/src/webpages/cn/gallery/zoom-lens.png b/src/webpages/cn/gallery/zoom-lens.png
diff --git a/src/webpages/gallery/GRIN-slab-thumbnail.png b/src/webpages/gallery/GRIN-slab-thumbnail.png
diff --git a/src/webpages/gallery/GRIN-slab.png b/src/webpages/gallery/GRIN-slab.png
diff --git a/src/webpages/gallery/NL-simulation-thumbnail.png b/src/webpages/gallery/NL-simulation-thumbnail.png
diff --git a/src/webpages/gallery/NL-simulation.png b/src/webpages/gallery/NL-simulation.png
diff --git a/src/webpages/gallery/aplanatic-points-thumbnail.png b/src/webpages/gallery/aplanatic-points-thumbnail.png
diff --git a/src/webpages/gallery/aplanatic-points.png b/src/webpages/gallery/aplanatic-points.png
diff --git a/src/webpages/gallery/apparent-depth-thumbnail.png b/src/webpages/gallery/apparent-depth-thumbnail.png
diff --git a/src/webpages/gallery/apparent-depth.png b/src/webpages/gallery/apparent-depth.png
diff --git a/src/webpages/gallery/beam-directors-thumbnail.png b/src/webpages/gallery/beam-directors-thumbnail.png
diff --git a/src/webpages/gallery/beam-directors.png b/src/webpages/gallery/beam-directors.png
diff --git a/src/webpages/gallery/beam-expanders-thumbnail.png b/src/webpages/gallery/beam-expanders-thumbnail.png
diff --git a/src/webpages/gallery/beam-expanders.png b/src/webpages/gallery/beam-expanders.png
diff --git a/src/webpages/gallery/bended-pencil-thumbnail.png b/src/webpages/gallery/bended-pencil-thumbnail.png
diff --git a/src/webpages/gallery/bended-pencil.png b/src/webpages/gallery/bended-pencil.png
diff --git a/src/webpages/gallery/black-cat-becomes-white-thumbnail.png b/src/webpages/gallery/black-cat-becomes-white-thumbnail.png
diff --git a/src/webpages/gallery/black-cat-becomes-white.png b/src/webpages/gallery/black-cat-becomes-white.png
diff --git a/src/webpages/gallery/branched-flow-thumbnail.png b/src/webpages/gallery/branched-flow-thumbnail.png
diff --git a/src/webpages/gallery/branched-flow.png b/src/webpages/gallery/branched-flow.png
diff --git a/src/webpages/gallery/broken-pencil-thumbnail.png b/src/webpages/gallery/broken-pencil-thumbnail.png
diff --git a/src/webpages/gallery/broken-pencil.png b/src/webpages/gallery/broken-pencil.png
diff --git a/src/webpages/gallery/camera-obscura-thumbnail.png b/src/webpages/gallery/camera-obscura-thumbnail.png
diff --git a/src/webpages/gallery/camera-obscura.png b/src/webpages/gallery/camera-obscura.png
diff --git a/src/webpages/gallery/caustics-from-a-reflective-sphere-thumbnail.png b/src/webpages/gallery/caustics-from-a-reflective-sphere-thumbnail.png
diff --git a/src/webpages/gallery/caustics-from-a-reflective-sphere.png b/src/webpages/gallery/caustics-from-a-reflective-sphere.png
diff --git a/src/webpages/gallery/chaff-countermeasure-thumbnail.png b/src/webpages/gallery/chaff-countermeasure-thumbnail.png
diff --git a/src/webpages/gallery/chaff-countermeasure.png b/src/webpages/gallery/chaff-countermeasure.png
diff --git a/src/webpages/gallery/chromatic-aberration-thumbnail.png b/src/webpages/gallery/chromatic-aberration-thumbnail.png
diff --git a/src/webpages/gallery/chromatic-aberration.png b/src/webpages/gallery/chromatic-aberration.png
diff --git a/src/webpages/gallery/chromatic-dispersion-thumbnail.png b/src/webpages/gallery/chromatic-dispersion-thumbnail.png
diff --git a/src/webpages/gallery/chromatic-dispersion.png b/src/webpages/gallery/chromatic-dispersion.png
diff --git a/src/webpages/gallery/compound-microscope-thumbnail.png b/src/webpages/gallery/compound-microscope-thumbnail.png
diff --git a/src/webpages/gallery/compound-microscope.png b/src/webpages/gallery/compound-microscope.png
diff --git a/src/webpages/gallery/concave-lens-thumbnail.png b/src/webpages/gallery/concave-lens-thumbnail.png
diff --git a/src/webpages/gallery/concave-lens.png b/src/webpages/gallery/concave-lens.png
diff --git a/src/webpages/gallery/concave-mirror-wearable-display-thumbnail.png b/src/webpages/gallery/concave-mirror-wearable-display-thumbnail.png
diff --git a/src/webpages/gallery/concave-mirror-wearable-display.png b/src/webpages/gallery/concave-mirror-wearable-display.png
diff --git a/src/webpages/gallery/convex-lens-thumbnail.png b/src/webpages/gallery/convex-lens-thumbnail.png
diff --git a/src/webpages/gallery/convex-lens.png b/src/webpages/gallery/convex-lens.png
diff --git a/src/webpages/gallery/dichroic-rbg-splitter-and-combiner-thumbnail.png b/src/webpages/gallery/dichroic-rbg-splitter-and-combiner-thumbnail.png
diff --git a/src/webpages/gallery/dichroic-rbg-splitter-and-combiner.png b/src/webpages/gallery/dichroic-rbg-splitter-and-combiner.png
diff --git a/...ages/gallery/einstein-ring-refocused-to-single-image-via-eyepiece-thumbnail.png b/...ages/gallery/einstein-ring-refocused-to-single-image-via-eyepiece-thumbnail.png
diff --git a/src/webpages/gallery/einstein-ring-refocused-to-single-image-via-eyepiece.png b/src/webpages/gallery/einstein-ring-refocused-to-single-image-via-eyepiece.png
diff --git a/src/webpages/gallery/fresnel-lens-thumbnail.png b/src/webpages/gallery/fresnel-lens-thumbnail.png
diff --git a/src/webpages/gallery/fresnel-lens.png b/src/webpages/gallery/fresnel-lens.png
diff --git a/src/webpages/gallery/gan-based-lcd-pixel-thumbnail.png b/src/webpages/gallery/gan-based-lcd-pixel-thumbnail.png
diff --git a/src/webpages/gallery/gan-based-lcd-pixel.png b/src/webpages/gallery/gan-based-lcd-pixel.png
diff --git a/src/webpages/gallery/hyperbolic-lens-thumbnail.png b/src/webpages/gallery/hyperbolic-lens-thumbnail.png
diff --git a/src/webpages/gallery/hyperbolic-lens.png b/src/webpages/gallery/hyperbolic-lens.png
diff --git a/src/webpages/gallery/hyperbolic-mirror-thumbnail.png b/src/webpages/gallery/hyperbolic-mirror-thumbnail.png
diff --git a/src/webpages/gallery/hyperbolic-mirror.png b/src/webpages/gallery/hyperbolic-mirror.png
diff --git a/src/webpages/gallery/images-formed-by-two-mirrors-thumbnail.png b/src/webpages/gallery/images-formed-by-two-mirrors-thumbnail.png
diff --git a/src/webpages/gallery/images-formed-by-two-mirrors.png b/src/webpages/gallery/images-formed-by-two-mirrors.png
diff --git a/src/webpages/gallery/index-template-item.html b/src/webpages/gallery/index-template-item.html
@@ -1,5 +1,5 @@
 <a href="{ID}" class="thumbnail example-container">
-  <img src="{ID}-thumbnail.png" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  <img src="{ID}-thumbnail.avif" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
   <div class="caption">
     <p class="example-title">{TITLE}</p>
     <p class="example-contributor">{CONTRIBUTORS}</p>

diff --git a/src/webpages/gallery/inferior-mirage-thumbnail.png b/src/webpages/gallery/inferior-mirage-thumbnail.png
diff --git a/src/webpages/gallery/inferior-mirage.png b/src/webpages/gallery/inferior-mirage.png
diff --git a/src/webpages/gallery/internal-reflection-thumbnail.png b/src/webpages/gallery/internal-reflection-thumbnail.png
diff --git a/src/webpages/gallery/internal-reflection.png b/src/webpages/gallery/internal-reflection.png
diff --git a/src/webpages/gallery/interrogation-room-thumbnail.png b/src/webpages/gallery/interrogation-room-thumbnail.png
diff --git a/src/webpages/gallery/interrogation-room.png b/src/webpages/gallery/interrogation-room.png
diff --git a/src/webpages/gallery/keplerian-telescope-thumbnail.png b/src/webpages/gallery/keplerian-telescope-thumbnail.png
diff --git a/src/webpages/gallery/keplerian-telescope.png b/src/webpages/gallery/keplerian-telescope.png
diff --git a/src/webpages/gallery/lens-images-thumbnail.png b/src/webpages/gallery/lens-images-thumbnail.png
diff --git a/src/webpages/gallery/lens-images.png b/src/webpages/gallery/lens-images.png
diff --git a/src/webpages/gallery/logarithmic-spiral-lens-thumbnail.png b/src/webpages/gallery/logarithmic-spiral-lens-thumbnail.png
diff --git a/src/webpages/gallery/logarithmic-spiral-lens.png b/src/webpages/gallery/logarithmic-spiral-lens.png
diff --git a/src/webpages/gallery/luneburg-lens-thumbnail.png b/src/webpages/gallery/luneburg-lens-thumbnail.png
diff --git a/src/webpages/gallery/luneburg-lens.png b/src/webpages/gallery/luneburg-lens.png
diff --git a/src/webpages/gallery/maxwell-fisheye-lens-thumbnail.png b/src/webpages/gallery/maxwell-fisheye-lens-thumbnail.png
diff --git a/src/webpages/gallery/maxwell-fisheye-lens.png b/src/webpages/gallery/maxwell-fisheye-lens.png
diff --git a/src/webpages/gallery/maze-solution-thumbnail.png b/src/webpages/gallery/maze-solution-thumbnail.png
diff --git a/src/webpages/gallery/maze-solution.json b/src/webpages/gallery/maze-solution.json
@@ -5,17 +5,17 @@
       "type": "Handle",
       "p1": {
         "x": 300,
-        "y": 600
+        "y": 597
       },
       "p2": {
         "x": 847.7103992768032,
-        "y": 647.2931549915269
+        "y": 644.2931549915269
       },
       "controlPoints": [
         {
           "newPoint": {
             "x": 847.7103992768032,
-            "y": 647.2931549915269
+            "y": 644.2931549915269
           },
           "targetObjIndex": 114,
           "dragContext": {
@@ -1289,7 +1289,7 @@
       },
       "p2": {
         "x": 847.7103992768032,
-        "y": 647.2931549915269
+        "y": 644.2931549915269
       },
       "brightness": "1"
     },

diff --git a/src/webpages/gallery/maze-solution.png b/src/webpages/gallery/maze-solution.png
diff --git a/src/webpages/gallery/minimum-deviation-angle-thumbnail.png b/src/webpages/gallery/minimum-deviation-angle-thumbnail.png
diff --git a/src/webpages/gallery/minimum-deviation-angle.png b/src/webpages/gallery/minimum-deviation-angle.png
diff --git a/src/webpages/gallery/monochromatic-aberrations-thumbnail.png b/src/webpages/gallery/monochromatic-aberrations-thumbnail.png
diff --git a/src/webpages/gallery/monochromatic-aberrations.png b/src/webpages/gallery/monochromatic-aberrations.png
diff --git a/src/webpages/gallery/newtonian-telescope-thumbnail.png b/src/webpages/gallery/newtonian-telescope-thumbnail.png
diff --git a/src/webpages/gallery/newtonian-telescope.png b/src/webpages/gallery/newtonian-telescope.png
diff --git a/src/webpages/gallery/optical-cavity-thumbnail.png b/src/webpages/gallery/optical-cavity-thumbnail.png
diff --git a/src/webpages/gallery/optical-cavity.png b/src/webpages/gallery/optical-cavity.png
diff --git a/src/webpages/gallery/parabolic-mirror-thumbnail.png b/src/webpages/gallery/parabolic-mirror-thumbnail.png
diff --git a/src/webpages/gallery/parabolic-mirror.png b/src/webpages/gallery/parabolic-mirror.png
diff --git a/src/webpages/gallery/penrose-unilluminable-room-thumbnail.png b/src/webpages/gallery/penrose-unilluminable-room-thumbnail.png
diff --git a/src/webpages/gallery/penrose-unilluminable-room.png b/src/webpages/gallery/penrose-unilluminable-room.png
diff --git a/src/webpages/gallery/periscope-thumbnail.png b/src/webpages/gallery/periscope-thumbnail.png
diff --git a/src/webpages/gallery/periscope.png b/src/webpages/gallery/periscope.png
diff --git a/src/webpages/gallery/prisms-thumbnail.png b/src/webpages/gallery/prisms-thumbnail.png
diff --git a/src/webpages/gallery/prisms.png b/src/webpages/gallery/prisms.png
diff --git a/src/webpages/gallery/rainbows-thumbnail.png b/src/webpages/gallery/rainbows-thumbnail.png
diff --git a/src/webpages/gallery/rainbows.png b/src/webpages/gallery/rainbows.png
diff --git a/src/webpages/gallery/ray-relaying-thumbnail.png b/src/webpages/gallery/ray-relaying-thumbnail.png
diff --git a/src/webpages/gallery/ray-relaying.png b/src/webpages/gallery/ray-relaying.png
diff --git a/src/webpages/gallery/reflect-thumbnail.png b/src/webpages/gallery/reflect-thumbnail.png
diff --git a/src/webpages/gallery/reflect.png b/src/webpages/gallery/reflect.png
diff --git a/src/webpages/gallery/reflecting-monochromator-thumbnail.png b/src/webpages/gallery/reflecting-monochromator-thumbnail.png
diff --git a/src/webpages/gallery/reflecting-monochromator.png b/src/webpages/gallery/reflecting-monochromator.png
diff --git a/src/webpages/gallery/resonator-thumbnail.png b/src/webpages/gallery/resonator-thumbnail.png
diff --git a/src/webpages/gallery/resonator.png b/src/webpages/gallery/resonator.png
diff --git a/src/webpages/gallery/retroreflectors-thumbnail.png b/src/webpages/gallery/retroreflectors-thumbnail.png
diff --git a/src/webpages/gallery/retroreflectors.png b/src/webpages/gallery/retroreflectors.png
diff --git a/src/webpages/gallery/rochester-cloak-thumbnail.png b/src/webpages/gallery/rochester-cloak-thumbnail.png
diff --git a/src/webpages/gallery/rochester-cloak.png b/src/webpages/gallery/rochester-cloak.png
diff --git a/src/webpages/gallery/sea-mirage-thumbnail.png b/src/webpages/gallery/sea-mirage-thumbnail.png
diff --git a/src/webpages/gallery/sea-mirage.png b/src/webpages/gallery/sea-mirage.png
diff --git a/src/webpages/gallery/simple-double-gauss-lens-thumbnail.png b/src/webpages/gallery/simple-double-gauss-lens-thumbnail.png
diff --git a/src/webpages/gallery/simple-double-gauss-lens.png b/src/webpages/gallery/simple-double-gauss-lens.png
diff --git a/src/webpages/gallery/single-ray-demo-thumbnail.png b/src/webpages/gallery/single-ray-demo-thumbnail.png
diff --git a/src/webpages/gallery/single-ray-demo.png b/src/webpages/gallery/single-ray-demo.png
diff --git a/src/webpages/gallery/solar-eclipses-thumbnail.png b/src/webpages/gallery/solar-eclipses-thumbnail.png
diff --git a/src/webpages/gallery/solar-eclipses.png b/src/webpages/gallery/solar-eclipses.png
diff --git a/src/webpages/gallery/specular-and-diffuse-reflection-thumbnail.png b/src/webpages/gallery/specular-and-diffuse-reflection-thumbnail.png
diff --git a/src/webpages/gallery/specular-and-diffuse-reflection.png b/src/webpages/gallery/specular-and-diffuse-reflection.png
diff --git a/src/webpages/gallery/spherical-lens-and-mirror-thumbnail.png b/src/webpages/gallery/spherical-lens-and-mirror-thumbnail.png
diff --git a/src/webpages/gallery/spherical-lens-and-mirror.png b/src/webpages/gallery/spherical-lens-and-mirror.png
diff --git a/src/webpages/gallery/telescope-thumbnail.png b/src/webpages/gallery/telescope-thumbnail.png
diff --git a/src/webpages/gallery/telescope.png b/src/webpages/gallery/telescope.png
diff --git a/src/webpages/gallery/template.html b/src/webpages/gallery/template.html
@@ -8,7 +8,7 @@
 <meta property="og:title" content="{TITLE} - Ray Optics Simulation">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://phydemo.app/ray-optics/gallery/{ID}">
-<meta property="og:image" content="https://phydemo.app/ray-optics/gallery/{ID}-thumbnail.png">
+<meta property="og:image" content="https://phydemo.app/ray-optics/gallery/{ID}-thumbnail.avif">
 <meta property="og:description" content="A free, open-source web app for creating and simulating 2D geometric optical scenes.">
 <meta property="og:locale" content="en">
 <link rel="canonical" href="https://phydemo.app/ray-optics/gallery/{ID}">
@@ -46,7 +46,7 @@ <h1><b><span>{TITLE}</span></b></h1>
 <p>
 <a href="https://phydemo.app/ray-optics/simulator/#{ID}" target="_blank" class="btn btn-success btn-lg">Open in Simulator</a>
 </p>
-<img src="{ID}.png" alt="{ALT}" style="width:100%">
+<img src="{ID}.avif" alt="{ALT}" style="width:100%">
 </center>
 
   <div style="float: right; padding-top: 10px;">

diff --git a/src/webpages/gallery/transverse-and-longitudinal-magnification-thumbnail.png b/src/webpages/gallery/transverse-and-longitudinal-magnification-thumbnail.png
diff --git a/src/webpages/gallery/transverse-and-longitudinal-magnification.png b/src/webpages/gallery/transverse-and-longitudinal-magnification.png
diff --git a/src/webpages/gallery/vanishing-point-thumbnail.png b/src/webpages/gallery/vanishing-point-thumbnail.png
diff --git a/src/webpages/gallery/vanishing-point.png b/src/webpages/gallery/vanishing-point.png
diff --git a/src/webpages/gallery/zoom-lens-thumbnail.png b/src/webpages/gallery/zoom-lens-thumbnail.png
diff --git a/src/webpages/gallery/zoom-lens.png b/src/webpages/gallery/zoom-lens.png
diff --git a/src/webpages/pl/gallery/GRIN-slab-thumbnail.png b/src/webpages/pl/gallery/GRIN-slab-thumbnail.png
diff --git a/src/webpages/pl/gallery/GRIN-slab.png b/src/webpages/pl/gallery/GRIN-slab.png
diff --git a/src/webpages/pl/gallery/NL-simulation-thumbnail.png b/src/webpages/pl/gallery/NL-simulation-thumbnail.png
diff --git a/src/webpages/pl/gallery/NL-simulation.png b/src/webpages/pl/gallery/NL-simulation.png
diff --git a/src/webpages/pl/gallery/aplanatic-points-thumbnail.png b/src/webpages/pl/gallery/aplanatic-points-thumbnail.png
diff --git a/src/webpages/pl/gallery/aplanatic-points.png b/src/webpages/pl/gallery/aplanatic-points.png
diff --git a/src/webpages/pl/gallery/apparent-depth-thumbnail.png b/src/webpages/pl/gallery/apparent-depth-thumbnail.png
diff --git a/src/webpages/pl/gallery/apparent-depth.png b/src/webpages/pl/gallery/apparent-depth.png
diff --git a/src/webpages/pl/gallery/beam-directors-thumbnail.png b/src/webpages/pl/gallery/beam-directors-thumbnail.png
diff --git a/src/webpages/pl/gallery/beam-directors.png b/src/webpages/pl/gallery/beam-directors.png
diff --git a/src/webpages/pl/gallery/beam-expanders-thumbnail.png b/src/webpages/pl/gallery/beam-expanders-thumbnail.png
diff --git a/src/webpages/pl/gallery/beam-expanders.png b/src/webpages/pl/gallery/beam-expanders.png
diff --git a/src/webpages/pl/gallery/bended-pencil-background.png b/src/webpages/pl/gallery/bended-pencil-background.png
diff --git a/src/webpages/pl/gallery/bended-pencil-thumbnail.png b/src/webpages/pl/gallery/bended-pencil-thumbnail.png
diff --git a/src/webpages/pl/gallery/bended-pencil.png b/src/webpages/pl/gallery/bended-pencil.png
diff --git a/src/webpages/pl/gallery/black-cat-becomes-white-background.png b/src/webpages/pl/gallery/black-cat-becomes-white-background.png
diff --git a/src/webpages/pl/gallery/black-cat-becomes-white-thumbnail.png b/src/webpages/pl/gallery/black-cat-becomes-white-thumbnail.png
diff --git a/src/webpages/pl/gallery/black-cat-becomes-white.png b/src/webpages/pl/gallery/black-cat-becomes-white.png
diff --git a/src/webpages/pl/gallery/broken-pencil-background.png b/src/webpages/pl/gallery/broken-pencil-background.png
diff --git a/src/webpages/pl/gallery/broken-pencil-thumbnail.png b/src/webpages/pl/gallery/broken-pencil-thumbnail.png
diff --git a/src/webpages/pl/gallery/broken-pencil.png b/src/webpages/pl/gallery/broken-pencil.png
diff --git a/src/webpages/pl/gallery/camera-obscura-thumbnail.png b/src/webpages/pl/gallery/camera-obscura-thumbnail.png
diff --git a/src/webpages/pl/gallery/camera-obscura.png b/src/webpages/pl/gallery/camera-obscura.png
diff --git a/src/webpages/pl/gallery/chaff-countermeasure-thumbnail.png b/src/webpages/pl/gallery/chaff-countermeasure-thumbnail.png
diff --git a/src/webpages/pl/gallery/chaff-countermeasure.png b/src/webpages/pl/gallery/chaff-countermeasure.png
diff --git a/src/webpages/pl/gallery/chromatic-aberration-thumbnail.png b/src/webpages/pl/gallery/chromatic-aberration-thumbnail.png
diff --git a/src/webpages/pl/gallery/chromatic-aberration.png b/src/webpages/pl/gallery/chromatic-aberration.png
diff --git a/src/webpages/pl/gallery/chromatic-dispersion-thumbnail.png b/src/webpages/pl/gallery/chromatic-dispersion-thumbnail.png
diff --git a/src/webpages/pl/gallery/chromatic-dispersion.png b/src/webpages/pl/gallery/chromatic-dispersion.png
diff --git a/src/webpages/pl/gallery/compound-microscope-thumbnail.png b/src/webpages/pl/gallery/compound-microscope-thumbnail.png
diff --git a/src/webpages/pl/gallery/compound-microscope.png b/src/webpages/pl/gallery/compound-microscope.png
diff --git a/src/webpages/pl/gallery/concave-lens-thumbnail.png b/src/webpages/pl/gallery/concave-lens-thumbnail.png
diff --git a/src/webpages/pl/gallery/concave-lens.png b/src/webpages/pl/gallery/concave-lens.png
diff --git a/src/webpages/pl/gallery/convex-lens-thumbnail.png b/src/webpages/pl/gallery/convex-lens-thumbnail.png
diff --git a/src/webpages/pl/gallery/convex-lens.png b/src/webpages/pl/gallery/convex-lens.png
diff --git a/src/webpages/pl/gallery/dichroic-rbg-splitter-and-combiner-thumbnail.png b/src/webpages/pl/gallery/dichroic-rbg-splitter-and-combiner-thumbnail.png
diff --git a/src/webpages/pl/gallery/dichroic-rbg-splitter-and-combiner.png b/src/webpages/pl/gallery/dichroic-rbg-splitter-and-combiner.png
diff --git a/...s/pl/gallery/einstein-ring-refocused-to-single-image-via-eyepiece-thumbnail.png b/...s/pl/gallery/einstein-ring-refocused-to-single-image-via-eyepiece-thumbnail.png
diff --git a/src/webpages/pl/gallery/einstein-ring-refocused-to-single-image-via-eyepiece.png b/src/webpages/pl/gallery/einstein-ring-refocused-to-single-image-via-eyepiece.png
diff --git a/src/webpages/pl/gallery/fresnel-lens-thumbnail.png b/src/webpages/pl/gallery/fresnel-lens-thumbnail.png
diff --git a/src/webpages/pl/gallery/fresnel-lens.png b/src/webpages/pl/gallery/fresnel-lens.png
diff --git a/src/webpages/pl/gallery/gan-based-lcd-pixel-thumbnail.png b/src/webpages/pl/gallery/gan-based-lcd-pixel-thumbnail.png
diff --git a/src/webpages/pl/gallery/gan-based-lcd-pixel.png b/src/webpages/pl/gallery/gan-based-lcd-pixel.png
diff --git a/src/webpages/pl/gallery/hyperbolic-lens-thumbnail.png b/src/webpages/pl/gallery/hyperbolic-lens-thumbnail.png
diff --git a/src/webpages/pl/gallery/hyperbolic-lens.png b/src/webpages/pl/gallery/hyperbolic-lens.png
diff --git a/src/webpages/pl/gallery/hyperbolic-mirror-thumbnail.png b/src/webpages/pl/gallery/hyperbolic-mirror-thumbnail.png
diff --git a/src/webpages/pl/gallery/hyperbolic-mirror.png b/src/webpages/pl/gallery/hyperbolic-mirror.png
diff --git a/src/webpages/pl/gallery/images-formed-by-two-mirrors-thumbnail.png b/src/webpages/pl/gallery/images-formed-by-two-mirrors-thumbnail.png
diff --git a/src/webpages/pl/gallery/images-formed-by-two-mirrors.png b/src/webpages/pl/gallery/images-formed-by-two-mirrors.png
diff --git a/src/webpages/pl/gallery/index-template-item.html b/src/webpages/pl/gallery/index-template-item.html
@@ -1,5 +1,5 @@
 <a href="{ID}" class="thumbnail example-container">
-  <img src="{ID}-thumbnail.png" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  <img src="{ID}-thumbnail.avif" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
   <div class="caption">
     <p class="example-title">{TITLE}</p>
     <p class="example-contributor">{CONTRIBUTORS}</p>

diff --git a/src/webpages/pl/gallery/inferior-mirage-thumbnail.png b/src/webpages/pl/gallery/inferior-mirage-thumbnail.png
diff --git a/src/webpages/pl/gallery/inferior-mirage.png b/src/webpages/pl/gallery/inferior-mirage.png