diff --git a/website/pages/[...listPathPage].tsx b/website/pages/[...listPathPage].tsx
index 0290f575f..41fe42458 100644
--- a/website/pages/[...listPathPage].tsx
+++ b/website/pages/[...listPathPage].tsx
@@ -122,10 +122,11 @@ export const getStaticProps: GetStaticProps<PropsPage, ParsedUrlQuery> = async (
 
     const next =
         section === 'usage'
-            ? sidebarUsageFlat.find(
-                  (item, index) =>
-                      index > 0 && sidebarUsageFlat[index - 1].url === slug && item[0] === '/'
-              )
+            ? sidebarUsageFlat.find((item, index) => {
+                  return (
+                      index > 0 && sidebarUsageFlat[index - 1].url === slug && item.url[0] === '/'
+                  )
+              })
             : undefined
 
     return {
diff --git a/website/pages/index.tsx b/website/pages/index.tsx
index dba1868c3..170bca137 100644
--- a/website/pages/index.tsx
+++ b/website/pages/index.tsx
@@ -29,6 +29,7 @@ import tailoredPipelinesImage from '../public/images/spacy-tailored-pipelines_wi
 import { nightly, legacy } from '../meta/dynamicMeta.mjs'
 
 import Benchmarks from '../docs/usage/_benchmarks-models.mdx'
+import { ImageFill } from '../src/components/embed'
 
 function getCodeExample(nightly) {
     return `# pip install -U ${nightly ? 'spacy-nightly --pre' : 'spacy'}
@@ -113,7 +114,10 @@ const Landing = () => {
                 >
                     <p>
                         <Link to="https://explosion.ai/custom-solutions" hidden>
-                            <img src={tailoredPipelinesImage.src} alt="spaCy Tailored Pipelines" />
+                            <ImageFill
+                                image={tailoredPipelinesImage}
+                                alt="spaCy Tailored Pipelines"
+                            />
                         </Link>
                     </p>
                     <p>
@@ -159,9 +163,8 @@ const Landing = () => {
                 >
                     <p>
                         <Link to="https://prodi.gy" hidden>
-                            {/** Update image */}
-                            <img
-                                src={prodigyImage.src}
+                            <ImageFill
+                                image={prodigyImage}
                                 alt="Prodigy: Radically efficient machine teaching"
                             />
                         </Link>
@@ -203,7 +206,7 @@ const Landing = () => {
             <LandingGrid cols={2}>
                 <LandingCol>
                     <Link to="/usage/projects" hidden>
-                        <img src={projectsImage.src} />
+                        <ImageFill image={projectsImage} />
                     </Link>
                     <br />
                     <br />
@@ -259,8 +262,8 @@ const Landing = () => {
                 >
                     <p>
                         <Link to="https://course.spacy.io" hidden>
-                            <img
-                                src={courseImage.src}
+                            <ImageFill
+                                image={courseImage}
                                 alt="Advanced NLP with spaCy: A free online course"
                             />
                         </Link>
diff --git a/website/src/components/card.js b/website/src/components/card.js
index 852349f24..9eb597b7b 100644
--- a/website/src/components/card.js
+++ b/website/src/components/card.js
@@ -18,6 +18,7 @@ export default function Card({ title, to, image, header, small, onClick, childre
                 <H5 className={classes.title}>
                     {image && (
                         <div className={classes.image}>
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
                             <img src={image} width={35} alt="" />
                         </div>
                     )}
diff --git a/website/src/components/embed.js b/website/src/components/embed.js
index 15587ff95..53f4e9184 100644
--- a/website/src/components/embed.js
+++ b/website/src/components/embed.js
@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import ImageNext from 'next/image'
 
 import Link from './link'
 import Button from './button'
@@ -88,6 +89,7 @@ const Image = ({ src, alt, title, href, ...props }) => {
     return (
         <figure className="gatsby-resp-image-figure">
             <Link className={linkClassNames} href={href ?? src} hidden forceExternal>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img className={classes.image} src={src} alt={alt} width={650} height="auto" />
             </Link>
             {title && (
@@ -99,6 +101,17 @@ const Image = ({ src, alt, title, href, ...props }) => {
     )
 }
 
+const ImageFill = ({ image, ...props }) => {
+    return (
+        <span
+            class={classes['figure-fill']}
+            style={{ paddingBottom: `${(image.height / image.width) * 100}%` }}
+        >
+            <ImageNext src={image.src} {...props} fill />
+        </span>
+    )
+}
+
 const GoogleSheet = ({ id, link, height, button = 'View full table' }) => {
     return (
         <figure className={classes.root}>
@@ -118,4 +131,4 @@ const GoogleSheet = ({ id, link, height, button = 'View full table' }) => {
     )
 }
 
-export { YouTube, SoundCloud, Iframe, Image, GoogleSheet }
+export { YouTube, SoundCloud, Iframe, Image, ImageFill, GoogleSheet }
diff --git a/website/src/components/title.js b/website/src/components/title.js
index 3200bea90..0aab4b5ba 100644
--- a/website/src/components/title.js
+++ b/website/src/components/title.js
@@ -10,6 +10,7 @@ import { H1, Label, InlineList, Help } from './typography'
 import Icon from './icon'
 
 import classes from '../styles/title.module.sass'
+import Image from 'next/image'
 
 const MetaItem = ({ label, url, children, help }) => (
     <span>
@@ -50,6 +51,7 @@ export default function Title({
 
                     {image && (
                         <div className={classes.image}>
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
                             <img src={image} width={100} height={100} alt="" />
                         </div>
                     )}
diff --git a/website/src/styles/embed.module.sass b/website/src/styles/embed.module.sass
index fdb740951..82b7408ca 100644
--- a/website/src/styles/embed.module.sass
+++ b/website/src/styles/embed.module.sass
@@ -32,6 +32,13 @@
     max-width: 100%
     margin: 0 auto
 
+.figure-fill
+    display: block
+    position: relative
+    width: 100%
+    img
+        object-fit: contain
+
 .image-link
     display: block
 
diff --git a/website/src/templates/universe.js b/website/src/templates/universe.js
index 719928dba..fcd433823 100644
--- a/website/src/templates/universe.js
+++ b/website/src/templates/universe.js
@@ -20,6 +20,7 @@ import { github, MarkdownToReact } from '../components/util'
 
 import { nightly, legacy } from '../../meta/dynamicMeta.mjs'
 import universe from '../../meta/universe.json'
+import Image from 'next/image'
 
 function filterResources(resources, data) {
     const sorted = resources.sort((a, b) => a.id.localeCompare(b.id))
@@ -80,6 +81,7 @@ const UniverseContent = ({ content = [], categories, theme, pageContext, mdxComp
                                     }
                                     const url = `/universe/project/${id}`
                                     const header = youtube && (
+                                        // eslint-disable-next-line @next/next/no-img-element
                                         <img
                                             src={`https://img.youtube.com/vi/${youtube}/0.jpg`}
                                             alt=""
@@ -92,6 +94,7 @@ const UniverseContent = ({ content = [], categories, theme, pageContext, mdxComp
                                     return cover ? (
                                         <p key={id}>
                                             <Link key={id} to={url} hidden>
+                                                {/* eslint-disable-next-line @next/next/no-img-element */}
                                                 <img src={cover} alt={title || id} />
                                             </Link>
                                         </p>
@@ -205,6 +208,7 @@ const Project = ({ data, components }) => (
                                 `license/${data.github}.svg?style=flat-square`,
                                 `stars/${data.github}.svg?style=social&label=Stars`,
                             ].map((url, i) => (
+                                // eslint-disable-next-line @next/next/no-img-element
                                 <img
                                     style={{
                                         borderRadius: '1em',
@@ -236,6 +240,7 @@ const Project = ({ data, components }) => (
 
         {data.cover && (
             <p>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img src={data.cover} alt={data.title} width={250} style={{ maxWidth: '50%' }} />
             </p>
         )}
@@ -266,6 +271,7 @@ const Project = ({ data, components }) => (
 
             {data.image && (
                 <p>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img src={data.image} style={{ maxWidth: '100%' }} alt="" />
                 </p>
             )}