diff --git a/templates/page.html b/templates/page.html
index 5539f5c..508e8dd 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -10,6 +10,95 @@
 	<link rel="stylesheet" href="{{ get_url(path='fonts.css') }}">
 	<link rel="stylesheet" href="{{ get_url(path='forkawesome.css') }}">
 	<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
+	<link rel="stylesheet" href="https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.css">
+	<script type="module">
+		import PhotoSwipeLightbox from "https://unpkg.com/photoswipe@5.3.7/dist/photoswipe-lightbox.esm.js";
+		import PhotoSwipe from "https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.esm.js";
+		const lightbox = new PhotoSwipeLightbox({
+			gallery: '.instant a',
+			pswpModule: PhotoSwipe
+		});
+
+		// use <picture> instead of <img>
+		lightbox.on('contentLoad', (e) => {
+			const { content, isLazy } = e;
+
+			const avifSrc = content.data.element.dataset.pswpAvif;
+			const webpSrc = content.data.element.dataset.pswpWebp;
+			if (avifSrc || webpSrc) {
+				// prevent to stop the default behavior
+				e.preventDefault();
+
+				content.pictureElement = document.createElement('picture');
+
+				if (avifSrc) {
+					const sourceAvif = document.createElement('source');
+					sourceAvif.srcset =avifSrc;
+					sourceAvif.type = 'image/avif';
+					content.pictureElement.appendChild(sourceAvif);
+				}
+				if (webpSrc) {
+					const sourceWebp = document.createElement('source');
+					sourceWebp.srcset = webpSrc;
+					sourceWebp.type = 'image/webp';
+					content.pictureElement.appendChild(sourceWebp);
+				}
+
+				const source = document.createElement('source');
+				source.srcset = content.data.src;
+				if (/.png$/.test(content.data.src)) {
+					source.type = 'image/png';
+				} else {
+					source.type = 'image/jpeg';
+				}
+				content.pictureElement.appendChild(source);
+
+				content.element = document.createElement('img');
+				content.element.src = content.data.src;
+				content.element.setAttribute('alt', '');
+				content.element.className = 'pswp__img';
+				content.pictureElement.appendChild(content.element);
+
+				content.state = 'loading';
+
+				if (content.element.complete) {
+						content.onLoaded();
+				} else {
+					content.element.onload = () => {
+						content.onLoaded();
+					};
+
+					content.element.onerror = () => {
+						content.onError();
+					};
+				}
+			}
+		});
+
+
+		// by default PhotoSwipe appends <img>,
+		// but we want to append <picture>
+		lightbox.on('contentAppend', (e) => {
+			const { content } = e;
+			if (content.pictureElement && !content.pictureElement.parentNode) {
+				e.preventDefault();
+				content.slide.container.appendChild(content.pictureElement);
+			}
+		});
+
+		// for next/prev navigation with <picture>
+		// by default PhotoSwipe removes <img>,
+		// but we want to remove <picture>
+		lightbox.on('contentRemove', (e) => {
+			const { content } = e;
+			if (content.pictureElement && content.pictureElement.parentNode) {
+				e.preventDefault();
+				content.pictureElement.remove();
+			}
+		});
+
+		lightbox.init();
+	</script>
 </head>
 <body>
 	<header>
diff --git a/templates/shortcodes/figure.html b/templates/shortcodes/figure.html
index 7db42f1..1427468 100644
--- a/templates/shortcodes/figure.html
+++ b/templates/shortcodes/figure.html
@@ -1,48 +1,50 @@
+{% set avif_src = src |
+replace(from=".jpg",to=".avif") |
+replace(from=".png",to=".avif") %}
+
 {% set orig_thumb = src %}
 {% if thumb %}
 	{% set orig_thumb = src |
 	replace(from=".jpg",to=thumb~".jpg") |
 	replace(from=".png",to=thumb~".png") %}
 {% endif %}
-{% set webp_thumb = thumb |
-replace(from=".jpg",to=".webp") |
-replace(from=".png",to=".webp") %}
-{% set avif_thumb = webp_thumb |
-replace(from=".webp",to=".avif") %}
+{% set avif_thumb = orig_thumb |
+replace(from=".jpg",to=".avif") |
+replace(from=".png",to=".avif") %}
 
 {% set src_url = get_url(path=src) %}
+{% set avif_url = get_url(path=avif_src) %}
+
 {% set thumb_url = get_url(path=orig_thumb) %}
-{% set webp_url = get_url(path=webp_thumb) %}
-{% set avif_url = get_url(path=avif_thumb) %}
+{% set avif_thumb_url = get_url(path=avif_thumb) %}
 
 {% set img_data = get_image_metadata(path=src) %}
+{% set avif_data = true %}
+
 {% set thumb_data = get_image_metadata(path=orig_thumb) %}
-{% set avif_data = get_image_metadata(path=avif_thumb,allow_missing=true) %}
-{% set webp_data = get_image_metadata(path=webp_thumb,allow_missing=true) %}
+{% set avif_thumb_data = true %}
 <div class="box"
 	style="--w:{{thumb_data.width}};--h:{{thumb_data.height}};"
 >
-<figure class="instant"
+<figure
+	class="instant"
 	style="max-width:calc({{thumb_data.width}}px + 4vw)"
 	itemprop="associatedMedia" itemscope
 	itemtype="http://schema.org/ImageObject"
 >
-	<picture
-		
-		class="thumb {%if avif_data %} avif{%endif%}{%if webp_data %} webp{%endif%}"
-		data-size="{{img_data.width}}x{{img_data.height}}"
+	<a href="{{src_url}}" itemprop="contentUrl"
+		data-pswp-width="{{img_data.width}}" data-pswp-height="{{img_data.height}}"
+		{%if avif_data %}data-pswp-avif="{{avif_url}}"{%endif%}
 	>
-		{% if avif_data %}
-		<source srcset="{{avif_url}}" type="image/avif">
-		{% endif %}
-		{% if webp_data %}
-		<source srcset="{{webp_url}}" type="image/webp">
-		{% endif %}
-		<source srcset="{{thumb_url}}" type="image/{{thumb_data.format}}">
-		<img itemprop="thumbnail" src="{{thumb_url}}"
-		{% if caption %} alt="{{caption | markdown | striptags}}{% endif %}"/>
-	</picture>
-	<a href="/{{src_url}}" itemprop="contentUrl"></a>
+		<picture class="thumb">
+			{% if avif_thumb_data %}
+			<source srcset="{{avif_thumb_url}}" type="image/avif">
+			{% endif %}
+			<source srcset="{{thumb_url}}" type="image/{{thumb_data.format}}">
+			<img itemprop="thumbnail" src="{{thumb_url}}"
+			{% if caption %} alt="{{caption | markdown | striptags}}{% endif %}"/>
+		</picture>
+	</a>
 	{% if caption %}
 	<figcaption>
 		{{ caption | markdown | safe }}
