Use next/image for all <img> tags

next.config.js

@@ -1,11 +1,22 @@
 const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
 
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
-  enabled: process.env.ANALYZE === 'true',
+  enabled: process.env.ANALYZE === "true",
 });
 
 module.exports = withBundleAnalyzer({
   target: "server",
+  images: {
+    domains: [
+      "api.sika.sik.party",
+      "api.dev.sik.party",
+      "static.sika.sik.party",
+      "sahkoinsinoorikilta.fi",
+      "api.sahkoinsinoorikilta.fi",
+      "static.sahkoinsinoorikilta.fi",
+      "placehold.it"
+    ],
+  },
   webpack: (config) => {
     config.plugins.push(
       new FaviconsWebpackPlugin({

src/components/AddIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Image from "next/image";
+
+const Icon = "/img/add-icon.png";
+
+const AddIcon: React.FC = () => (
+  <Image
+    src={Icon}
+    width={20}
+    height={20}
+    alt="Add"
+  />
+);
+
+export default AddIcon;

src/components/AddLink.tsx

@@ -2,8 +2,7 @@ import React, { ComponentProps } from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
-
+import AddIcon from "@components/AddIcon";
-const AddIcon = "/img/add-icon.png";
 
 const StyledLink = styled(Link)`
   display: flex;
@@ -15,10 +14,9 @@ const StyledLink = styled(Link)`
     color: ${colors.orange2};
   }
 
-  img {
+  & > div {
-    margin-right: 8px;
+    margin-right: 8px !important;
-    margin-top: -2px;
+    margin-top: -2px !important;
-    width: 20px;
   }
 `;
 
@@ -28,7 +26,7 @@ type AddLinkProps = ComponentProps<typeof Link> & {
 
 const AddLink: React.FC<AddLinkProps> = ({ text, ...props }) => (
   <StyledLink passHref {...props}>
-    <img src={AddIcon} />
+    <AddIcon />
     {text}
   </StyledLink>
 );

src/components/Card.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
@@ -19,12 +20,6 @@ const StyledCard = styled.article`
   margin: 1rem;
   text-align: center;
 
-  img {
-    width: 100%;
-    max-height: 300px;
-    margin-bottom: 1rem;
-  }
-
   p {
     font-size: 1rem;
     text-overflow: ellipsis;
@@ -77,7 +72,7 @@ const WrappedCard: React.FC<WrappedCardProps> = ({
   };
   const datetime = new Date(start_time).toLocaleString("fi-FI", options);
   const img = image ? (
-    <img src={image} alt={imageAlt} />
+    <Image src={image} alt={imageAlt} layout="responsive" width={0} height={0} objectFit="scale-down" />
   ) : null;
 
   const button = (

src/components/ContactCard.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
 
@@ -12,7 +13,7 @@ const Card = styled.article`
 `;
 
 const ImageContainer = styled.div`
-  padding: 0.5rem;
+  position: relative;
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -20,9 +21,8 @@ const ImageContainer = styled.div`
   height: 5rem;
   width: 5rem;
 
-  & > img {
+  img {
-    width: 100%;
+    padding: 0.5rem !important;
-    height: 100%;
     border-radius: 50%;
   }
 `;
@@ -60,9 +60,11 @@ const ContactCard: React.FC<ContactCardProps> = ({
   <Card>
     {image ? (
       <ImageContainer>
-        <img
+        <Image
           src={image}
           alt={name}
+          layout="fill"
+          objectFit="scale-down"
         />
       </ImageContainer>
     ) : null}

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -5,8 +5,7 @@ import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { Question } from ".";
 import colors from "@theme/colors";
 import QuestionList from "./QuestionList";
-
+import AddIcon from "@components/AddIcon";
-const AddIcon = "/img/add-icon.png";
 
 const Widget = styled.div`
   & > button {
@@ -18,10 +17,9 @@ const Widget = styled.div`
     padding: 0;
     margin: 1rem 0;
 
-    & > img {
+    & > div {
-      margin-right: 8px;
+      margin-right: 8px !important;
-      margin-top: -2px;
+      margin-top: -2px !important;
-      width: 20px;
     }
   }
 `;
@@ -90,7 +88,7 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
         </Droppable>
       </DragDropContext>
       <AddQuestionButton type="button" onClick={handleNewRowClick(questions)} data-e2e="admin-signup-new-question">
-        <img src={AddIcon} />
+        <AddIcon />
         New Question
       </AddQuestionButton>
     </Widget>

src/views/ActualPage/ActualPageView.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
+import breakpoints from "@theme/breakpoints";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
 
@@ -19,10 +21,12 @@ const Gallery = styled.div`
   display: flex;
   flex-flow: row nowrap;
 
-  img {
+  @media screen and (max-width: ${breakpoints.mobile}) {
-    max-width: calc(100% / 3);
+    flex-flow: column;
+  }
+
+  div {
     flex: 1 0;
-    object-fit: cover;
   }
 `;
 
@@ -45,9 +49,9 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
     </CTASection>
 
     <Gallery>
-      <img src="https://placehold.it/400x400" />
+      <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
-      <img src="https://placehold.it/400x400" />
+      <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
-      <img src="https://placehold.it/400x400" />
+      <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
     </Gallery>
 
     <CTASection

src/views/EventPage/EventPageView.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
 import colors from "@theme/colors";
 import { Event } from "@models/Event";
@@ -21,10 +22,6 @@ const StyledTextSection = styled(TextSection)`
     p {
       color: ${colors.orange1};
     }
-
-    img {
-      width: 100%;
-    }
   }
 `;
 
@@ -47,9 +44,13 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
         <p>
           {event.description_fi}
         </p>
-        <div>
+        <Image
-          <img src={event.image || event.tags[0].icon} alt={event.title_fi} />
+          src={event.image || event.tags[0].icon}
-        </div>
+          alt={event.title_fi}
+          layout="responsive"
+          width={0}
+          height={0}
+        />
       </h1>
       <div>
         <Content source={event.content_fi} escapeHtml={false} />

src/views/FrontPage/FrontPageView.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import styled from "styled-components";
 import {
   Card,
@@ -45,13 +46,9 @@ const SponsorReel = styled.div`
 
     & > * {
       margin: 1rem;
+      min-width: 200px;
     }
   }
-
-  img {
-    width: 200px;
-    object-fit: cover;
-  }
   a {
     color: ${colors.blue1};
     text-decoration: underline;
@@ -122,17 +119,39 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
         <h6>Yhteistyössä:</h6>
         <SponsorReel>
           <div>
-            <Link to="https://new.abb.com/fi/uralle"><img src={ABB} /></Link>
+            <Link to="https://new.abb.com/fi/uralle">
-            <Link to="https://www.capgemini.com/"><img src={Capgemini} /></Link>
+              <Image src={ABB} alt="ABB" layout="responsive" width={200} height={100} objectFit="contain" />
-            <Link to="https://www.caruna.fi/tietoa-meista/tyonhakijalle/tyonantajalupaus"><img src={Caruna} /></Link>
+            </Link>
-            <Link to="https://www.eaton.com/us/en-us.html"><img src={Eaton} /></Link>
+            <Link to="https://www.capgemini.com/">
-            <Link to="https://www.ensto.com/fi"><img src={Ensto} /></Link>
+              <Image src={Capgemini} alt="Capgemini" layout="responsive" width={200} height={100} objectFit="contain" />
-            <Link to="https://www.esett.com/"><img src={eSett} /></Link>
+            </Link>
-            <Link to="https://www.fennovoima.fi/"><img src={Fennovoima} /></Link>
+            <Link to="https://www.caruna.fi/tietoa-meista/tyonhakijalle/tyonantajalupaus">
-            <Link to="https://www.fingrid.fi/"><img src={Fingrid} /></Link>
+              <Image src={Caruna} alt="Caruna" layout="responsive" width={200} height={100} objectFit="contain" />
-            <Link to="https://www.nrcgroup.fi/"><img src={NRCGroup} /></Link>
+            </Link>
-            <Link to="https://www.okmetic.com/fi/"><img src={Okmetic} /></Link>
+            <Link to="https://www.eaton.com/us/en-us.html">
-            <Link to="https://www.sogeti.com/"><img src={Sogeti} /></Link>
+              <Image src={Eaton} alt="Eaton" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
+            <Link to="https://www.ensto.com/fi">
+              <Image src={Ensto} alt="Ensto" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
+            <Link to="https://www.esett.com/">
+              <Image src={eSett} alt="eSett" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
+            <Link to="https://www.fennovoima.fi/">
+              <Image src={Fennovoima} alt="Fennovoima" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
+            <Link to="https://www.fingrid.fi/">
+              <Image src={Fingrid} alt="Fingrid" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
+            <Link to="https://www.nrcgroup.fi/">
+              <Image src={NRCGroup} alt="NRCGroup" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
+            <Link to="https://www.okmetic.com/fi/">
+              <Image src={Okmetic} alt="Okmetic" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
+            <Link to="https://www.sogeti.com/">
+              <Image src={Sogeti} alt="Sogeti" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
           </div>
           <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
         </SponsorReel>