From ee7f95ac8a64df19db15e36cdf18a417f9099e99 Mon Sep 17 00:00:00 2001
From: "deepanshu.bone" <123951725+29deepanshutyagi@users.noreply.github.com>
Date: Sat, 18 Jan 2025 17:32:20 +0530
Subject: [PATCH] Fixed #824 - img tags replaced by Image (#1197)

* img tags replace to Image

* Refactor Card component to use Image component for displaying images

* fix the prettier format

* Refactor Card component to use Image component with updated width and className

* Refactor image sizes and classNames in StyledMarkdown and index.page.tsx

* Refactor image size in Sidebar component

* Refactor image classNames in Layout and StyledMarkdown components

* Refactor classNames in JsonEditor and StyledMarkdown components
---
 components/Card.tsx                           |  10 +-
 components/DarkModeToggle.tsx                 |   9 +-
 components/GettingStarted.tsx                 |  15 +-
 components/JsonEditor.tsx                     |  40 ++-
 components/Layout.tsx                         |  55 +++-
 components/Sidebar.tsx                        |  34 ++-
 components/StyledMarkdown.tsx                 |  46 ++-
 pages/blog/index.page.tsx                     |  13 +-
 pages/blog/posts/[slug].page.tsx              |   9 +-
 pages/community/index.page.tsx                |   5 +-
 pages/index.page.tsx                          | 271 +++++++++++++++---
 pages/tools/components/ToolingDetailModal.tsx |  10 +-
 pages/tools/index.page.tsx                    |  15 +-
 13 files changed, 434 insertions(+), 98 deletions(-)

diff --git a/components/Card.tsx b/components/Card.tsx
index 5900682d3..9d0477ced 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import TextTruncate from 'react-text-truncate';
+import Image from 'next/image';
 export interface CardProps {
   title: string;
   body: string;
@@ -36,8 +37,11 @@ const CardBody = ({
     <div className='group relative h-full w-full rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors ease-in-out hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30'>
       <div className='flex justify-center '>
         {image && (
-          <img
+          <Image
             src={image}
+            alt={title}
+            width={384}
+            height={128}
             className='h-32 p-2 object-contain'
             data-test='card-image'
           />
@@ -46,9 +50,11 @@ const CardBody = ({
       <div className='flex flex-row items-start mb-6'>
         {icon && (
           <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900 dark:text-white'>
-            <img
+            <Image
               src={icon}
               alt={title}
+              width={56}
+              height={56}
               className='h-full w-full'
               data-test='card-icon'
             />
diff --git a/components/DarkModeToggle.tsx b/components/DarkModeToggle.tsx
index 798a92646..cadf3b7ac 100644
--- a/components/DarkModeToggle.tsx
+++ b/components/DarkModeToggle.tsx
@@ -1,6 +1,7 @@
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 import React from 'react';
+import Image from 'next/image';
 
 function ListItem({
   children,
@@ -52,7 +53,7 @@ export default function DarkModeToggle() {
         className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 transition duration-150 '
         data-test='dark-mode-toggle'
       >
-        <img
+        <Image
           src={activeThemeIcon}
           alt='Dark Mode'
           width={25}
@@ -77,7 +78,7 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('system')}
           data-test='select-system-theme'
         >
-          <img
+          <Image
             src={'/icons/theme-switch.svg'}
             alt='System theme'
             width={18}
@@ -90,7 +91,7 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('light')}
           data-test='select-light-theme'
         >
-          <img
+          <Image
             src={'/icons/sun.svg'}
             alt='System theme'
             width={18}
@@ -103,7 +104,7 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('dark')}
           data-test='select-dark-theme'
         >
-          <img
+          <Image
             src={'/icons/moon.svg'}
             alt='System theme'
             width={18}
diff --git a/components/GettingStarted.tsx b/components/GettingStarted.tsx
index 16c43c54b..e50ba43a9 100644
--- a/components/GettingStarted.tsx
+++ b/components/GettingStarted.tsx
@@ -3,6 +3,7 @@ import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import Highlight from 'react-syntax-highlighter';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
+import Image from 'next/image';
 
 async function fetchData() {
   const response = await fetch('/data/getting-started-examples.json');
@@ -237,9 +238,19 @@ const GettingStarted = () => {
             <p>{details[0]}</p>
 
             {details[1] ? (
-              <img src='/icons/green-tick.svg' alt='green tick' />
+              <Image
+                src='/icons/green-tick.svg'
+                alt='green tick'
+                width={24}
+                height={24}
+              />
             ) : (
-              <img src='/icons/red-cross.svg' alt='red cross' />
+              <Image
+                src='/icons/red-cross.svg'
+                alt='red cross'
+                width={24}
+                height={24}
+              />
             )}
           </div>
         </div>
diff --git a/components/JsonEditor.tsx b/components/JsonEditor.tsx
index b16289f18..af506734a 100644
--- a/components/JsonEditor.tsx
+++ b/components/JsonEditor.tsx
@@ -6,6 +6,7 @@ import getPartsOfJson, { SyntaxPart } from '~/lib/getPartsOfJson';
 import jsonSchemaReferences from './jsonSchemaLinks';
 import { useRouter } from 'next/router';
 import { FullMarkdownContext } from '~/context';
+import Image from 'next/image';
 import getScopesOfParsedJsonSchema, {
   JsonSchemaPathWithScope,
   JsonSchemaScope,
@@ -294,16 +295,22 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
             }}
             data-test='copy-clipboard-button'
           >
-            <img
+            <Image
               src='/icons/copy.svg'
+              alt='Copy icon'
               title='Copy to clipboard'
+              width={20}
+              height={20}
               className={`opacity-50 hover:opacity-90 duration-150 ${copied ? 'hidden' : ''}`}
-            ></img>
-            <img
+            />
+            <Image
               src='/icons/copied.svg'
+              alt='Copied icon'
+              width={20}
+              height={20}
               title='Copied!'
               className={copied ? '' : 'hidden'}
-            ></img>
+            />
           </div>
           <div
             className='flex flex-row items-center text-white h-6 font-sans bg-white/20 text-xs px-3 rounded-bl-lg font-semibold'
@@ -311,7 +318,14 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
           >
             {isJsonSchema ? (
               <>
-                <img src='/logo-white.svg' className='h-4 mr-1.5' /> schema
+                <Image
+                  src='/logo-white.svg'
+                  alt=' logo-white'
+                  width={16}
+                  height={16}
+                  className=' mr-1.5'
+                />{' '}
+                schema
               </>
             ) : (
               <>data</>
@@ -451,7 +465,13 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
             className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-red-500/30 text-sm'
             data-test='not-compliant-to-schema'
           >
-            <img src='/icons/x-mark.svg' className='h-4 w-4 mr-2' />
+            <Image
+              src='/icons/x-mark.svg'
+              alt='Error icon'
+              width={16}
+              height={16}
+              className=' mr-2'
+            />
             not compliant to schema
           </div>
         )}
@@ -460,7 +480,13 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
             className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-slate-500/30 text-sm'
             data-test='compliant-to-schema'
           >
-            <img src='/icons/checkmark.svg' className='h-5 w-5 mr-2' />
+            <Image
+              src='/icons/checkmark.svg'
+              alt='Checkmark icon'
+              width={20}
+              height={20}
+              className='mr-2'
+            />
             compliant to schema
           </div>
         )}
diff --git a/components/Layout.tsx b/components/Layout.tsx
index a43fc53ac..441b83188 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -10,6 +10,7 @@ import { useTheme } from 'next-themes';
 import DarkModeToggle from './DarkModeToggle';
 import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
 import ScrollButton from './ScrollButton';
+import Image from 'next/image';
 
 type Props = {
   children: React.ReactNode;
@@ -327,7 +328,13 @@ const Footer = () => (
   >
     <div className='max-w-[1400px] mx-auto mt-8 md:mt-4 grid grid-cols-1 md:grid-cols-2 md:w-1/2 lg:w-1/3 justify-center '>
       <div className=' my-6 m-auto md:mt-16'>
-        <img src='/img/logos/logo-white.svg' className='w-[150px] mb-6' />
+        <Image
+          src='/img/logos/logo-white.svg'
+          width={150}
+          height={100}
+          alt='logo-white'
+          className='mb-6'
+        />
         <div className='flex flex-col text-center sm:text-left'>
           <a
             href='https://opencollective.com/json-schema'
@@ -348,9 +355,12 @@ const Footer = () => (
             href='https://json-schema.org/slack'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/slack_logo_small-white.svg'
-              className='w-4 h-4 mr-2'
+              width={16}
+              height={16}
+              className=' mr-2'
+              alt='Slack logo'
             />
             Slack
           </a>
@@ -360,7 +370,14 @@ const Footer = () => (
             href='https://x.com/jsonschema'
             className='flex items-center text-white'
           >
-            <img src='/img/logos/x-twitter.svg' className='w-4 h-4 mr-2' />X
+            <Image
+              src='/img/logos/x-twitter.svg'
+              width={16}
+              height={16}
+              className=' mr-2'
+              alt='X logo'
+            />{' '}
+            X
           </a>
         </div>
         <div className=''>
@@ -368,9 +385,12 @@ const Footer = () => (
             href='https://linkedin.com/company/jsonschema/'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/icons8-linkedin-2.svg'
-              className='w-4 h-4 mr-2'
+              width={16}
+              height={16}
+              className=' mr-2'
+              alt='LinkedIn logo'
             />
             LinkedIn
           </a>
@@ -380,7 +400,13 @@ const Footer = () => (
             href='https://www.youtube.com/@JSONSchemaOrgOfficial'
             className='flex items-center text-white'
           >
-            <img src='/img/logos/icons8-youtube.svg' className='w-4 h-4 mr-2' />
+            <Image
+              src='/img/logos/icons8-youtube.svg'
+              width={16}
+              height={16}
+              className='mr-2'
+              alt='YouTube logo'
+            />
             Youtube
           </a>
         </div>
@@ -389,9 +415,12 @@ const Footer = () => (
             href='https://github.com/json-schema-org'
             className='flex items-center text-white'
           >
-            <img
+            <Image
               src='/img/logos/github_logo-white.svg'
-              className='w-4 h-4 mr-2'
+              width={16}
+              height={16}
+              className='mr-2'
+              alt='GitHub logo'
             />
             GitHub
           </a>
@@ -422,7 +451,13 @@ const Logo = () => {
   return (
     <div>
       <Link href='/' className=''>
-        <img src={imageSrc} className='h-12 mr-2 ' />
+        <Image
+          src={imageSrc}
+          width={170}
+          height={48}
+          className='mr-2'
+          alt='Dynamic image'
+        />
       </Link>
     </div>
   );
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 3dc4815b6..baa20be2d 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -9,7 +9,7 @@ import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
 import CarbonAds from './CarbonsAds';
 import { useTheme } from 'next-themes';
 import ExternalLinkIcon from '../public/icons/external-link-black.svg';
-
+import Image from 'next/image';
 const DocLink = ({
   uri,
   label,
@@ -329,7 +329,13 @@ export const DocsNav = ({
           onClick={handleClickDoc}
         >
           <div className='flex  items-center align-middle'>
-            <img src={`${overview_icon}`} alt='eye icon' className='mr-2' />
+            <Image
+              src={`${overview_icon}`}
+              alt='eye icon'
+              height={20}
+              width={22}
+              className='mr-2'
+            />
             <SegmentHeadline label='Overview' />
           </div>
           <svg
@@ -405,7 +411,13 @@ export const DocsNav = ({
           onClick={handleClickGet}
         >
           <div className='flex  items-center align-middle'>
-            <img src={`${learn_icon}`} alt='compass icon' className='mr-2' />
+            <Image
+              src={`${learn_icon}`}
+              alt='compass icon'
+              height={20}
+              width={20}
+              className='mr-2'
+            />
             <SegmentHeadline label='Getting Started' />
           </div>
           <svg
@@ -472,7 +484,13 @@ export const DocsNav = ({
           onClick={handleClickReference}
         >
           <div className='flex  items-center align-middle'>
-            <img src={`${reference_icon}`} alt='book icon' className='mr-2' />
+            <Image
+              src={`${reference_icon}`}
+              alt='book icon'
+              height={20}
+              width={20}
+              className='mr-2'
+            />
             <SegmentHeadline label='Reference' />
           </div>
           <svg
@@ -660,7 +678,13 @@ export const DocsNav = ({
           onClick={handleClickSpec}
         >
           <div className='flex  items-center align-middle'>
-            <img src={`${spec_icon}`} alt='clipboard icon' className='mr-2' />
+            <Image
+              src={`${spec_icon}`}
+              alt='clipboard icon'
+              height={20}
+              width={20}
+              className='mr-2'
+            />
             <SegmentHeadline label='Specification' />
           </div>
           <svg
diff --git a/components/StyledMarkdown.tsx b/components/StyledMarkdown.tsx
index b43dbe9d4..1789ee61c 100644
--- a/components/StyledMarkdown.tsx
+++ b/components/StyledMarkdown.tsx
@@ -388,7 +388,13 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
               component: ({ label }) => {
                 return (
                   <div className='flex flex-row items-center text-blue-500 text-lg font-semibold mb-6 mt-10'>
-                    <img src='/icons/star.svg' className='h-5 w-5 mr-2 mb-1' />
+                    <Image
+                      src='/icons/star.svg'
+                      width={20}
+                      height={20}
+                      className='mr-2 mb-1'
+                      alt='star'
+                    />
                     {label}
                   </div>
                 );
@@ -398,7 +404,13 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
               component: ({ label }) => {
                 return (
                   <div className='inline-flex flex-row items-center text-blue-500 font-semibold'>
-                    <img src='/icons/star.svg' className='h-3 w-3 mr-1' />
+                    <Image
+                      src='/icons/info-yellow.svg'
+                      className='mr-1'
+                      width={12}
+                      height={12}
+                      alt='info yellow'
+                    />
                     {label}
                   </div>
                 );
@@ -414,10 +426,12 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                       </div>
                     )}
                     <div className='flex flex-row items-center mb-6 bg-amber-50 px-6 py-4 border border-amber-100 rounded text-slate-600 leading-7'>
-                      <img
+                      <Image
                         src='/icons/info-yellow.svg'
                         className='h-7 w-7 mr-3'
-                        alt=''
+                        width={28}
+                        height={28}
+                        alt='info yellow'
                       />
                       <div className='font'>{children}</div>
                     </div>
@@ -435,10 +449,12 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                       </div>
                     )}
                     <div className='flex flex-row items-center mb-6 bg-blue-50 px-6 py-4 border border-blue-100 rounded dark:bg-slate-900 dark:text-slate-300 text-slate-600 leading-7'>
-                      <img
+                      <Image
                         src='/icons/info-blue.svg'
-                        className='h-7 w-7 mr-3'
-                        alt=''
+                        className='mr-3'
+                        width={28}
+                        height={28}
+                        alt='info blue'
                       />
                       <div className='font'>{children}</div>
                     </div>
@@ -456,10 +472,12 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                       </div>
                     )}
                     <div className='flex flex-row items-center mb-6 bg-green-50 px-6 py-4 border border-green-100 rounded text-slate-600 leading-7'>
-                      <img
+                      <Image
                         src='/icons/bulb.svg'
-                        className='h-7 w-7 mr-3'
-                        alt=''
+                        className='mr-3'
+                        width={28}
+                        height={28}
+                        alt='bulb'
                       />
                       <div className='font'>{children}</div>
                     </div>
@@ -477,10 +495,12 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                       </div>
                     )}
                     <div className='flex flex-row items-center mb-6 bg-red-50 px-6 py-4 border border-red-100 rounded text-slate-600 leading-7'>
-                      <img
+                      <Image
                         src='/icons/warning.svg'
-                        className='h-7 w-7 mr-3'
-                        alt=''
+                        className='mr-3'
+                        width={28}
+                        height={28}
+                        alt='warning'
                       />
                       <div className='font'>{children}</div>
                     </div>
diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 67aaf5e74..b99ac68d2 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -11,6 +11,7 @@ import generateRssFeed from './generateRssFeed';
 import { useRouter } from 'next/router';
 import useSetUrlParam from '~/lib/useSetUrlParam';
 import { SectionContext } from '~/context';
+import Image from 'next/image';
 
 type Author = {
   name: string;
@@ -145,8 +146,10 @@ export default function StaticMarkdownPage({
         {recentBlog[0] && (
           <div className='relative w-full  h-[400px] bg-black clip-bottom mt-1.5 flex flex-col items-center justify-start dark:bg-slate-700'>
             <div className='absolute w-full h-full dark:bg-[#282d6a]'>
-              <img
+              <Image
                 src={recentBlog[0].frontmatter.cover}
+                width={800}
+                height={450}
                 className='object-cover w-full h-full opacity-70'
                 alt='hero image example'
               />
@@ -210,7 +213,13 @@ export default function StaticMarkdownPage({
               href='/rss/feed.xml'
               className='flex items-center text-blue-500 hover:text-blue-600 cursor-pointer'
             >
-              <img src='/icons/rss.svg' className='rounded h-5 w-5 mr-2' />
+              <Image
+                src='/icons/rss.svg'
+                className='rounded h-5 w-5 mr-2'
+                alt='rss'
+                height={20}
+                width={20}
+              />
               RSS&nbsp;Feed
             </a>
           </div>
diff --git a/pages/blog/posts/[slug].page.tsx b/pages/blog/posts/[slug].page.tsx
index 5f9615ffd..14301176d 100644
--- a/pages/blog/posts/[slug].page.tsx
+++ b/pages/blog/posts/[slug].page.tsx
@@ -12,6 +12,7 @@ import readingTime from 'reading-time';
 import { Headline1 } from '~/components/Headlines';
 import { SectionContext } from '~/context';
 import CarbonAds from '~/components/CarbonsAds';
+import Image from 'next/image';
 
 export async function getStaticPaths() {
   return getStaticMarkdownPaths('pages/blog/posts');
@@ -60,7 +61,13 @@ export default function StaticMarkdownPage({
                   href='/blog'
                   className='font-semibold text-sm pb-0 lg:pb-5 text-slate-700 dark:text-slate-300 dark:hover:text-slate-100 hover:text-slate-800 inline-flex flex-row items-center'
                 >
-                  <img src='/icons/left-arrow.svg' className='h-4 w-4 mr-2' />{' '}
+                  <Image
+                    src='/icons/left-arrow.svg'
+                    width={16}
+                    height={16}
+                    className='h-4 w-4 mr-2'
+                    alt='Left arrow icon'
+                  />
                   Go back to blog
                 </Link>
                 <div className='pt-4 lg:border-t border-none lg:border-r border-slate-100'>
diff --git a/pages/community/index.page.tsx b/pages/community/index.page.tsx
index 11692b016..852404a48 100644
--- a/pages/community/index.page.tsx
+++ b/pages/community/index.page.tsx
@@ -287,9 +287,12 @@ export default function communityPages(props: any) {
             <div className='p-10 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left '>
               <div className='w-full mb-6 '>
                 <Link href={`/blog/posts/${blogPosts[0].slug}`}>
-                  <img
+                  <Image
                     src={blogPosts[0].frontmatter.cover}
                     className='w-full h-[232px]  mb-4'
+                    height={232}
+                    width={400}
+                    alt={blogPosts[0].frontmatter.title}
                   />
                   <h3 className='mb-4 font-semibold dark:text-white'>
                     {blogPosts[0].frontmatter.title}
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index 2d6beb0fb..a653b28c6 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -7,6 +7,7 @@ const PATH = 'pages/blog/posts';
 import readingTime from 'reading-time';
 import Link from 'next/link';
 import TextTruncate from 'react-text-truncate';
+import Image from 'next/image';
 import {
   fetchRemoteICalFile,
   printEventsForNextWeeks,
@@ -106,11 +107,16 @@ const Home = (props: any) => {
   const [common_room_logo, setCommon_room_logo] = useState('');
   const [slack_logo, setSlack_logo] = useState('');
   const [ccopter_logo, setCCopter_logo] = useState('');
+  const [isClient, setIsClient] = useState(false);
   const [octue_logo, setOctue_logo] = useState('');
   const [apideck_logo, setApideck_logo] = useState('');
   const [rxdb_logo, setRxdb_logo] = useState('');
   const [wda_logo, setWDA_logo] = useState('');
 
+  useEffect(() => {
+    // Ensure the component is only rendered client-side
+    setIsClient(true);
+  }, []);
   useEffect(() => {
     if (resolvedTheme === 'dark') {
       setAsyncapi_logo('/img/logos/dark-mode/asyncapi_white.svg');
@@ -183,22 +189,38 @@ const Home = (props: any) => {
               <h3 className='text-white text-xl mb-4'>Used by</h3>
 
               <div className='grid md:grid-cols-2 lg:grid-cols-4 gap-6 mx-auto items-center w-1/3 md:w-100 text-center'>
-                <img
-                  src='/img/logos/usedby/zapier-logo_white.png'
-                  className='w-40 mx-auto'
-                />
-                <img
-                  src='/img/logos/usedby/microsoft-white.png'
-                  className='w-40 mx-auto'
-                />
-                <img
-                  src='/img/logos/usedby/postman-white.png'
-                  className='w-40 mx-auto'
-                />
-                <img
-                  src='/img/logos/usedby/github-white.png'
-                  className='w-40 mx-auto'
-                />
+                {isClient && (
+                  <>
+                    <Image
+                      src='/img/logos/usedby/zapier-logo_white.png'
+                      className='w-40 mx-auto'
+                      alt='zapier'
+                      height={40}
+                      width={160}
+                    />
+                    <Image
+                      src='/img/logos/usedby/microsoft-white.png'
+                      className='w-40 mx-auto'
+                      alt='microsoft'
+                      height={40}
+                      width={160}
+                    />
+                    <Image
+                      src='/img/logos/usedby/postman-white.png'
+                      className='w-40 mx-auto'
+                      alt='postman'
+                      height={40}
+                      width={160}
+                    />
+                    <Image
+                      src='/img/logos/usedby/github-white.png'
+                      className='w-40 mx-auto'
+                      alt='github'
+                      height={40}
+                      width={160}
+                    />
+                  </>
+                )}
               </div>
 
               <p className='text-white mx-4 my-5 dark:text-slate-400'>
@@ -287,10 +309,17 @@ const Home = (props: any) => {
 
         {/* SidebySide section*/}
         <section className='max-w-[1400px] w-full lg:flex lg:gap-20 my-16 '>
-          <img
-            src='/img/home-page/community-illustration.svg'
-            className='w-5/6 mx-auto lg:w-[600px] xl:w-[800px]'
-          />
+          {isClient && (
+            <>
+              <Image
+                src='/img/home-page/community-illustration.svg'
+                className='w-5/6 mx-auto lg:w-[600px] xl:w-[800px]'
+                alt='community'
+                height={600}
+                width={800}
+              />
+            </>
+          )}
           <div className='w-5/6 md:w-3/5 mx-auto mt-12'>
             <h3 className=' text-center lg:text-left text-h3mobile md:text-h3 font-semibold mb-4 dark:text-slate-200'>
               Explore the JSON Schema Ecosystem
@@ -329,12 +358,30 @@ const Home = (props: any) => {
               <Link href='https://json-schema.org/slack'>
                 <h3 className='mb-4 font-semibold flex items-center dark:text-slate-200'>
                   Join the JSON Schema Slack Workspace!
-                  <img src='/img/logos/Slack-mark.svg' className='w-8 h-8' />
+                  {isClient && (
+                    <>
+                      <Image
+                        src='/img/logos/Slack-mark.svg'
+                        className='w-8 h-8'
+                        alt='slack'
+                        height={32}
+                        width={32}
+                      />
+                    </>
+                  )}
                 </h3>
-                <img
-                  src='/img/home-page/slack-json-schema.png'
-                  className='w-full mb-4'
-                />
+                {isClient && (
+                  <>
+                    <Image
+                      src='/img/home-page/slack-json-schema.png'
+                      className='w-full mb-4'
+                      alt='slack-json-schema'
+                      height={500}
+                      width={300}
+                    />
+                  </>
+                )}
+
                 {/* <h3 className='mb-4 font-semibold' >Event</h3> */}
                 <p className='mb-4 dark:text-slate-300'>
                   Join our Slack to ask questions, get feedback on your
@@ -346,10 +393,17 @@ const Home = (props: any) => {
                   href='https://json-schema.org/slack'
                   className='flex items-center '
                 >
-                  <img
-                    src='/img/logos/slack_logo_small-white.svg'
-                    className='w-4 h-4 mr-2 '
-                  />
+                  {isClient && (
+                    <>
+                      <Image
+                        src='/img/logos/slack_logo_small-white.svg'
+                        className='w-4 h-4 mr-2 '
+                        width={16}
+                        height={16}
+                        alt='slack'
+                      />
+                    </>
+                  )}
                   Join Slack
                 </a>
               </button>
@@ -360,10 +414,17 @@ const Home = (props: any) => {
                 <h3 className='mb-5 font-semibold pt-1 dark:text-slate-200'>
                   The JSON Schema Blog
                 </h3>
-                <img
-                  src={blogPosts[0].frontmatter.cover}
-                  className='w-full h-[232px]  mb-4'
-                />
+                {isClient && (
+                  <>
+                    <Image
+                      src={blogPosts[0].frontmatter.cover}
+                      className='w-full h-[232px]  mb-4'
+                      width={600}
+                      height={232}
+                      alt='blog'
+                    />
+                  </>
+                )}
                 <h3 className='mb-4 font-semibold dark:text-slate-300'>
                   {' '}
                   {blogPosts[0].frontmatter.title}
@@ -604,54 +665,154 @@ const Home = (props: any) => {
                 target='_blank'
                 rel='noreferrer'
               >
-                <img src={asyncapi_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={asyncapi_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='asyncapi'
+                    />
+                  </>
+                )}
               </a>
               <a
                 href='https://www.airbnb.com/'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img src={airbnb_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={airbnb_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='airbnb'
+                    />
+                  </>
+                )}
               </a>
               <a
                 href='https://www.postman.com/'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img src={postman_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={postman_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='postman'
+                    />
+                  </>
+                )}
               </a>
               <a href='https://endjin.com/' target='_blank' rel='noreferrer'>
-                <img src={endjin_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={endjin_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='endjin'
+                    />
+                  </>
+                )}
               </a>
               <a href='https://www.llc.org/' target='_blank' rel='noreferrer'>
-                <img src={llc_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={llc_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='llc'
+                    />
+                  </>
+                )}
               </a>
               <a
                 href='https://www.vpsserver.com/en-us/'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img src={vpsserver_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={vpsserver_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='vpsserver'
+                    />
+                  </>
+                )}
               </a>
               <a
                 href='https://www.itflashcards.com/'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img src={itflashcards_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={itflashcards_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='itflashcards'
+                    />
+                  </>
+                )}
               </a>
               <a
                 href='https://www.route4me.com/'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img src={route4me_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={route4me_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='route4me'
+                    />
+                  </>
+                )}
               </a>
               <a href='https://n8n.io/' target='_blank' rel='noreferrer'>
-                <img src={n8n_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={n8n_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='n8n'
+                    />
+                  </>
+                )}
               </a>
               <a href='https://copycopter.ai/' target='_blank' rel='noreferrer'>
-                <img src={ccopter_logo} className=' w-44' />
+                {isClient && (
+                  <>
+                    <Image
+                      src={ccopter_logo}
+                      className=' w-44'
+                      width={176}
+                      height={100}
+                      alt='ccopter'
+                    />
+                  </>
+                )}
               </a>
               <a href='https://www.octue.com/' target='_blank' rel='noreferrer'>
                 <img src={octue_logo} className=' w-44' />
@@ -734,10 +895,30 @@ for Accounting integrations'
           </div>
           <div className='flex flex-col items-center md:flex-row justify-center text-center gap-x-14 gap-y-4'>
             <a href='https://www.commonroom.io'>
-              <img src={common_room_logo} className='w-48 md:w-56' />
+              {isClient && (
+                <>
+                  <Image
+                    src={common_room_logo}
+                    className='w-48 md:w-56'
+                    width={192}
+                    height={224}
+                    alt='n8n'
+                  />
+                </>
+              )}
             </a>
             <a href='https://json-schema.org/slack'>
-              <img src={slack_logo} className='w-24 md:w-32' />
+              {isClient && (
+                <>
+                  <Image
+                    src={slack_logo}
+                    className=' w-24 md:w-32'
+                    width={96}
+                    height={128}
+                    alt='slack'
+                  />
+                </>
+              )}
             </a>
           </div>{' '}
         </section>
diff --git a/pages/tools/components/ToolingDetailModal.tsx b/pages/tools/components/ToolingDetailModal.tsx
index 0b735f440..5f39a6fc5 100644
--- a/pages/tools/components/ToolingDetailModal.tsx
+++ b/pages/tools/components/ToolingDetailModal.tsx
@@ -6,6 +6,7 @@ import Badge from './ui/Badge';
 import type { JSONSchemaTool } from '../JSONSchemaTool';
 import toTitleCase from '../lib/toTitleCase';
 import Link from 'next/link';
+import Image from 'next/image';
 import Tag from './ui/Tag';
 
 export default function ToolingDetailModal({
@@ -43,9 +44,12 @@ export default function ToolingDetailModal({
         <div className='mt-4 flex flex-row items-center justify-start gap-2'>
           {tool.landscape?.logo && (
             <div className='p-2 flex flex-row items-center dark:bg-white rounded-md flex-none'>
-              <img
+              <Image
                 src={`img/tools/logos/${tool.landscape?.logo}`}
                 className='h-[48px] w-[48px]'
+                height={48}
+                width={48}
+                alt='landscape logos'
               />
             </div>
           )}
@@ -341,13 +345,15 @@ const BowtieReportBadge = ({ uri }: { uri: string }) => {
       {loading && !error && (
         <div className='animate-pulse bg-gray-300 dark:bg-slate-600 h-6 w-[176px] rounded-md'></div>
       )}
-      <img
+      <Image
         src={`https://img.shields.io/endpoint?url=${encodeURIComponent(uri)}`}
         onLoad={() => setLoading(false)}
         onError={() => {
           setLoading(false);
           setError(true);
         }}
+        width={100}
+        height={20}
         style={{ display: loading ? 'none' : 'block' }}
         alt='Bowtie Badge'
         className='my-1'
diff --git a/pages/tools/index.page.tsx b/pages/tools/index.page.tsx
index aa41bdedf..fd75e68d7 100644
--- a/pages/tools/index.page.tsx
+++ b/pages/tools/index.page.tsx
@@ -16,6 +16,7 @@ import ToolingTable from './components/ToolingTable';
 import useToolsTransform from './hooks/useToolsTransform';
 import getDistinctEntries from './lib/getDistinctEntries';
 import type { JSONSchemaTool } from './JSONSchemaTool';
+import Image from 'next/image';
 
 export type FilterCriteriaFields =
   | 'languages'
@@ -181,9 +182,12 @@ export default function ToolingPage({
                   target='_blank'
                   rel='noreferrer'
                 >
-                  <img
+                  <Image
                     src='/img/tools/adding_your_tool.png'
-                    className='rounded-sm h-[68px]'
+                    className='rounded-sm  '
+                    height={68}
+                    width={190}
+                    alt='adding your tool'
                   />
                 </Link>
                 <p className='hidden lg:block text-slate-600 dark:text-slate-300 px-4'>
@@ -199,9 +203,12 @@ export default function ToolingPage({
                   target='_blank'
                   rel='noreferrer'
                 >
-                  <img
+                  <Image
                     src='/img/tools/try_bowtie.png'
-                    className='rounded-sm h-[68px]'
+                    className='rounded-sm '
+                    height={68}
+                    width={190}
+                    alt='try bowtie'
                   />
                 </Link>
                 <p className='hidden lg:block text-slate-600 dark:text-slate-300 px-4'>