Make WebP the default image format

src/data/portfolio.ts

@@ -6,7 +6,7 @@ import { Main } from '../page/main/main';
 import { PageElement } from '../page/page-element';
 import { PageTimeline } from '../page/timeline/timeline';
 import cvEnglish from './media/cv-andras-schmelczer.pdf';
-import meWebP from './media/me.jpg?format=webp';
+import me from './media/me.jpg';
 import { adAstraTimelineElement } from './projects/ad-astra';
 import { citySimulationTimelineElement } from './projects/city-simulation';
 import { declaredTimelineElement } from './projects/declared';
@@ -26,7 +26,7 @@ export const create = (): Array<PageElement> => [
     new PageBackground(1, 1),
     new PageHeader({
       name: `András Schmelczer`,
-      imageWebP: meWebP,
+      image: me,
       imageAltText: `a picture of me`,
       about: [
         `

src/data/projects/ad-astra.ts

@@ -1,6 +1,6 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import adAstraWebP from '../media/ad_astra.jpg?format=webp';
+import adAstra from '../media/ad_astra.jpg';
 import adAstraMp4 from '../media/mp4/ad_astra.mp4';
 import adAstraWebM from '../media/webm/ad_astra.webm';
 import { GitHub } from '../shared';
@@ -9,7 +9,7 @@ export const adAstraTimelineElement: TimelineElementParameters = {
   title: `Gaming on an ATtiny85`,
   date: `2020 spring`,
   figure: new Video({
-    posterWebP: adAstraWebP,
+    poster: adAstra,
     mp4: adAstraMp4,
     webm: adAstraWebM,
   }),

src/data/projects/city-simulation.ts

@@ -1,14 +1,14 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import citySimulationMp4 from '../media/mp4/simulation.mp4';
-import citySimulationPosterWebP from '../media/simulation.jpg?format=webp';
+import citySimulationPoster from '../media/simulation.jpg';
 import citySimulationWebM from '../media/webm/simulation.webm';
 
 export const citySimulationTimelineElement: TimelineElementParameters = {
   title: `City simulation`,
   date: `2018 July - August`,
   figure: new Video({
-    posterWebP: citySimulationPosterWebP,
+    poster: citySimulationPoster,
     mp4: citySimulationMp4,
     webm: citySimulationWebM,
   }),

src/data/projects/colors.ts

@@ -1,12 +1,12 @@
 import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import colourWebP from '../media/color.jpg?format=webp';
+import colour from '../media/color.jpg';
 
 export const colorsTimelineElement: TimelineElementParameters = {
   title: `Photo colour grader`,
   date: `2018 June`,
   figure: Image({
-    imageWebP: colourWebP,
+    image: colour,
     alt: `a picture of the app`,
     container: true,
   }),

src/data/projects/declared.ts

@@ -1,13 +1,13 @@
 import { Preview } from '../../page/basics/preview/preview';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import declaredWebP from '../media/decla-red.png?format=webp';
+import declared from '../media/decla-red.png';
 import bscThesis from '../media/sdf2d-andras-schmelczer.pdf';
 import { GitHub, Open, Thesis } from '../shared';
 
 export const declaredTimelineElement: TimelineElementParameters = {
   title: `Multiplayer game`,
   date: `2020 autumn`,
-  figure: new Preview(declaredWebP, 'https://decla.red', 'The website of the video game'),
+  figure: new Preview(declared, 'https://decla.red', 'The website of the video game'),
   description: `
     Using SDF-2D (my ray tracing graphics library), I created a conquest-style multiplayer browser game. 
     It even runs on mobiles.

src/data/projects/forex.ts

@@ -1,6 +1,6 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import forexPosterWebP from '../media/forex.jpg?format=webp';
+import forexPoster from '../media/forex.jpg';
 import forexMp4 from '../media/mp4/forex.mp4';
 import forexWebM from '../media/webm/forex.webm';
 
@@ -8,7 +8,7 @@ export const forexTimelineElement: TimelineElementParameters = {
   title: `Predicting foreign exchange rates`,
   date: `2019 autumn`,
   figure: new Video({
-    posterWebP: forexPosterWebP,
+    poster: forexPoster,
     mp4: forexMp4,
     webm: forexWebM,
     invertButton: true,

src/data/projects/great-ai.ts

@@ -1,14 +1,14 @@
 import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import mscThesis from '../media/great-ai-andras-schmelczer.pdf';
-import greatAiWebP from '../media/great-ai.png?format=webp';
+import greatAi from '../media/great-ai.png';
 import { Open, PyPi, Thesis } from '../shared';
 
 export const greatAiTimelineElement: TimelineElementParameters = {
   title: `GreatAI`,
   date: `2022`,
   figure: Image({
-    imageWebP: greatAiWebP,
+    image: greatAi,
     alt: `some example code using GreatAI`,
     container: true,
   }),

src/data/projects/leds.ts

@@ -1,6 +1,6 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import ledPosterWebP from '../media/led.jpg?format=webp';
+import ledPoster from '../media/led.jpg';
 import ledMp4 from '../media/mp4/led.mp4';
 import ledWebM from '../media/webm/led.webm';
 
@@ -8,7 +8,7 @@ export const ledsTimelineElement: TimelineElementParameters = {
   title: `Lights synchronised to music`,
   date: `2016 spring`,
   figure: new Video({
-    posterWebP: ledPosterWebP,
+    poster: ledPoster,
     mp4: ledMp4,
     webm: ledWebM,
   }),

src/data/projects/my-notes.ts

@@ -1,13 +1,13 @@
 import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import myNotesWebP from '../media/my-notes.png?format=webp';
+import myNotes from '../media/my-notes.png';
 import { GitHub } from '../shared';
 
 export const myNotesTimelineElement: TimelineElementParameters = {
   title: `My Notes`,
   date: `2019 November`,
   figure: Image({
-    imageWebP: myNotesWebP,
+    image: myNotes,
     alt: `two screenshots of the application`,
     container: true,
   }),

src/data/projects/nuclear-editor.ts

@@ -1,12 +1,12 @@
 import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import processSimulatorInputWebP from '../media/process-simulator-input.jpg?format=webp';
+import processSimulatorInput from '../media/process-simulator-input.jpg';
 
 export const nuclearEditorTimelineElement: TimelineElementParameters = {
   title: `Graph editing application`,
   date: `2018 October - November`,
   figure: Image({
-    imageWebP: processSimulatorInputWebP,
+    image: processSimulatorInput,
     alt: `a picture of the simulator's UI`,
     container: true,
   }),

src/data/projects/nuclear.ts

@@ -1,12 +1,12 @@
 import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import processSimulatorWebP from '../media/process-simulator.jpg?format=webp';
+import processSimulator from '../media/process-simulator.jpg';
 
 export const nuclearTimelineElement: TimelineElementParameters = {
   title: `Simulating the cooling system of a nuclear facility`,
   date: `2018 October - November`,
   figure: Image({
-    imageWebP: processSimulatorWebP,
+    image: processSimulator,
     alt: `a screenshot of the simulator`,
     container: true,
   }),

src/data/projects/photos.ts

@@ -1,13 +1,13 @@
 import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import photosWebP from '../media/photos.jpg?format=webp';
+import photos from '../media/photos.jpg';
 import { Open } from '../shared';
 
 export const photosTimelineElement: TimelineElementParameters = {
   title: `Photos`,
   date: `2016 summer`,
   figure: Image({
-    imageWebP: photosWebP,
+    image: photos,
     alt: `a picture of the website`,
     container: true,
   }),

src/data/projects/platform-game.ts

@@ -1,14 +1,14 @@
 import { Video } from '../../page/basics/video/video';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
 import platformMp4 from '../media/mp4/platform.mp4';
-import platformPosterWebP from '../media/platform.png?format=webp';
+import platformPoster from '../media/platform.png';
 import platformWebM from '../media/webm/platform.webm';
 
 export const platformGameTimelineElement: TimelineElementParameters = {
   title: `Platform game`,
   date: `2017 autumn`,
   figure: new Video({
-    posterWebP: platformPosterWebP,
+    poster: platformPoster,
     mp4: platformMp4,
     webm: platformWebM,
   }),

src/data/projects/sdf2d.ts

@@ -1,13 +1,13 @@
 import { Preview } from '../../page/basics/preview/preview';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import sdf2dWebP from '../media/sdf2d.png?format=webp';
+import sdf2d from '../media/sdf2d.png';
 import { NPM, Open, Youtube } from '../shared';
 
 export const sdf2dTimelineElement: TimelineElementParameters = {
   title: `2D ray tracing`,
   date: `2020 autumn`,
   figure: new Preview(
-    sdf2dWebP,
+    sdf2d,
     'https://sdf2d.schmelczer.dev',
     'A webpage showcasing the SDF-2D project.'
   ),

src/data/projects/towers.ts

@@ -1,13 +1,13 @@
 import { Image } from '../../page/basics/image/image.html';
 import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters';
-import towersWebP from '../media/towers.png?format=webp';
+import towers from '../media/towers.png';
 import { GitHub, Open } from '../shared';
 
 export const towersTimelineElement: TimelineElementParameters = {
   title: `Towers tracking app`,
   date: `2019 August - September`,
   figure: Image({
-    imageWebP: towersWebP,
+    image: towers,
     alt: `a picture of the website`,
     container: true,
   }),