Replace JPG with WEBP and fix anchors

Author: blokhin

src/assets/img/code.jpg

@@ -1,4 +1,4 @@
-<div class="backend">
+<div class="backend" id="metis-backend">
 	<Grid stack>
 		<Col col="10">
 			<div class="backend_title">scientific backend</div>
@@ -8,7 +8,7 @@
 			</div>
 		</Col>
 		<Col col="2">
-			<img class="backend_code_img" src="assets/img/code.jpg" alt="code" />
+			<img class="backend_code_img" src="assets/img/code.webp" alt="code" />
 		</Col>
 	</Grid>
 	<Grid stack>

src/assets/img/code.webp

@@ -11,7 +11,7 @@
 		The crystalline structures are then stored in the centralized database in a single unified format and can be data-mined, e.g. attributed to the standard
 		material phases known.
 	</div>
-	<img src="assets/img/crystalline_structure.jpg" alt="crystalline structure" class="crystalline_img" />
+	<img src="assets/img/crystalline_structure.webp" alt="crystalline structure" class="crystalline_img" />
 </div>
 
 <style lang="scss">