Image optimization

[mrbrimm (Mike)]

I am putting image optimization in my app but I also have it build a static html page that pulls from a database that have image paths to vercel storage.

When linking to

The image does not appear to be optimized. Will this functionality only work if it is used with next image and processed before display?

<img src="(https://uvzsz5uzhrmkyp8m.public.blob.vercel-storage.com/istockphoto-1324501822-612x612-13lCcFhq4n5YzTMZEZ1jXKBRX3UUbO.jpg?w=50&q=75"/>

// Read the template file
        const templatePath = path.join(__dirname, '..', 'public', 'sponsors-template.html');
        let htmlContent = fs.readFileSync(templatePath, 'utf8');

        // Generate the sponsors list HTML
        let sponsorsHtml = '';
        purchases.forEach(purchase => {
            sponsorsHtml += `
                <div class="sponsor">
                <a href="${purchase.pixelGroup.target_url}" target="_blank">
                    <img src="${purchase.pixelGroup.image_url}?w=50&q=75" alt="${purchase.pixelGroup.link_title}">
                    ${purchase.pixelGroup.link_title}
                    </a>
                </div>
            `;
        });

Thanks!

Current versus Expected behavior

Code, configuration, and steps that reproduce this issue

Project information

Deployment URL:
Environment (local, preview, production):
Project Framework:
Build Settings:
  Framework Preset:
  Build Command (if not default):
  Output Directory (if not default):
  Install Command (if not default):
Node/Runtime Version:
Package Manager:
Relevant Packages:

[amyegan]

Hey @mrbrimm. Some frameworks, including Next.js, Astro, and Nuxt, integrate with Vercel’s Image Optimization. The documentation has more details about how to use it:

Image Optimization with Vercel