Avoid using the
<img> tag JS-W1015
Anti-pattern
Minor
8 months ago
—
8 months old
Do not use
<img> element. Use <Image /> from next/image instead. See: https://nextjs.org/docs/messages/no-img-element102 <div className="block lg:flex">
103 {userInfo.pfp && (
104 <div className="relative hover:cursor-pointer">
105 <img106 src={userInfo.pfp}107 className=" bg-gray-200 object-cover w-[80vw] z-0 md:w-auto md:h-[50vh] rounded-3xl"108 />109 <div
110 onClick={() => fileRef.current.click()}
111 className="opacity-0 hover:opacity-100 w-[80vw] h-full md:w-full rounded-3xl flex absolute top-0 z-10"
Description
It is recommended not to use an <img> tag; instead, use the built-in Image component. Image component is an extension of img element, and it offers the following advantages:
- Handles automatic lazy loading
- Preloading of critical images
- Correct sizing across devices and optimized the image for various viewpoints
- Automatic image optimization
- Automatically serves the image in modern formats like
WebP(30% smaller thanJPEG) - It also allows NextJS to automatically adopt future image formats and serve them to browsers supporting those formats.
- Image optimization works with any image source.
- NextJS optimizes the images on demand when requested by the users instead of optimizing them during the build time.
- Automatically serves the image in modern formats like
- Improved and optimized page performance
- Reduces the size of the image
Bad Practice
function Home() {
return (
<>
<img
src="https://example.com/test"
alt="Landscape picture"
width={500}
height={500}
/>
</>
)
}
export default Home
Recommended
import Image from 'next/image'
function Home() {
return (
<>
<Image
src="https://example.com/test"
alt="Landscape picture"
width={500}
height={500}
/>
</>
)
}
export default Home