Trouble using vercel images | Astro Lounge | Page 1

meager pier Mar 31, 2024, 8:52 AM

#

Here is my config

  adapter: vercel({
    imagesConfig: {
      sizes: [640, 750, 828, 1080, 1200],
      imageService: true,
      formats: ["image/avif", "image/webp"],
      domains: ['a.storyblok.com'],
    }
  })

However it displays only one size of images

velvet sequoiaBOT Mar 31, 2024, 8:52 AM

#

Hi @meager pier. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The issue you're experiencing might be due to the incorrect placement of the imageService property. According to the Astro documentation, imageService should be directly under the vercel function call, not nested within imagesConfig.

Here's how your configuration should look:

adapter: vercel({
  imageService: true,
  imagesConfig: {
    sizes: [640, 750, 828, 1080, 1200],
    formats: ["image/avif", "image/webp"],
    domains: ['a.storyblok.com'],
  }
})

This configuration enables the Vercel Image Optimization API, which will automatically be configured and used in production. In development, the image service specified by devImageService will be used instead.

If you're still having issues, it might be worth checking if the images are being loaded from the specified domain in your imagesConfig. If the images are not being loaded, it could be due to a misconfiguration or an issue with the Vercel adapter.

For more information, you can refer to the Astro documentation on Vercel configuration (https://docs.astro.build/en/guides/integrations-guide/vercel#configuration) and Vercel's image configuration documentation (https://vercel.com/docs/build-output-api/v3/configuration#images).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@meager pier kapa.ai is still learning and improving, please let us know how it did by reacting below

meager pier Mar 31, 2024, 8:55 AM

#

I still have only one size displayed here is the html

#

@velvet sequoia i still have only one size displayed

velvet sequoiaBOT Mar 31, 2024, 8:56 AM

#

Let me check the knowledge base for you. One moment! :books:

#

The image tag you've provided seems to be correctly formatted for Vercel's Image Optimization API. The w=1200 query parameter is specifying the width of the image. However, if you're only seeing one size of the image, it could be due to a few reasons:

The image is not being properly resized by the Vercel Image Optimization API. This could be due to a misconfiguration or an issue with the API itself.
The sizes attribute is not being used in your image tag. The sizes attribute in the image tag helps the browser to decide which image source to use based on the viewport size.

Here's an example of how to use the sizes attribute:

<img 
  srcset="/_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=640&amp;q=100 640w,
         /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=750&amp;q=100 750w,
         /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=828&amp;q=100 828w,
         /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1080&amp;q=100 1080w,
         /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1200&amp;q=100 1200w"
  sizes="(max-width: 640px) 640px,
         (max-width: 750px) 750px,
         (max-width: 828px) 828px,
         (max-width: 1080px) 1080px,
         1200px"
  alt="Time de l'historique de Strapi" 
  width="1434" 
  height="456" 
  loading="lazy" 
  decoding="async"
>

In this example, the srcset attribute is used to specify different image sources for different viewport sizes, and the sizes attribute is used to specify which image source to use for which viewport size.

#

If you're still having issues, it might be worth checking the Vercel Image Optimization documentation (https://vercel.com/docs/concepts/next.js/image-optimization) for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@meager pier kapa.ai is still learning and improving, please let us know how it did by reacting below

meager pier Mar 31, 2024, 8:57 AM

#

@velvet sequoia then show me the best configuration to use vercel image at his full potential

velvet sequoiaBOT Mar 31, 2024, 8:57 AM

#

Let me check the knowledge base for you. One moment! :books:

#

To fully utilize Vercel's image optimization capabilities with Astro, you should enable the image service in your Astro configuration file and specify the desired image sizes and formats in the imagesConfig property. Here's an example of how to do this:

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  output: 'static',
  adapter: vercel({
    imageService: true,
    imagesConfig: {
      sizes: [640, 750, 828, 1080, 1200],
      formats: ["image/avif", "image/webp"],
      domains: ['a.storyblok.com'],
    }
  }),
});

In this configuration:

imageService: true enables Vercel's built-in image optimization service.
sizes specifies the widths of the images that you want to generate.
formats specifies the image formats that you want to use.
domains specifies the domains that you want to allow images to be loaded from.

Remember to replace 'a.storyblok.com' with the actual domain where your images are hosted.

In your HTML, you can then use the <Image /> component from Astro to display your images. Astro will automatically optimize your images based on the configuration you've provided.

<Image src={myImage} alt="My super logo!" />

In this example, myImage is a reference to the image you want to display. Astro will automatically add the necessary srcset and sizes attributes to your image tag to ensure that the correct image size is used for each viewport size.

#

For more information, you can refer to the Astro documentation on Vercel configuration (https://docs.astro.build/en/guides/integrations-guide/vercel#configuration) and Vercel's image configuration documentation (https://vercel.com/docs/build-output-api/v3/configuration#images).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@meager pier kapa.ai is still learning and improving, please let us know how it did by reacting below

meager pier Mar 31, 2024, 8:59 AM

#

@velvet sequoia if i do so i get this error

Missing width parameter for remote image

velvet sequoiaBOT Mar 31, 2024, 8:59 AM

#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing, "Missing width parameter for remote image", is indicating that the width attribute is required when using remote images with Astro. This is to avoid cumulative layout shift (CLS), which can negatively impact the user experience.

When using remote images, you need to specify both the width and height attributes. If you don't know these values, you can set the inferSize property to true to fetch a remote image’s original dimensions. Here's an example:

<Image src={{myImage}} alt="My super logo!" width={500} height={300} />

In this example, 500 and 300 should be replaced with the actual width and height of your image.

If your image is inside your src folder, you probably meant to import it instead. Here's how you can do that:

---
import myImage from '../assets/my_image.png';
---
<Image src={{myImage}} alt="My super logo!" />

In this example, '../assets/my_image.png' should be replaced with the actual path to your image.

For more information, you can refer to the Astro documentation on handling images (https://docs.astro.build/en/guides/images/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@meager pier kapa.ai is still learning and improving, please let us know how it did by reacting below

meager pier Mar 31, 2024, 9:00 AM

#

<@&1095491216776380548> then show me the best configuration to use vercel image at his full potential with remote images so i get srcset

#

@velvet sequoia then show me the best configuration to use vercel image at his full potential with remote images so i get srcset

velvet sequoiaBOT Mar 31, 2024, 9:00 AM

#

Let me check the knowledge base for you. One moment! :books:

#

To fully utilize Vercel's image optimization capabilities with Astro for remote images, you should enable the image service in your Astro configuration file and specify the desired image sizes and formats in the imagesConfig property. Here's an example of how to do this:

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  output: 'static',
  adapter: vercel({
    imageService: true,
    imagesConfig: {
      sizes: [640, 750, 828, 1080, 1200],
      formats: ["image/avif", "image/webp"],
      domains: ['a.storyblok.com'],
    }
  }),
});

In this configuration:

imageService: true enables Vercel's built-in image optimization service.
sizes specifies the widths of the images that you want to generate.
formats specifies the image formats that you want to use.
domains specifies the domains that you want to allow images to be loaded from.

Remember to replace 'a.storyblok.com' with the actual domain where your images are hosted.

In your HTML, you can then use the <Image /> component from Astro to display your images. Astro will automatically optimize your images based on the configuration you've provided.

<Image src="<https://a.storyblok.com/f/251117/1434x456/3f890c0ebf/strapi-story.png"> alt="My super logo!" width={1434} height={456} />

In this example, replace the src URL with the actual URL of your image, and replace width and height with the actual dimensions of your image.

Astro will automatically add the necessary srcset and sizes attributes to your image tag to ensure that the correct image size is used for each viewport size.

#

For more information, you can refer to the Astro documentation on Vercel configuration (https://docs.astro.build/en/guides/integrations-guide/vercel#configuration) and Vercel's image configuration documentation (https://vercel.com/docs/build-output-api/v3/configuration#images).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@meager pier kapa.ai is still learning and improving, please let us know how it did by reacting below

meager pier Mar 31, 2024, 2:20 PM

#

@velvet sequoia i still don't get srcset ...

velvet sequoiaBOT Mar 31, 2024, 2:20 PM

#

Let me check the knowledge base for you. One moment! :books:

#

I understand that you're having trouble generating a srcset for your images. Unfortunately, Astro's <Image /> component does not automatically generate a srcset for remote images. This is because Astro cannot determine the dimensions of remote images during build time.

However, you can manually create a srcset using the Vercel Image Optimization API. Here's an example of how to do this:

<img 
  src="/_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1200&amp;q=100" 
  srcset="/_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=640&amp;q=100 640w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=750&amp;q=100 750w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=828&amp;q=100 828w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1080&amp;q=100 1080w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1200&amp;q=100 1200w"
  sizes="(max-width: 640px) 640px,
         (max-width: 750px) 750px,
         (max-width: 828px) 828px,
         (max-width: 1080px) 1080px,
         1200px"
  alt="My super logo!" 
  width="1434" 
  height="456" 
  loading="lazy" 
  decoding="async"
>

In this example, replace the src and srcset URLs with the actual URL of your image, and replace width and height with the actual dimensions of your image.

This will generate a srcset for your image, allowing the browser to choose the most appropriate image size based on the viewport size and screen resolution.

#

For more information, you can refer to the Astro documentation on handling images (https://docs.astro.build/en/guides/images/) and Vercel's image optimization documentation (https://vercel.com/docs/concepts/next.js/image-optimization).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@meager pier kapa.ai is still learning and improving, please let us know how it did by reacting below

meager pier Mar 31, 2024, 2:46 PM

#

@velvet sequoia explain me difference between densities and widths and what and when should i use once or other

velvet sequoiaBOT Mar 31, 2024, 2:46 PM

#

Let me check the knowledge base for you. One moment! :books:

#

The densities and widths properties in Astro are used to generate a srcset attribute for an image, which allows the browser to choose the most appropriate image size based on the viewport size and screen resolution. However, they are used in slightly different ways.

Densities

The densities property is a list of pixel densities to generate for the image. If provided, this value will be used to generate a srcset attribute on the <img> tag. Densities that are equal to widths larger than the original image will be ignored to avoid upscaling the image.

Here's an example of how to use densities:

---
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png";
---
<Image src={myImage} width={myImage.width / 2} densities={[1.5, 2]} alt="A description of my image." />

In this example, Astro will generate a srcset with images at 1.5x and 2x the original size of the image.

Widths

The widths property is a list of widths to generate for the image. If provided, this value will be used to generate a srcset attribute on the <img> tag. A sizes property must also be provided. Widths that are larger than the original image will be ignored to avoid upscaling the image.

Here's an example of how to use widths:

---
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // Image is 1600x900
---
<Image src={myImage} widths={[240, 540, 720, myImage.width]} sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${myImage.width}px`} alt="A description of my image."/>

In this example, Astro will generate a srcset with images at 240px, 540px, 720px, and the original width of the image.

When to use densities or widths

#

You should use densities when you want to generate images at different pixel densities, which is useful for supporting high-resolution displays.

You should use widths when you want to generate images at specific widths, which is useful for responsive design where the image size can change based on the viewport size.

However, you should not use both densities and widths at the same time. Only one of these two values can be used to generate a srcset.

For more information, you can refer to the Astro documentation on handling images (https://docs.astro.build/en/guides/images/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@meager pier kapa.ai is still learning and improving, please let us know how it did by reacting below

meager pier Mar 31, 2024, 3:21 PM

#

@velvet sequoia oh now generate the rules for those sizes 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840

velvet sequoiaBOT Mar 31, 2024, 3:21 PM

#

Let me check the knowledge base for you. One moment! :books:

#

Sure, here's how you can generate the srcset rules for those sizes using the widths property in Astro:

---
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // Image is 1600x900
---
<Image src={myImage} widths={[384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]} sizes={`(max-width: 384px) 384px, (max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, ${myImage.width}px`} alt="A description of my image."/>

In this example, Astro will generate a srcset with images at 384px, 640px, 750px, 828px, 1080px, 1200px, 1920px, 2048px, and 3840px widths. The sizes attribute tells the browser to use the appropriate image based on the max-width of the viewport.

Remember to replace myImage with the actual reference to your image, and adjust the sizes attribute as needed based on your specific layout requirements.

For more information, you can refer to the Astro documentation on handling images (https://docs.astro.build/en/guides/images/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@meager pier kapa.ai is still learning and improving, please let us know how it did by reacting below

meager pier Mar 31, 2024, 3:23 PM

#

@velvet sequoia show me configuration to have srcset with remote images with vercel

velvet sequoiaBOT Mar 31, 2024, 3:23 PM

#

Let me check the knowledge base for you. One moment! :books:

#

Astro's <Image /> component does not automatically generate a srcset for remote images. However, you can manually create a srcset using the Vercel Image Optimization API. Here's an example of how to do this:

<img 
  src="/_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1200&amp;q=100" 
  srcset="/_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=384&amp;q=100 384w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=640&amp;q=100 640w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=750&amp;q=100 750w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=828&amp;q=100 828w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1080&amp;q=100 1080w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1200&amp;q=100 1200w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1920&amp;q=100 1920w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=2048&amp;q=100 2048w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=3840&amp;q=100 3840w"
  sizes="(max-width: 384px) 384px,
         (max-width: 640px) 640px,
         (max
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@meager pier kapa.ai is still learning and improving, please let us know how it did by reacting below

meager pier Mar 31, 2024, 9:49 PM

#

@velvet sequoia I am expecting to load different size of image depending on the screen size with remote images and Vercel

velvet sequoiaBOT Mar 31, 2024, 9:49 PM

#

Let me check the knowledge base for you. One moment! :books:

#

Astro's <Image /> component does not automatically generate a srcset for remote images. However, you can manually create a srcset using the Vercel Image Optimization API. Here's an example of how to do this:

<img 
  src="/_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1200&amp;q=100" 
  srcset="/_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=384&amp;q=100 384w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=640&amp;q=100 640w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=750&amp;q=100 750w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=828&amp;q=100 828w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1080&amp;q=100 1080w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1200&amp;q=100 1200w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=1920&amp;q=100 1920w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=2048&amp;q=100 2048w,
          /_vercel/image?url=https%3A%2F%2Fa.storyblok.com%2Ff%2F251117%2F1434x456%2F3f890c0ebf%2Fstrapi-story.png&amp;w=3840&amp;q=100 3840w"
  sizes="(max-width: 384px) 384px,
         (max-width: 640px) 640px,
         (max
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#Trouble using vercel images

For more information, you can refer to the Astro documentation on Vercel configuration (https://docs.astro.build/en/guides/integrations-guide/vercel#configuration) and Vercel's image configuration documentation (https://vercel.com/docs/build-output-api/v3/configuration#images).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you're still having issues, it might be worth checking the Vercel Image Optimization documentation (https://vercel.com/docs/concepts/next.js/image-optimization) for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to the Astro documentation on Vercel configuration (https://docs.astro.build/en/guides/integrations-guide/vercel#configuration) and Vercel's image configuration documentation (https://vercel.com/docs/build-output-api/v3/configuration#images).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to the Astro documentation on handling images (https://docs.astro.build/en/guides/images/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to the Astro documentation on Vercel configuration (https://docs.astro.build/en/guides/integrations-guide/vercel#configuration) and Vercel's image configuration documentation (https://vercel.com/docs/build-output-api/v3/configuration#images).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to the Astro documentation on handling images (https://docs.astro.build/en/guides/images/) and Vercel's image optimization documentation (https://vercel.com/docs/concepts/next.js/image-optimization).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to the Astro documentation on handling images (https://docs.astro.build/en/guides/images/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to the Astro documentation on handling images (https://docs.astro.build/en/guides/images/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: