Use next/image for styled.img's

src/components/HeaderLogo.tsx

@@ -1,28 +1,27 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
 import { Link } from "@components/index";
-import breakpoints from "@theme/breakpoints";
 
 const TitleImage = "/img/SIK_RGB_W_side.png";
 
-// TODO: Responsive size
-const Logo = styled.img`
-  max-width: 300px;
-  margin: 1rem 1rem;
-
-  @media screen and (max-width: ${breakpoints.mobile}) {
-    max-width: 100% !important;
-    margin: 1rem 0 !important;
-  }
+const Logo = styled(Link)`
+  position: relative;
+  min-width: 200px;
+  min-height: 100px;
+  margin: 1rem 0 !important;
+  flex: 1 0 auto;
 `;
 
 const HeaderLogo: React.FC = () => (
-  <Link to="/">
-    <Logo
+  <Logo to="/">
+    <Image
       src={TitleImage}
       alt="logo"
+      layout="fill"
+      objectFit="scale-down"
     />
-  </Link>
+  </Logo>
 );
 
 export default HeaderLogo;

src/views/FreshmenPage/FreshmenPageView.tsx

@@ -1,14 +1,11 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
 import FreshmenPageHero from "./FreshmenPageHero";
 import {
   CTASection, TextSection, InfoBox, PageLink, Link,
 } from "@components/index";
 
-const KippariImage = styled.img`
-  max-width:100%;
-`;
-
 const FOPAS_LINK = "";
 const FUKSI_POINTS_LINK = "";
 const TG_GROUP_CHAT_LINK = "https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg";
@@ -16,6 +13,10 @@ const TG_NOTIFICATIONS_LINK = "";
 const EMAIL_LINK = "sik-ftmk@list.ayy.fi";
 const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`;
 
+const ImageContainer = styled.div`
+  width: 100%;
+`;
+
 const FreshmenPageView: React.FC = () => (
   <>
     <FreshmenPageHero />
@@ -53,7 +54,18 @@ const FreshmenPageView: React.FC = () => (
             Fuksipisteohje
           </PageLink>
         </div>
-        <KippariImage src="https://static.sika.sik.party/uus_webi/fuksikipparit.jpg" />
+
+        <ImageContainer>
+          <Image
+            src="https://static.sika.sik.party/uus_webi/fuksikipparit.jpg"
+            alt="Kipparit"
+            layout="responsive"
+            width={0}
+            height={0}
+            objectFit="contain"
+          />
+        </ImageContainer>
+
         <div>
           <InfoBox>
             <h6>Telegram?</h6>

src/views/StudiesPage/StudiesPageView.tsx

@@ -1,17 +1,10 @@
 import React from "react";
-import styled from "styled-components";
+import Image from "next/image";
 import {
   CTASection, TextSection, PageLink, Accordion, Link,
 } from "@components/index";
 import StudiesPageHero from "./StudiesPageHero";
 
-// TODO: Responsive
-const TestimonialImage = styled.img`
-  max-width: 500px;
-  max-height: 500px;
-  width: 100%;
-`;
-
 const StudiesPageView: React.FC = () => (
   <>
     <StudiesPageHero />
@@ -53,10 +46,13 @@ const StudiesPageView: React.FC = () => (
 
         <h6>Alumnien tarinoita</h6>
         <p>SIKin alumneja löytyy vaikka mistä! Tässä muutama esimerkki erilaisista työtehtävistä ja tarinoista.</p>
-
-        <TestimonialImage
+        <Image
           src="https://static.sika.sik.party/uus_webi/images/original/Ville_Viikari_photo_by_Anni_Hanen_02_Original.jpg"
           alt="Ville Viikari"
+          width={300}
+          height={150}
+          layout="responsive"
+          objectFit="contain"
         />
         <h6>Ville Viikari</h6>
         <p>