{"id":419614,"date":"2024-01-29T13:52:39","date_gmt":"2024-01-29T13:52:39","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=419614"},"modified":"2026-02-25T12:18:24","modified_gmt":"2026-02-25T12:18:24","slug":"nextjs-image-component","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/nextjs-image-component\/","title":{"rendered":"NextJs Image component"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"1600\" height=\"800\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/next-js-image-component.png\" alt=\"nextjs-image-component\" class=\"wp-image-420166\" style=\"width:820px;height:auto\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/next-js-image-component.png 1600w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/next-js-image-component-300x150.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/next-js-image-component-1200x600.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/next-js-image-component-250x125.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/next-js-image-component-768x384.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/next-js-image-component-1536x768.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Before we start let&#8217;s setup NextJs, To set up the Next js project we can follow this&nbsp;<a href=\"https:\/\/webkul.com\/blog\/project-setup-next-js\/\">setup nextjs project<\/a>&nbsp;blog that covers all about the next js project setup.<\/p>\n\n\n\n<p>NextJs introduced the Image component in the framework, providing a performant way to deliver images on the web.<\/p>\n\n\n\n<p>Images are a crucial part of modern <a href=\"https:\/\/webkul.com\/website-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">web application development<\/a>, impacting both the developer and user experiences.<\/p>\n\n\n\n<p>Traditionally, web designers used the HTML &lt;img&gt; tag to add images to web pages, but this approach can become untidy for large amounts of images.<\/p>\n\n\n\n<p>The Image component features built-in automatic image optimization, which helps to improve the performance of your application.<\/p>\n\n\n\n<p>By leveraging the Image component, you can optimize and develop performant applications, improving the developer and user experiences.<\/p>\n\n\n\n<p>In this section, we&#8217;ll learn how to use the Image component to optimize and develop performant applications.<\/p>\n\n\n\n<p>We&#8217;ll explore the benefits of using the Image component, including improved performance, better <a href=\"https:\/\/store.webkul.com\/magento2-seo-extension.html\" target=\"_blank\" rel=\"noreferrer noopener\">SEO ranking<\/a>, and better developer experience.<\/p>\n\n\n\n<p>We&#8217;ll also discuss how to use the Image component with NextJS, including how to import and use the component in your applications.<\/p>\n\n\n\n<p>Things we can cover in this blog:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Optimization<\/li>\n\n\n\n<li>Responsiveness by defining custom &#8216;srcSet&#8217;<\/li>\n\n\n\n<li>The NextJS Image Component<\/li>\n\n\n\n<li>Different properties in NextJs image component<\/li>\n\n\n\n<li>Other next\/image props<\/li>\n\n\n\n<li>Configuration Options<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">NextJs image optimization<\/h2>\n\n\n\n<p>Before using the Image component, it&#8217;s important to optimize your images for performance.<\/p>\n\n\n\n<p> If you have a large amount of dynamic images, consider using a CDN like Amazon Cloud front, google cdn or cloudinary to host your images.<\/p>\n\n\n\n<p>Before serving your images to end-users, consider choosing the appropriate image format, optimizing the size, compressing the quality using appropriate dimensions, using image compression tools.<\/p>\n\n\n\n<p>Here are some points you should consider before serving images to End-users:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Choose the right and optimized format<\/strong> in NextJs<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The three most popular image formats on the web are JPEG, PNG, Avif &amp; WebP.<\/li>\n\n\n\n<li>WebP and Avif is highly recommended due to it&#8217;s many advantages and performance benefits.<\/li>\n\n\n\n<li>WebP is a modern image format that provides superior lossy and lossless image compression for web images without compromising quality. on the other hand, Avif Provides better compression and faster loading times compared to WebP after first load.<\/li>\n\n\n\n<li>Using a tool like <a href=\"https:\/\/cloudconvert.com\/avif-converter\" rel=\"nofollow\">WebP-Converter\/Avif converter<\/a> can help you convert your images to WebP or Avif format, which is supported by most modern browsers.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>Get Image size according to device needs<\/strong><\/strong> in NextJs Image component<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Serving the right images for the right device sizes is crucial for optimizing image performance on the web.<\/li>\n\n\n\n<li>Serving a huge 1080 x 800 image for users with 100 x 100 device sizes can lead to unnecessary bandwidth usage, slowing down page loads and affecting performance metrics.<\/li>\n\n\n\n<li>The Responsive Breakpoints Generator tool by various CDN providers is a good tool for generating multiple image file sizes for different screen sizes.<\/li>\n\n\n\n<li>By generating multiple image file sizes, you can serve the right image for the right device size, reducing the amount of unnecessary bandwidth usage and improving performance.<\/li>\n\n\n\n<li>The Responsive Breakpoints Generator tool also provides options for serving images in different formats, including WebP and AVIF, which can further improve performance.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>For optimization follow these things<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A good rule of thumb for image optimization is to keep your images below 1 Mb.<\/li>\n\n\n\n<li>Large file sizes should be reduced to a reasonable threshold without sacrificing image quality.<\/li>\n\n\n\n<li>Using a tool like <a href=\"https:\/\/compressor.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Compressor.io<\/a> can help you compress your images without losing too much quality.<\/li>\n\n\n\n<li><a href=\"https:\/\/imageoptim.com\/mac\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ImageOptim<\/a> is a free tool that can compress your images in bulk and optimize their size for web use.<\/li>\n\n\n\n<li>By compressing your images, you can improve the performance of your website and reduce the load time of your images.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Image component<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The NextJs Image component is a built-in solution for optimizing images in NextJs applications.<\/li>\n\n\n\n<li>It provides a simple and intuitive API for optimizing images, including support for lazy loading, responsive images, and image optimization.<\/li>\n\n\n\n<li>The NextJs Image component supports a variety of image formats, including JPEG, PNG, WebP, and AVIF.<\/li>\n\n\n\n<li>It also supports automatic optimization of images, including resizing, compressing, and converting images to WebP format.<\/li>\n\n\n\n<li>The NextJs Image component also provides support for lazy loading, which can help improve the performance of your application by only loading images when they are needed.<\/li>\n<\/ul>\n\n\n\n<p>Further, You can use this like this:<\/p>\n\n\n\n<p>First of all import it as<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">import Image from &quot;next\/image&quot;;\n\/\/After importing you can use this component as:\n&lt;Image\n  priority\n  alt=&quot;alt-field&quot;\n  src=&quot;image-url&quot;\n  width={700}\n  height={575}\n  objectFit=&quot;fill&quot;\n  style={{ width: &quot;100%&quot;, height: &quot;auto&quot;, maxHeight: &quot;100%&quot; }}\n\/&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Properties\/Attributes of NextJs image tag<\/h2>\n\n\n\n<p>Here, some properties\/attributes provided by NextJs to make a better user experience using next image tag:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Some necessary or required props by NextJs image component:<\/h3>\n\n\n\n<p><strong>Src<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A path string. This can be either an absolute external URL, or an internal path depending on the need.<\/li>\n\n\n\n<li>When using an external URL, you must add it to&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/components\/image#remotepatterns\">remotePatterns<\/a>&nbsp;in&nbsp;<code>next.config.js<\/code>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Width and height<\/h3>\n\n\n\n<p>The&nbsp;<code>width<\/code> and height&nbsp;property represents the&nbsp;<em>rendered<\/em>&nbsp;width in pixels, and it will affects on the rendered size of the image or quality of the visible image.<\/p>\n\n\n\n<p>Required, you can ignore this if you are using <a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/components\/image#fill\" rel=\"nofollow\">fill prop<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alt attribute<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Image alt tags provide alternative text for images, which can improve accessibility for users who are visually impaired or using assistive technologies.<\/li>\n\n\n\n<li>Image alt tags should be descriptive and provide enough information for users to understand the content of the image.<\/li>\n\n\n\n<li>Image alt tags should be unique for each image and not contain any personal information or sensitive information.<\/li>\n\n\n\n<li>It is also the fallback text if images have been disabled or an error occurs while loading the image.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Some option props supported by NextJs image component:<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Priority<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The&nbsp;<code>priority<\/code>&nbsp;property can be used to prioritize images for lazy loading, which can improve the performance of your application by loading images on priority basis.<\/li>\n\n\n\n<li>Setting&nbsp;<code>priority<\/code>&nbsp;to&nbsp;<code>true<\/code>&nbsp;will cause the image to be considered high priority and pre-load its default value is false.<\/li>\n\n\n\n<li>Lazy loading is automatically disabled for images using priority.<\/li>\n\n\n\n<li>You should use the&nbsp;<code>priority<\/code>&nbsp;property on any image detected as the <a href=\"https:\/\/webkul.com\/blog\/improve-cls-and-lcp\/\">Largest Contentful Paint<\/a> (LCP) element.<\/li>\n\n\n\n<li>It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.<\/li>\n\n\n\n<li>The&nbsp;<code>priority<\/code>&nbsp;property should only be used when the image is visible above the fold.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Sizes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>The image&#8217;s size at different breakpoints and the performance of the downloaded image are provided by the sizes property. <\/li>\n\n\n<li>We can use it to serve various images based on different devices with varying screen sizes, pixel densities, resolutions, orientations, aspect ratios, file formats, and compression levels. The browser utilizes the value of sizes to decide which image size to download from next\/image&#8217;s automatically generated srcset.<\/li>\n\n\n<li>When the browser chooses, it does not yet know the size of the image on the page, so it selects an image that is the same size or larger than the viewport. <\/li>\n\n\n<li>The sizes property allows you to tell the browser that the image will actually be smaller than full screen. If no sizes value is present, a small srcset is generated, suitable for a fixed-size image. <\/li>\n\n\n<li>If sizes is defined, a large srcset is generated, suitable for a responsive image. If the sizes property includes sizes such as 50vw, which represent a percentage of the viewport width, then the srcset is trimmed to not include any values which are too small to ever be necessary.<\/li>\n\n\n<li>If no&nbsp;<code>sizes<\/code>&nbsp;value is present, a small&nbsp;<code>srcset<\/code>&nbsp;is generated, suitable for a fixed-size image (1x\/2x\/etc) suitable for a responsive image.&nbsp;<\/li>\n\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\"> &lt;Image fill src=&quot;image-url&quot; sizes=&quot;(max-width: 768px) 100vw, (max-width:1200px) 50vw, 33vw&quot; \/&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Quality<\/h3>\n\n\n\n<p>The quality of the optimized image, an integer between&nbsp;<code>1<\/code>&nbsp;and&nbsp;<code>100<\/code>, where&nbsp;<code>100<\/code>&nbsp;is the best quality and therefore largest file size. Defaults to&nbsp;<code>75<\/code>. Maximum quality mean large size image.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\"> &lt;Image fill src=&quot;image-url&quot; sizes=&quot;(max-width: 768px) 100vw,(max-width:1200px) 50vw, 33vw&quot; quality={75} \/&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fill<\/h3>\n\n\n\n<p>The&nbsp;<code>fill<\/code>&nbsp;property is a boolean that causes the image to fill the parent element, which is useful when the width and height are unknown. <\/p>\n\n\n\n<p>The parent element must assign position: &#8220;relative&#8221;, position: &#8220;fixed&#8221;, or position: &#8220;absolute&#8221; style.<\/p>\n\n\n\n<p>By default, the system will automatically assign the position: &#8220;absolute&#8221; style to the img element. If there are no styles applied to the image, it will stretch to fit the container.<\/p>\n\n\n\n<p>You might prefer to set the image with object-fit: &#8220;contain&#8221; to make it letter-boxed, fit the container, and preserve aspect ratio.<\/p>\n\n\n\n<p>Alternatively, you can make the image fill the entire container and cause it to be cropped to preserve aspect ratio with object-fit: &#8220;cover&#8221;. <\/p>\n\n\n\n<p>To make this look correct, you should assign the overflow: &#8220;hidden&#8221; style to the parent element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Loader<\/h3>\n\n\n\n<p>The&nbsp;<code>loader<\/code>&nbsp;property is a custom function used to resolve image URLs. <\/p>\n\n\n\n<p>In addition, it is a function returning a URL string for the image, given the&nbsp;<code>src<\/code>,&nbsp;<code>width<\/code>, and&nbsp;<code>quality<\/code>&nbsp;parameters.<\/p>\n\n\n\n<p> The&nbsp;<code>loader<\/code>&nbsp;function can be used to modify the URL of the image, add query parameters, or use a different URL altogether. <\/p>\n\n\n\n<p>The&nbsp;<code>loaderFile<\/code>&nbsp;configuration in&nbsp;<code>next.config.js<\/code>&nbsp;can be used to configure every instance of&nbsp;<code>next\/image<\/code>&nbsp;in your application, without passing a prop.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/Example:\nconst imageLoader = ({ src, width, quality }) =&gt; {\n  return `https:\/\/example.com\/${src}?w=${width}&amp;q=${quality || 75}`\n}\n\nexport default function Page() {\n  return (\n    &lt;Image\n      loader={imageLoader}\n      src=&quot;me.png&quot;\n      alt=&quot;Picture of the author&quot;\n      width={500}\n      height={500}\n    \/&gt;\n  )\n}\n\/\/ and if you are defining through next-config\n\n\/\/ next.config.js\n\nmodule.exports = {\n  images: {\n    loader: (src, { width, quality }) =&gt; {\n      return `https:\/\/example.com\/${src}?w=${width}&amp;q=${quality || 75}`\n    },\n  },\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Placeholder<\/h3>\n\n\n\n<p>The&nbsp;<code>placeholder<\/code>&nbsp;property is a placeholder to use while the image is loading. It can have three possible values:&nbsp;<code>blur<\/code>,&nbsp;<code>empty<\/code>, or&nbsp;<code>data:image\/...<\/code>. The default value is&nbsp;<code>empty<\/code>.<\/p>\n\n\n\n<p>When&nbsp;<code>blur<\/code>, the&nbsp;<code>blurDataURL<\/code>&nbsp;property will be used as the placeholder. <\/p>\n\n\n\n<p>If the&nbsp;<code>src<\/code>&nbsp;is an object from a static import and the imported image is&nbsp;<code>.jpg<\/code>,&nbsp;<code>.png<\/code>,&nbsp;<code>.webp<\/code>, or&nbsp;<code>.avif<\/code>, then&nbsp;<code>blurDataURL<\/code>&nbsp;will be automatically populated, except when the image is detected to be animated.<\/p>\n\n\n\n<p>For dynamic images, you must provide the&nbsp;<code>blurDataURL<\/code>&nbsp;property. Solutions such as Placeholder can help with base64 generation.<\/p>\n\n\n\n<p>When&nbsp;<code>data:image\/...<\/code>, the Data URL will be used as the placeholder while the image is loading.<\/p>\n\n\n\n<p>When&nbsp;<code>empty<\/code>, there will be no placeholder while the image is loading, only empty space.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Style\/className<\/h3>\n\n\n\n<p>The&nbsp;<code>style<\/code>&nbsp;property is used to apply inline styles to an element. It takes an object with CSS property-value pairs as its value.<\/p>\n\n\n\n<p>The&nbsp;<code>className<\/code>&nbsp;property is used to apply CSS classes to an element. It takes a string with the name of the CSS class as its value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">NextJs some advance props of next\/image components are:<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">onLoad<\/h3>\n\n\n\n<p>The&nbsp;<code>onLoad<\/code>&nbsp;property is a callback function that is invoked once the image is completely loaded and the placeholder has been removed. <\/p>\n\n\n\n<p>Furthermore, It is a function that takes in one argument, the&nbsp;<code>Event<\/code>&nbsp;which has a&nbsp;<code>target<\/code>&nbsp;that references the underlying&nbsp;<code>&amp;lt;Image<\/code>&amp;gt;&nbsp;element.<\/p>\n\n\n\n<p>Besides, the&nbsp;<code>onLoad<\/code>&nbsp;function can be used to perform actions on the loaded image, such as resizing or cropping it.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/example\n\nconst &#091;isImage, setImage] = useState(false);\n\nconst onLoadCallBack = (e)=&gt;{\n   setImage(true)\n   typeof onLoad === &quot;function&quot; &amp;&amp; onLoad(e)\n}\n\nreturn(\n  &lt;div&gt;\n   {!isImage &amp;&amp; &#039;loading image...&#039;}\n   &lt;Image \n     onLoad={onLoadCallBack} \n     src={&#039;\/&#039;+image} \n     alt={title} \n     width={260}  \n     height={160} \/&gt;\n  &lt;\/div&gt;\n)<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">onError<\/h3>\n\n\n\n<p>A callback function that is invoked if the image fails to load.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/example\n\nexport const Thumbnail = () =&gt; {\n  const &#091;src, setSrc] = useState&lt;any&gt;(placeholder_image);\n\n  \/**\n   * Settings SRC after receiving it from the server\n   *\/\n  useEffect(() =&gt; {\n    if (thumbnail) {\n      setSrc(thumbnail);\n    }\n  }, &#091;thumbnail]);\n\n  const onError = () =&gt; {\n    setSrc(PLACEHOLDER_IMG);\n  };\n\n  return (\n        &lt;Image\n          onClick={onClick}\n          src={src}\n          fill={fill}\n          loading={loading}\n          width={width}\n          height={height}\n          priority={priority}\n          placeholder={placeholder}\n          blurDataURL={PLACEHOLDER_IMG}\n          alt={alt}\n          onError={onError}\n        \/&gt;\n  );\n};\nexport default Thumbnail;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">loading<\/h3>\n\n\n\n<p>The loading behavior of the image. Defaults to&nbsp;<code>lazy<\/code>.<\/p>\n\n\n\n<p>When&nbsp;<code>lazy<\/code>, defer loading the image until it reaches a calculated distance from the viewport.<\/p>\n\n\n\n<p>When&nbsp;<code>eager<\/code>, load the image immediately.<\/p>\n\n\n\n<p><strong>Note<\/strong>: Remember that if you are loading images on priority always than set loading to eager always else, it will hurt the performance alot.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">blurDataURL<\/h3>\n\n\n\n<p>The&nbsp;<code>blurDataURL<\/code>&nbsp;property is a Data URL to be used as a placeholder image before the&nbsp;<code>src<\/code>&nbsp;image successfully loads. <\/p>\n\n\n\n<p>It only takes effect when combined with&nbsp;<code>placeholder=\"blur\"<\/code>.The&nbsp;<code>blurDataURL<\/code>&nbsp;must be a base64-encoded image. <\/p>\n\n\n\n<p>It will be enlarged and blurred, so a very small image (10px or less) is recommended. Including larger images as placeholders may harm your application performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">NextJs unoptimized<\/h3>\n\n\n\n<p>&#8220;unoptimized&#8221; is a prop that can be passed to the &#8220;Image&#8221; component in NextJs to serve the source image as-is instead of changing its quality, size, or format. The default value is &#8220;false&#8221;.<\/p>\n\n\n\n<p>To use this prop, you can create a custom component called &#8220;UnoptimizedImage&#8221; that wraps the &#8220;Image&#8221; component and passes the &#8220;unoptimized&#8221; prop to it. Here&#8217;s an example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">Image from &#039;next\/image&#039;\n\nconst UnoptimizedImage = (props) =&gt; {\n  return &lt;Image {...props} unoptimized \/&gt;\n}<\/pre>\n\n\n\n<p>Since NextJs 12.3.0, you can also assign this prop to all images by updating the &#8220;next.config.js&#8221; file with the following configuration:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">module.exports = {\n  images: {\n    unoptimized: true,\n  },\n}<\/pre>\n\n\n\n<p>This will ensure that all images are served as-is by default, without any quality, size, or format changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">DeviceSizes<\/h3>\n\n\n\n<p>deviceSizes is a property that allows you to specify a list of device width breakpoints for the next\/image component. <\/p>\n\n\n\n<p>These breakpoints are used to ensure that the correct image is served for the user&#8217;s device. If no configuration is provided, the default values are used.<\/p>\n\n\n\n<p>In the next.config.js file, you can specify the device sizes like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">module.exports = {\n  images: {\n    deviceSizes: &#091;640, 750, 828, 1080, 1200, 1920, 2048, 3840],\n  },\n}<\/pre>\n\n\n\n<p>imageSizes is a property that allows you to specify a list of image sizes for the next\/image component.<\/p>\n\n\n\n<p>These sizes are combined with the list of device sizes to create the complete list of sizes used for generating image srcsets.<\/p>\n\n\n\n<p>The reason there are two separate lists is that <code>imageSizes<\/code> is used only for images that provide a <code>sizes<\/code> prop.<\/p>\n\n\n\n<p>Which indicates that the image is less than the full width of the screen. <\/p>\n\n\n\n<p>Therefore, the sizes in imageSizes should all be smaller than the smallest size in deviceSizes. If no configuration is provided, the default values are used.<\/p>\n\n\n\n<p>In the next.config.js file, you can specify the image sizes like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">module.exports = {\n  images: {\n    imageSizes: &#091;16, 32, 48, 64, 96, 128, 256, 384],\n  },\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Formats supported by NextJs<\/h3>\n\n\n\n<p>This is a property that allows you to specify the image formats that are supported by the Image Optimization API. The default value is &#8220;image\/webp&#8221;.<\/p>\n\n\n\n<p>If the Accept header matches more than one of the configured formats, the first match in the array is used. Therefore, the order of the formats in the array matters. <\/p>\n\n\n\n<p>If there is no match or the source image is animated, the Image Optimization API falls back to the original image&#8217;s format. <\/p>\n\n\n\n<p>If you don&#8217;t provide any configuration, the system will use the default value.<\/p>\n\n\n\n<p>In the &#8220;next.config.js&#8221; file, you can specify the image formats like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">module.exports = {\n  images: {\n    formats: &#091;&#039;image\/webp&#039;],\n  },<\/pre>\n\n\n\n<p>You can also enable AVIF support by adding &#8220;image\/avif&#8221; to the list of formats. <\/p>\n\n\n\n<p>AVIF generally takes 20% longer to encode compared to WebP, but it compresses 20% smaller. <\/p>\n\n\n\n<p>This means that the first time you request an image, it will typically be slower, but subsequent cached requests will be faster.<\/p>\n\n\n\n<p>If you self-host with a proxy\/CDN in front of NextJs, you must configure the proxy to forward the Accept header.<\/p>\n\n\n\n<p>In the next.config.js file, you can enable AVIF support like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">module.exports = {\n  images: {\n    formats: &#091;&#039;image\/avif&#039;, &#039;image\/webp&#039;],\n  },\n}<\/pre>\n\n\n\n<p><strong>Note:<\/strong> if you self-host with a proxy\/CDN in front of NextJs, you must configure the proxy to forward the Accept header.<\/p>\n\n\n\n<p>This is because the Image Optimization API relies on the Accept header to determine which image format to serve to the user&#8217;s browser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating responsive images in NextJs<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\">By using picture and source tag by defining different image according to different viewport :<\/h3>\n\n\n\n<p>We use the &#8220;sizes&#8221; prop to specify the image sizes for different screen widths.<\/p>\n\n\n\n<p>For styling, we used the &#8220;style&#8221; prop to set the object-fit property to &#8220;cover&#8221; and the width and height to 100%. <\/p>\n\n\n\n<p>Here, We used the &#8220;maxHeight&#8221; property to limit the height of the image to 100% of the container.<\/p>\n\n\n\n<p>To provide different image according to device we used the &#8220;source&#8221; elements to provide different image sources for different screen sizes. <\/p>\n\n\n\n<p>For example, we will use the first &#8220;source&#8221; element if the screen width is less than or equal to 500px, which will provide a smaller image. <\/p>\n\n\n\n<p>We will use the second &#8220;source&#8221; element if the screen width is between 501px and 1000px, and this will provide a medium-sized image.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">  &lt;div\n    style={{\n      width: &quot;100%&quot;,\n      height: &quot;80vh&quot;,\n      position: &quot;relative&quot;,\n    }}\n  &gt;\n    &lt;picture&gt;\n      &lt;source media=&quot;(max-width: 500px)&quot; srcSet=&quot;https:\/\/images.unsplash.com\/photo-1682685797332-e678a04f8a64?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&quot; \/&gt;\n      &lt;source media=&quot;(max-width: 1000px)&quot; srcSet=&quot;https:\/\/images.unsplash.com\/photo-1682685797332-e678a04f8a64?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&quot; \/&gt;\n      &lt;Image\n        layout=&quot;responsive&quot;\n        alt=&quot;Mountains&quot;\n        src=&quot;https:\/\/images.unsplash.com\/photo-1682685797332-e678a04f8a64?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&quot;\n        width={700}\n        height={475}\n        sizes=&quot;(max-width: 400px) 100vw,(max-width: 768px) 75vw, (max-width: 1200px) 60vw,(max-width: 1500px) 50vw,(max-width: 2100px) 30vw, 33vw&quot;\n        style={{ objectFit: &quot;cover&quot;, width: &quot;100%&quot;, height: &quot;auto&quot;, maxHeight: &quot;100%&quot; }}\n      \/&gt;\n    &lt;\/picture&gt;\n  &lt;\/div&gt;<\/pre>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1052\" style=\"aspect-ratio: 1920 \/ 1052;\" width=\"1920\" autoplay controls loop muted src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screen_record_1706534534091.webm\" playsinline><\/video><\/figure>\n\n\n\n<p>Overall, this code demonstrates how to use the &#8220;next\/image&#8221; component to optimize images for different screen sizes and formats, making it a great choice for building responsive websites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">For Single Image:<\/h3>\n\n\n\n<p>Finally, If you want to make single image responsive for all view-ports you can use sizes attribute provided by NextJs default:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">    &lt;Image\n      src={me}\n      alt=&quot;Picture of the author&quot;\n\/\/        sizes=&quot;(max-width: 400px) 100vw,(max-width: 768px) 75vw, (max-width: 1200px) 60vw,(max-width: 1500px) 50vw,(max-width: 2100px) 30vw, 33vw&quot;\n\n      sizes=&quot;100vw&quot;\n      style={{\n        width: &#039;100%&#039;,\n        height: &#039;auto&#039;,\n      }}\n    \/&gt;\n  )\n}<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"1600\" height=\"800\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/responsive-layout.png\" alt=\"responsive-layout\" class=\"wp-image-420169\" style=\"width:818px;height:auto\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/responsive-layout.png 1600w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/responsive-layout-300x150.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/responsive-layout-1200x600.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/responsive-layout-250x125.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/responsive-layout-768x384.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/responsive-layout-1536x768.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, NextJs automatically generates custom srcsets according defined sizes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"800\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/custom-srcset.png\" alt=\"custom-srcset-next.js\" class=\"wp-image-420170\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/custom-srcset.png 1600w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/custom-srcset-300x150.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/custom-srcset-1200x600.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/custom-srcset-250x125.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/custom-srcset-768x384.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/custom-srcset-1536x768.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>But for extreme cases and for extra large screens source method is preferable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Here, we have covered automatic lazy-loading, pre-loading of critical images, automatic sizing across devices, and automatic support for modern image formats.<\/p>\n\n\n\n<p>Lastly, by using this powerful component, you can create visually appealing and responsive websites that load quickly and provide a seamless user experience. <\/p>\n\n\n\n<p>In addition, With its numerous customization options and features, you can optimize your images for different screen sizes and resolutions. <\/p>\n\n\n\n<p>And, it ensures that your application is fast and optimized for performance.<\/p>\n\n\n\n<p>This article has helped you start building amazing developer and user experiences by leveraging the power of next\/image.<\/p>\n\n\n\n<p>With its easy-to-use API and comprehensive documentation, furthermore, you can quickly and easily optimize your images and improve the performance of your NextJs application.<\/p>\n\n\n\n<p>Start your&nbsp;<a href=\"https:\/\/webkul.com\/headless-commerce-development-services\/\">Headless Development<\/a>&nbsp;with Webkul.<br>Happy Coding&nbsp;!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Before we start let&#8217;s setup NextJs, To set up the Next js project we can follow this&nbsp;setup nextjs project&nbsp;blog that covers all about the next js project setup. NextJs introduced the Image component in the framework, providing a performant way to deliver images on the web. Images are a crucial part of modern web <a href=\"https:\/\/webkul.com\/blog\/nextjs-image-component\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":496,"featured_media":420167,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13575,7511,7512,924,6],"tags":[9219,584,12572,5495,9644,6449],"class_list":["post-419614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-next-js","category-optimization-techniques","category-optimization-techniques-html5","category-responsive","category-seo","tag-headless","tag-image","tag-next-js","tag-optimisation","tag-optimising-images-for-seo","tag-responsiveness"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>NextJs Image component - Webkul Blog<\/title>\n<meta name=\"description\" content=\"NextJs image optimization. Learn how in this article how to optimize images for different screen sizes and formats.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/nextjs-image-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"NextJs Image component - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"NextJs image optimization. Learn how in this article how to optimize images for different screen sizes and formats.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/nextjs-image-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-29T13:52:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-25T12:18:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Arun Tiwari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Arun Tiwari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/\"},\"author\":{\"name\":\"Arun Tiwari\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/b3d968b3f55f433fda5b0d660dbea4aa\"},\"headline\":\"NextJs Image component\",\"datePublished\":\"2024-01-29T13:52:39+00:00\",\"dateModified\":\"2026-02-25T12:18:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/\"},\"wordCount\":2751,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png\",\"keywords\":[\"Headless\",\"image\",\"Next.js\",\"Optimisation\",\"optimising images for seo\",\"responsiveness\"],\"articleSection\":[\"next js\",\"Optimization Techniques\",\"Optimization Techniques\",\"responsive\",\"SEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/nextjs-image-component\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/\",\"url\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/\",\"name\":\"NextJs Image component - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png\",\"datePublished\":\"2024-01-29T13:52:39+00:00\",\"dateModified\":\"2026-02-25T12:18:24+00:00\",\"description\":\"NextJs image optimization. Learn how in this article how to optimize images for different screen sizes and formats.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/nextjs-image-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png\",\"width\":1600,\"height\":800,\"caption\":\"next-js-image-component\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/nextjs-image-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"NextJs Image component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/b3d968b3f55f433fda5b0d660dbea4aa\",\"name\":\"Arun Tiwari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/07faf0906e0520912140e99abd63bf5620be60c11bb1220fe25dacda8a9f4896?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/07faf0906e0520912140e99abd63bf5620be60c11bb1220fe25dacda8a9f4896?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Arun Tiwari\"},\"description\":\"Arun Tiwari, a skilled Software Engineer, specializes in making Magento Headless compatible extensions. With deep expertise in headless architecture, Arun crafts seamless, scalable solutions.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/aruntiwari-mg565\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"NextJs Image component - Webkul Blog","description":"NextJs image optimization. Learn how in this article how to optimize images for different screen sizes and formats.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/nextjs-image-component\/","og_locale":"en_US","og_type":"article","og_title":"NextJs Image component - Webkul Blog","og_description":"NextJs image optimization. Learn how in this article how to optimize images for different screen sizes and formats.","og_url":"https:\/\/webkul.com\/blog\/nextjs-image-component\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-01-29T13:52:39+00:00","article_modified_time":"2026-02-25T12:18:24+00:00","og_image":[{"width":1600,"height":800,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png","type":"image\/png"}],"author":"Arun Tiwari","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Arun Tiwari","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/"},"author":{"name":"Arun Tiwari","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/b3d968b3f55f433fda5b0d660dbea4aa"},"headline":"NextJs Image component","datePublished":"2024-01-29T13:52:39+00:00","dateModified":"2026-02-25T12:18:24+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/"},"wordCount":2751,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png","keywords":["Headless","image","Next.js","Optimisation","optimising images for seo","responsiveness"],"articleSection":["next js","Optimization Techniques","Optimization Techniques","responsive","SEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/nextjs-image-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/","url":"https:\/\/webkul.com\/blog\/nextjs-image-component\/","name":"NextJs Image component - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png","datePublished":"2024-01-29T13:52:39+00:00","dateModified":"2026-02-25T12:18:24+00:00","description":"NextJs image optimization. Learn how in this article how to optimize images for different screen sizes and formats.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/nextjs-image-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/next-js-image-component.png","width":1600,"height":800,"caption":"next-js-image-component"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/nextjs-image-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"NextJs Image component"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/b3d968b3f55f433fda5b0d660dbea4aa","name":"Arun Tiwari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/07faf0906e0520912140e99abd63bf5620be60c11bb1220fe25dacda8a9f4896?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/07faf0906e0520912140e99abd63bf5620be60c11bb1220fe25dacda8a9f4896?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Arun Tiwari"},"description":"Arun Tiwari, a skilled Software Engineer, specializes in making Magento Headless compatible extensions. With deep expertise in headless architecture, Arun crafts seamless, scalable solutions.","url":"https:\/\/webkul.com\/blog\/author\/aruntiwari-mg565\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/419614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/496"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=419614"}],"version-history":[{"count":34,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/419614\/revisions"}],"predecessor-version":[{"id":528275,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/419614\/revisions\/528275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/420167"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=419614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=419614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=419614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}