Manually optimized images.

next.config.mjs

@@ -1,10 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
-  // basePath: "/Elderbrew",
   assetPrefix: '/',
   images: {
     domains: ['www.elderbrew.com'],
+    unoptimized: true,
   },
   compiler: {
     styledComponents: true,

src/app/about/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
-import Image, { ImageLoaderProps } from 'next/image'
+import Image from 'next/image'
 import BigHeader from '@/components/BigHeader';
 import { styled } from '@mui/material/styles';
 
@@ -12,10 +12,6 @@ const StyledBigHeader = styled(BigHeader)(() => ({
   margin: '0 0 2rem',
 }));
 
-const imageLoader = ({ src, width, quality }: ImageLoaderProps) => {
-  return `https://www.elderbrew.com/${src}?w=${width}&q=${quality || 75}`
-}
-
 export default function About() {
   return (
     <>
@@ -33,14 +29,12 @@ export default function About() {
             width="500"
             height="333"
             alt="Elderbrew"
-            loader={imageLoader}
           />
           <Image
             src="elderbrew-00608.jpg"
             width="500"
             height="333"
             alt="Elderbrew"
-            loader={imageLoader}
           />
         </Stack>
         <Stack spacing={4}>

src/app/layout.tsx

@@ -9,17 +9,13 @@ import Nav from "@/components/Nav";
 import { Container, Box, Stack, Typography } from "@mui/material";
 import Divider from '@mui/material/Divider';
 import { styled } from '@mui/material/styles';
-import Image, { ImageLoader, ImageLoaderProps } from 'next/image'
+import Image from 'next/image'
 import Link from "next/link";
 import FacebookIcon from '@mui/icons-material/Facebook';
 import InstagramIcon from '@mui/icons-material/Instagram';
 
 const robotoCondensed = Roboto_Condensed({ subsets: ["latin"] });
 
-const imageLoader = ({ src, width, quality }: ImageLoaderProps) => {
-  return `https://www.elderbrew.com/${src}?w=${width}&q=${quality || 75}`
-}
-
 const Footer = styled(Box)(() => ({
   backgroundColor: '#000',
   // boxShadow: '0 .2rem 25px rgba(255, 0, 0, 1)',
@@ -48,7 +44,6 @@ export default function RootLayout({
                       width="200"
                       height="127"
                       alt="Elderbrew"
-                      loader={imageLoader}
                     />
                   </Link>
                   <Nav />
@@ -125,7 +120,6 @@ export default function RootLayout({
                       width="500"
                       height="250"
                       alt="Elderbrew"
-                      loader={imageLoader}
                     />
                   </Box>
                   <Stack justifyContent="flex-end" alignItems={{ xs: 'center', sm: 'flex-end' }} spacing={2}>

src/app/page.tsx

@@ -2,17 +2,13 @@
 import BigHeader from '@/components/BigHeader';
 import { Box } from '@mui/material';
 import Stack from '@mui/material/Stack';
-import Image, { ImageLoaderProps } from 'next/image';
+import Image from 'next/image';
 import { styled } from 'styled-components';
 
 const StyledBigHeader = styled(BigHeader)`
   letter-spacing: -.2rem;
 `;
 
-const imageLoader = ({ src, width, quality }: ImageLoaderProps) => {
-  return `https://www.elderbrew.com/${src}?w=${width}&q=${quality || 75}`
-}
-
 export default function About() {
   return (
     <>
@@ -28,52 +24,48 @@ export default function About() {
         '& img': {
           width: { xs: '100%' },
           height: { xs: 'auto' },
-          maxHeight: { xs: 'auto', md: '530px' },
+          maxHeight: { xs: 'initial', md: '530px' },
         }
       }}>
         <Image
           src="outside.jpg"
           alt="Elderbrew"
           sizes="100vw"
-          width="600"
-          height="900"
+          width="200"
+          height="300"
           style={{ width: '100%', height: 'auto' }}
-          loader={imageLoader}
         />
         <Image
           src="gray-worry.jpg"
           alt="Elderbrew"
           sizes="100vw"
-          width="900"
-          height="600"
+          width="300"
+          height="200"
           style={{ width: '100%', height: 'auto' }}
-          loader={imageLoader}
         />
       </Stack>
       <Stack direction={{ xs: 'column', md: 'row' }} justifyContent='center' sx={{
         '& img': {
           width: { xs: '100%' },
           height: { xs: 'auto' },
-          maxHeight: { xs: 'auto', md: '530px' },
+          maxHeight: { xs: 'initial', md: '530px' },
         }
       }}>
         <Image
           src="merch.jpg"
           alt="Elderbrew"
           sizes="100vw"
-          width="900"
-          height="600"
+          width="300"
+          height="200"
           style={{ width: '100%', height: 'auto' }}
-          loader={imageLoader}
         />
         <Image
           src="game.jpg"
           alt="Elderbrew"
           sizes="100vw"
-          width="600"
-          height="900"
+          width="200"
+          height="300"
           style={{ width: '100%', height: 'auto' }}
-          loader={imageLoader}
         />
       </Stack>
     </>

src/imageLoader.ts

@@ -0,0 +1,9 @@
+'use client'
+
+import { ImageLoaderProps } from "next/image"
+
+export default function imageLoader({ src, width, quality }: ImageLoaderProps) {
+  return process.env.NODE_ENV === 'production'
+    ? `https://www.elderbrew.com/${src}?w=${width}&q=${quality || 75}`
+    : `/_next/image?url=${src}&w=${width}&q=${quality || 75}`;
+}