refactor: use picture element for responsive images

src/php/views/page.twig

@@ -3,18 +3,21 @@
 {% block content %}
 	<div>
 		{% if post.thumbnail %}
-		<img
-			src="{{ post.thumbnail.src('large') }}"
-			srcset="{{ post.thumbnail.src('thumbnail') }} 150w,
-					{{ post.thumbnail.src('medium') }} 300w,
-					{{ post.thumbnail.src('medium_large')}} 768w,
-					{{ post.thumbnail.src('large') }} 1024w,
-					{{ post.thumbnail.src|resize(960) }}"
-			sizes="(max-width: 960px) 100vw, 960px"
-			{% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %}
-				alt="{{ post.thumbnail.alt }}"
-			{% endif %}
-		/>
+			{% set largest_image = post.thumbnail.src('large') %}
+			<picture>
+				{% for image_size in post.thumbnail.sizes|sort((a, b) => a.width <=> b.width)|keys %}
+					{% set largest_image = post.thumbnail.src(image_size) %}
+					<source srcset="{{ post.thumbnail.src(image_size) }}" media="(max-width: {{ post.thumbnail.sizes[image_size]['width'] }}px)" >
+				{% endfor %}
+				<img
+					src="{{ largest_image }}"
+					{% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %}
+						alt="{{ post.thumbnail.alt }}"
+					{% else %}
+						alt=""
+					{% endif %}
+				>
+			</picture>
 		{% endif %}
 		{{ post.content }}
 		{# Loads comments.php by default #}

src/php/views/partials/content-single.twig

@@ -5,6 +5,8 @@
 			class="post-preview__featured-image"
 			{% if post.thumbnail.alt and post.thumbnail.alt|length > 0 %}
 				alt="{{ post.thumbnail.alt }}"
+			{% else %}
+				alt=""
 			{% endif %}
 		/>
 	{% endif %}