Unraveling Image Optimization: Pure HTML vs Image Component Approaches

Optimizing images is crucial to ensuring fast-loading, user-friendly websites. In this blog post, we'll explore three approaches to image optimization:

• The traditional method using pure HTML
• The cutting-edge approach with Next.js 13 Image Component
• Sitecore's version of the Image Component approach

Pure HTML Image Optimization

When working with pure HTML, basic image optimization involves specifying the image dimensions and using the srcset and sizes attributes. Let's go a little bit deeper into these attributes.

<img src="image.jpg" alt="Description" width="800" height="400" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px">

• srcset Attribute: The srcset attribute provides a list of image sources with corresponding widths. Each source is followed by a descriptor (e.g., 400w for 400 pixels wide). This helps browsers choose the most appropriate image size based on the user's device capabilities.
• sizes Attribute: The sizes attribute defines the expected display size of the image in the layout. It consists of a media condition (e.g., (max-width: 600px)) followed by a width declaration. Browsers use this information to determine which image source from srcset to load.

Next.js 13 Image Component

With the release of Next.js 13, the new Image Component brings enhanced performance and ease of use for image optimization. It automatically optimizes images during build time, providing responsive images without compromising on quality.

import Image from 'next/image'; const MyImage = () => { return ( <Image src="/image.jpg" alt="Description" width={800} height={400} /> ); };

Next.js 13 Image Component simplifies the process, requiring minimal configuration. It seamlessly generates optimized images in various sizes and formats, ensuring optimal performance without manual intervention.

This is an example of what the image component is going to generate:

<img alt="a woman standing in front of a black wall" srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fzeit-inc%2Fimage%2Fupload%2Fc_scale%2Cw_1280%2Fnextconf-photos%2FSexton_Vercel_3022.jpg&w=1920&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fzeit-inc%2Fimage%2Fupload%2Fc_scale%2Cw_1280%2Fnextconf-photos%2FSexton_Vercel_3022.jpg&w=3840&q=75 2x" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fzeit-inc%2Fimage%2Fupload%2Fc_scale%2Cw_1280%2Fnextconf-photos%2FSexton_Vercel_3022.jpg&w=3840&q=75" width="1280" height="853" decoding="async" data-nimg="1" style="color: transparent;">

Sitecore Image Component

Sitecore has its own version of the image component that is similar to Next.js but can also interact with the Pages editor.

<image
	field={props.fields?.image}
	className="bg-image relative w-[100%] min-h-[152px] right-0 left-auto z-[0] md:absolute "
	alt=""
	role="presentation"
	width="1440"
	height="454"
/>

This makes it fantastic for content editors, but for developers, the Next.js image component generally performs better than Sitecore's.

To get the best of both worlds we can check for layoutData.sitecore.context.pageEditing to render the Sitecore image component for the Pages editor and the Next.js Image component for the web page render.

{isEditing ? (
	<image
		field={props.fields?.image}
		className="bg-image relative w-[100%] min-h-[152px] right-0 left-auto z-[0] md:absolute"
		alt=""
		role="presentation"
		width="1440"
		height="454"
	/>
      ) : (
	<NextImage
		src={props.fields.image.value?.src || grayImage}
		className="bg-image z-0 object-cover !relative md:!absolute w-full h-full"
		sizes="100vw"
		alt="alt"
		fill
		priority
	/>
)}

Benefits of Next.js 13 Image Component

• Automatic Optimization: Next.js 13 Image Component automatically optimizes images, reducing the need for manual image processing.
• Lazy Loading: Images are lazy-loaded by default, enhancing page loading speed and performance.
• Responsive Design: The component automatically generates multiple sizes to fit different screen resolutions and sizes.

Considerations and Best Practices

• File Formats: Choose the right file format (JPEG, PNG, WebP) based on the content and use case.
• Compression: Compress images without compromising quality to reduce file sizes.
• Caching: Implement proper caching strategies to optimize subsequent page loads.

Wrapping Up

Image optimization is a critical aspect of web development, impacting both user experience and website performance. While traditional HTML methods provide manual control, the Next.js 13 Image Component (and Sitecore’s Image Component) simplifies the process, offering automatic optimization and improved performance.

Whether you opt for the familiarity of pure HTML or embrace the convenience of Next.js 13 Image Component, understanding the intricacies of srcset and sizes attributes in HTML empowers you to make informed decisions for creating a seamless user experience on your website.