Optimize images

frontend/src/components/Header/Header.module.scss

@@ -41,6 +41,7 @@
 
 .logo {
   width: 2.5rem;
+  height: 2.5rem;
   margin-right: 16px;
 }
 
@@ -113,6 +114,7 @@
 
 .bigLogo {
   width: 80px;
+  height: 80px;
   transition: transform .15s;
   animation: jelly .5s 1 .05s;
   user-select: none;

frontend/src/components/Header/Header.tsx

@@ -27,12 +27,12 @@ const Header = async ({ isFull, isSmall }: HeaderProps) => {
 
   return <header className={styles.header} data-small={isSmall}>
     {isFull ? <>
-      {!isSmall && <img className={styles.bigLogo} src={logo.src} alt="" />}
+      {!isSmall && <img className={styles.bigLogo} src={logo.src} height={512} width={512} alt="" />}
       <span className={makeClass(styles.subtitle, samuraiBob.className, !/^[A-Za-z ]+$/.test(t('home:create')) && styles.hasAltChars)}>{t('home:create')}</span>
       <h1 className={makeClass(styles.bigTitle, molot.className)}>CRAB FIT</h1>
     </> : <Link href="/" className={styles.link}>
       <div className={styles.top}>
-        <img className={styles.logo} src={logo.src} alt="" />
+        <img className={styles.logo} src={logo.src} height={512} width={512} alt="" />
         <span className={makeClass(styles.title, molot.className)}>CRAB FIT</span>
       </div>
       <span className={styles.tagline}>{t('common:tagline')}</span>

frontend/src/components/Video/Video.module.scss

@@ -31,6 +31,7 @@
 
   img {
     width: 100%;
+    height: auto;
     display: block;
     border-radius: inherit;
     background-color: #CCC;

frontend/src/components/Video/Video.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 
 import { useTranslation } from '/src/i18n/client'
-import video_thumb from '/src/res/video_thumb.jpg'
+import video_thumb from '/src/res/video_thumb.webp'
 
 import styles from './Video.module.scss'
 
@@ -34,7 +34,7 @@ const Video = () => {
         setIsPlaying(true)
       }}
     >
-      <img src={video_thumb.src} alt={t('video.button')} />
+      <img src={video_thumb.src} width={video_thumb.width} height={video_thumb.height} alt={t('video.button')} />
       <span>{t('video.button')}</span>
     </a>
   )