Next: Image Optimisation

Author: prathamesh-mutkure

Projects/event-mgmt-nextjs/components/event-detail/event-logistics.js

@@ -1,22 +1,33 @@
-import AddressIcon from '../icons/address-icon';
-import DateIcon from '../icons/date-icon';
-import LogisticsItem from './logistics-item';
-import classes from './event-logistics.module.css';
+import AddressIcon from "../icons/address-icon";
+import DateIcon from "../icons/date-icon";
+import LogisticsItem from "./logistics-item";
+import classes from "./event-logistics.module.css";
+import Image from "next/image";
+
+// IMAGE OPTIMISATION:
+// Next.js has built-in Image optimisation
+// It automatically generates suitable image on request
+// And caches the image on server for future use
+// Next.js re-fetches the image on window resize
+// It needs height and width property
+// It'll fetch the image based on the height and width passed to it
+// But the image will be displayed based on the CSS
 
 function EventLogistics(props) {
   const { date, address, image, imageAlt } = props;
 
-  const humanReadableDate = new Date(date).toLocaleDateString('en-US', {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
+  const humanReadableDate = new Date(date).toLocaleDateString("en-US", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
   });
-  const addressText = address.replace(', ', '\n');
+  const addressText = address.replace(", ", "\n");
 
   return (
     <section className={classes.logistics}>
       <div className={classes.image}>
-        <img src={`/${image}`} alt={imageAlt} />
+        <Image src={`/${image}`} alt={imageAlt} width={400} height={400} />
+        {/* <img src={`/${image}`} alt={imageAlt} /> */}
       </div>
       <ul className={classes.list}>
         <LogisticsItem icon={DateIcon}>

Projects/event-mgmt-nextjs/components/event/event-item.js

@@ -3,6 +3,7 @@ import DateIcon from "../icons/date-icon";
 import AddressIcon from "../icons/address-icon";
 import ArrowIcon from "../icons/arrow-right-icon";
 import classes from "./event-item.module.css";
+import Image from "next/image";
 
 const EventItem = ({ item }) => {
   const { id, title, description, location, date, image, isFeatured } = item;
@@ -18,7 +19,7 @@ const EventItem = ({ item }) => {
 
   return (
     <li className={classes.item}>
-      <img src={"/" + image} alt={title} />
+      <Image src={"/" + image} alt={title} width={200} height={200} />
 
       <div className={classes.content}>
         <div className={classes.summary}>