diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx index 7307f840a..fb4c3bdbd 100644 --- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx +++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx @@ -95,6 +95,7 @@ export const DaoAuctionCard = (props: DaoAuctionCardProps) => { diff --git a/apps/web/src/pages/api/renderer/stack-images.ts b/apps/web/src/pages/api/renderer/stack-images.ts index cb27b21e9..00730f046 100644 --- a/apps/web/src/pages/api/renderer/stack-images.ts +++ b/apps/web/src/pages/api/renderer/stack-images.ts @@ -5,30 +5,33 @@ import sharp from 'sharp' import { CACHE_TIMES } from 'src/constants/cacheTimes' +const SVG_DEFAULT_SIZE = 1080 + const handler = async (req: NextApiRequest, res: NextApiResponse) => { - const images = req.query.images + let images = req.query.images if (!images || !images.length) return res.status(400).json({ error: 'No images provided' }) const { maxAge, swr } = CACHE_TIMES.DAO_FEED - // Handle single image - if (typeof images === 'string') { - const data = await getImageData(images) - const convertedImage = await sharp(data).webp({ quality: 100 }).toBuffer() + if (typeof images === 'string') images = [images] + + let imageData: Buffer[] = await Promise.all( + images.map((imageUrl) => getImageData(imageUrl)) + ) - res.setHeader( - 'Cache-Control', - `public, s-maxage=${maxAge}, stale-while-revalidate=${swr}` + const isSvg = images[0].includes('.svg') + + // Resize all SVGs to a default size + if (isSvg) { + imageData = await Promise.all( + imageData.map(async (x) => + sharp(x).resize(SVG_DEFAULT_SIZE, SVG_DEFAULT_SIZE, { fit: 'inside' }).toBuffer() + ) ) - res.setHeader('Content-Type', 'image/webp') - return res.send(convertedImage) } - // Handle multiple images - const imageData = await Promise.all(images.map((imageUrl) => getImageData(imageUrl))) - const compositeParams = imageData.slice(1).map((x) => ({ input: x, gravity: 'center', @@ -36,7 +39,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => { const compositeRes = await sharp(imageData[0]) .composite(compositeParams) - .webp({ quality: 100 }) + .webp({ quality: 75 }) .toBuffer() res.setHeader(