add pictures to about page and implement them

resources/views/about.blade.php

@@ -27,6 +27,7 @@
 		<h2>{{ trans('about.timeline.3') }}</h2>
 		<p>{{ trans('about.timeline.3.1') }}</p>
 		<picture>
+			<source media="(max-width:465px)" srcset="/img/1997.avif" type="image/avif">
 			<img src="/img/startpage_1997.png" alt="MetaGer 1997" style="width:auto;">
 		  </picture> 
 	</div>
@@ -38,6 +39,7 @@
 		<h2>{{ trans('about.timeline.5') }}</h2>
 		<p>{{ trans('about.timeline.5.1') }}</p>
 		<picture>
+			<source media="(max-width:465px)" srcset="/img/2006.avif" type="image/avif">
 			<img src="/img/startpage_2006.png" alt="MetaGer 2006" style="width:auto;">
 		  </picture> 
 	</div>
@@ -57,6 +59,7 @@
 		<h2>{{ trans('about.timeline.9') }}</h2>
 		<p>{{ trans('about.timeline.9.1') }}</p>
 		<picture>
+			<source media="(max-width:465px)" srcset="/img/2015.avif" type="image/avif">
 			<img src="/img/startpage_2015.png" alt="MetaGer 2015" style="width:auto;">
 		  </picture> 
 	</div>
@@ -69,6 +72,7 @@
 		<h2>{{ trans('about.timeline.11') }}</h2>
 		<p>{{ trans('about.timeline.11.1') }}</p>
 		<picture>
+			<source media="(max-width:465px)" srcset="/img/2016.avif" type="image/avif">
 			<img src="/img/startpage_2016.png" alt="MetaGer 2016" style="width:auto;">
 		  </picture> 
 	</div>
@@ -100,6 +104,7 @@
 		<h2>{{ trans('about.timeline.17') }}</h2>
 		<p>{!! trans('about.timeline.17.1') !!}</p>
 		<picture>
+			<source media="(max-width:465px)" srcset="/img/2020.avif" type="image/avif">
 			<img src="/img/startpage_2020.png" alt="MetaGer 2020">
 		  </picture> 
 	</div>