Image optimization

app/components/Place.tsx

@@ -3,13 +3,11 @@ import {
   CheckCircleIcon,
   CloseIcon,
   LinkIcon,
-  WarningIcon,
 } from "@chakra-ui/icons";
 import {
   Box,
   Heading,
   HStack,
-  Image,
   Link,
   List,
   ListItem,
@@ -26,6 +24,7 @@ import {
   WrapItem,
 } from "@chakra-ui/react";
 import { useState } from "react";
+import Image, { MimeType } from "remix-image";
 import type { Place as PlaceType } from "~/lib/fetchPlaces";
 import PhotoSlider from "./PhotoSlider";
 
@@ -152,11 +151,26 @@ export default function Place({ data: place, toggleFilter }: Props) {
                 .slice(0, isDesktop ? 2 : 2)
                 .map((photo, photoIndex) => (
                   <Image
-                    src={`images/${photo}`}
                     key={photo}
-                    boxSize={["100%", "200px"]}
-                    objectFit="cover"
-                    border="solid 2px lightgray"
+                    src={`images/${photo}`}
+                    responsive={[
+                      {
+                        size: {
+                          width: 170,
+                          height: 170,
+                        },
+                        maxWidth: 170,
+                      },
+                    ]}
+                    options={{
+                      fit: "cover",
+                      contentType: MimeType.WEBP,
+                      quality: 80,
+                    }}
+                    style={{
+                      objectFit: "cover",
+                      border: "solid 2px lightgray",
+                    }}
                     onClick={() => setSelectedPhoto(photoIndex)}
                   />
                 ))}

app/root.tsx

@@ -10,6 +10,7 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 import { MetaFunction, LinksFunction } from "@remix-run/node"; // Depends on the runtime you choose
+import remixImageStyles from "remix-image/remix-image.css";
 
 import { ServerStyleContext, ClientStyleContext } from "./context";
 
@@ -21,6 +22,7 @@ export const meta: MetaFunction = () => ({
 
 export let links: LinksFunction = () => {
   return [
+    { rel: "stylesheet", href: remixImageStyles },
     { rel: "preconnect", href: "https://fonts.googleapis.com" },
     { rel: "preconnect", href: "https://fonts.gstatic.com" },
     {

app/routes/api/image.ts

@@ -0,0 +1,17 @@
+import type { LoaderFunction } from "@remix-run/server-runtime";
+import { imageLoader, LoaderConfig, MemoryCache } from "remix-image/server";
+import { sharpTransformer } from "remix-image-sharp";
+
+const config: LoaderConfig = {
+  selfUrl:
+    process.env.NODE_ENV === "development"
+      ? "http://localhost:3001"
+      : "https://joli-mapstr.vercel.app/",
+  transformer: sharpTransformer,
+  cache: new MemoryCache(),
+  redirectOnFail: true,
+};
+
+export const loader: LoaderFunction = ({ request }) => {
+  return imageLoader(config, request);
+};

package.json

@@ -11,6 +11,7 @@
     "@emotion/react": "^11",
     "@emotion/server": "^11",
     "@emotion/styled": "^11",
+    "@next-boost/hybrid-disk-cache": "^0.3.0",
     "@remix-run/dev": "^1.11.1",
     "@remix-run/eslint-config": "^1.11.1",
     "@remix-run/node": "^1.11.1",
@@ -23,6 +24,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
+    "remix-image": "^1.4.0",
+    "remix-image-sharp": "^0.1.4",
+    "sharp": "^0.31.3",
     "swiper": "^8.3.2"
   },
   "devDependencies": {