I have a Astro project with around ~570 markdown files. Most of these files have images (1080px wide JPGs), and these images do I resize and convert JPGs to avif as a build time step to serve a optimized images to the user. I am optimizing around 1719 images and the build times exceed Vercel's 45 minute build time limit. Each Image gets resized to have three versions: 400px , 600 px and 900 px wide.
The code for the entire project is here: https://github.com/Mordi490/recipe-site
But the code for the resposnive images is based on Chris Perrington video:
---
// credit where credit is due: https://github.com/coding-in-public/astro-image-optimization-v3
import type { ImageOutputFormat } from "astro";
import { getImage } from "astro:assets";
type Props = {
src: ImageMetadata;
alt: string;
format?: ImageOutputFormat;
sizes: number[];
};
async function generateResponsiveImages({
src,
format,
sizes,
}: Omit<Props, "alt">) {
const imgSrcSet = sizes.map(async (size) => {
const image = await getImage({ src, width: size, format });
return `${image.src} ${size}w`;
});
const imgSrc = await getImage({ src, width: Math.max(...sizes), format });
return {
srcSet: await Promise.all(imgSrcSet),
imgSrc: imgSrc.src,
};
}
const { src, sizes, format, alt } = Astro.props;
const { srcSet, imgSrc } = await generateResponsiveImages({
src,
sizes,
format,
});
---
<img srcset={srcSet.join(", ")} alt={alt} src={imgSrc} />
in use it looks like this;
<ResponsiveImage
src={img}
sizes={[400, 700, 900]}
alt="bildet av oppskriften"
format="avif"
/>
Should I just reduce the amount of images I am optimizing, ie. go from [400, 700, 900] to [500, 900]. Or are there better ways to reduce the time it takes to optimize images or "hacks" around vercel caching