Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Follow the guidelines on this page to improve the user experience by serving different image sizes to different devices.
Responsive images and Core Web Vitals
When you serve responsive images, your page evaluates the display capabilities of the user's device and choosing one of a set of image candidates that are optimal for display based on those criteria. This saves data for your users, mainly by serving smaller images to devices with smaller screens.
The effects of faster image loading can also extend to your page's Largest Contentful Paint (LCP). For example, if your page's LCP element is an image, serving it responsively can reduce its resource load duration.
Lower resource load durations lower the load time for an LCP image, improving your page's LCP score. A lower LCP means users will see your site as loading faster, and especially as loading its most important content (the LCP element) faster. Serving responsive images can also reduce bandwidth contention for other resources on the page, which can improve how fast your page loads in general.
Resize images
Two of the most popular image resizing tools are the sharp npm package and the ImageMagick CLI tool.
The sharp package is a good choice for automating image resizing (for example, generating multiple sizes of thumbnails for all the videos on your website). It is fast and integrates well with build scripts and tools. ImageMagick is more convenient for one-time image resizing because it runs entirely from the command line.
sharp
To use sharp as a Node script, save this code as a separate script in your project, then run it to convert your images:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).