A perfect way to load Images in React

shrey vijayvargiya
Apr 19 · 3 min read

Working with images in Next JS, caching and lazy loading- the proper way

Images explore platform UI design

Under the hood

Overview

The Next JS Image component is basically an extended version of the browser img element. Following are the beneficial features provided by Next JS Image components —

  • Automatic image optimization works with every image source from any CMS.
  • Optimizing images during on-demand instead of build time.
  • Images are lazy-loaded, loading only in the viewport images.
  • Images layout are adjusted to increase the google search ranking.

Point number 3 clearly answer your question, it doesn’t matter if you are loading 3 images or 3 million all the images are rendered on-demand and doesn’t count in bundle size.

Getting Started

import Image from 'next/image';

The repository I will be using is the one with Next JS and tailwind CSS already been installed and can be downloaded from the link below.

https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/NextJSArchitecture

Now you simply add the image to the public folder and use that path as the source of our Image component. The Image component folder takes the following props —

  • layout: Decides the layout and responsiveness of image across devices of the different viewport.
  • width & height: Dictates the height and width of the image component and it is required unless layout value is not “fill”
  • loader: A custom function that gives all the required information about the image component.
  • quality: The number ranges from 1 to 100 being 100 is the best and 75 is the default value
  • priority: Once set the image is preload over all other images.
  • unoptimized: Once set to true, the image will not be optimized, quality is not altered and no changes will be made.
  • loading: Enum value and can be “eager” or “lazy”.

Writing Code

// index.js inside pages
import Image from 'next/image';
// Considering mountain.png is inside public directory
<Image
alt="Mountains"
src="/mountain.png"
objectFit="fill"
layout="fill"
quality={100}
width={300}
height={300}
className="border border-gray-200 shadow-md rounded-md cursor
pointer p-2"
/>

Final Product

Final product screenshot

Conclusion

References

Repository => https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/ImagesInReactLinks => 
https://nextjs.org/docs/api-reference/next/image
https://nextjs.org/docs/basic-features/image-optimization

Until, next time. Have a good day, People.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

shrey vijayvargiya

Written by

Developer by profession, Designer by interests & Journalists by blood. I write about Tech, Design & Creative Affairs. Website — ihatereading.in

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store