Image is a common last-step of every critical request chain. Reducing its size results in faster LCP. To dynamically reduce image size, the following steps are required:

1. Add the image optimization proxy service

To optimize images, it is suggested to use an image optimization proxy service. For best results, select a service, which is capable of:

1. Converting images to best supported format (i.e. AVIF, WEBP) based on user agent
2. Resizing images to specified dimensions, while preserving the aspect-ratio
3. Optimizing image size (by reducing amount of used colors or quality)

We suggest the following services (based on most common deployment setups):

Cloudflare Image Resizing · Cloudflare Image Optimization docs

Image Optimizer

2. Create a new base-image component

Create a new component to handle rendering of images inside of the application. For example, src/component/BaseImage/index.js, with following contents:

export function BaseImage(props) {
	return (
		<img {...props} />
	)
}

Replace all places in the application where <img> component was rendered with newly created image implementation.

By creating an abstraction over images, the control over image element attributes was obtained. We can programmatically modify them to ensure most optimal images are loaded.

How to make use of image srcset and sizes attributes?

// TODO: describe when best sizes defining option will be decided

How to make use of image loading attribute?

// TODO: describe when best visibility checking logic will be decided

How to make use of image fetchPriority attribute?

// TODO: maybe only allow manual use?