#Landing image

16 messages · Page 1 of 1 (latest)

thorn nicheBOT
#

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

#

I can help evaluate your <Picture> component configuration for a full-width landing image.

Your approach looks good overall, but there's a small typo in your sizes attribute that should be fixed:

sizes={`(max-width: 320px) 320px, (max-width: 1023px) 12023px, (max-width: 1920px) 1920px, ${backgroundImage.width}px`}

You have 12023px instead of what I assume should be 1023px. This could cause unexpected behavior in how browsers select the appropriate image size.

For a full-width landing image, your widths array [320, 1023, 1920, backgroundImage.width] covers common viewport sizes well. Including the original image width as the largest option is a good practice to avoid upscaling.

Your configuration includes:

  • Multiple formats (avif, webp, jpg) for optimal browser compatibility and performance
  • loading="eager" which is appropriate for above-the-fold content like a landing image
  • quality={"mid"} which balances file size and visual quality

For full-width landing images, this approach aligns with best practices described in the Astro documentation for responsive images.

If you're using Astro v5+, you might also consider enabling the experimental responsive images feature and using the layout="full-width" property, which would automatically generate appropriate srcset and sizes attributes.

Overall, with the typo fixed, your configuration is well-suited for a full-width landing image.

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

#

@slate drum Kapa.ai is still learning and improving, please let me know how I did by reacting below.

slate drum
#

@thorn niche

How about this:
<Picture
src={image.src}
width={image.attributes.width}
height={image.attributes.height}
formats={['avif', 'webp']}
widths={[320, 480, 768, 1024, 1366, 1440, 1920]}
sizes="100vw"
alt="A description of my image."
aria-hidden="true"
decoding="async"
alt="kitchen cabinets"
loading="eager"
/>

thorn nicheBOT
#

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

#

Your updated <Picture> component configuration looks good for a responsive image that will display at full viewport width. Let me analyze the specific aspects:

Strengths of your configuration:

  • Multiple formats: Using ['avif', 'webp'] is excellent as these are modern, efficient formats with good browser support. AVIF offers better compression than WebP, so listing it first is the right approach.

  • Comprehensive widths array: Your widths={[320, 480, 768, 1024, 1366, 1440, 1920]} covers a wide range of device sizes from mobile to large desktop displays, which is ideal for responsive images.

  • Sizes attribute: Using sizes="100vw" correctly tells browsers that the image will display at full viewport width, helping them select the appropriate image from your srcset.

  • Loading strategy: Using loading="eager" is appropriate for an important above-the-fold image like a hero or landing image.

Issues to address:

  1. You have two alt attributes in your component, which will cause an error. You should remove one of them:
<Picture 
    src={image.src}
    width={image.attributes.width}
    height={image.attributes.height}
    formats={['avif', 'webp']} 
    widths={[320, 480, 768, 1024, 1366, 1440, 1920]}
    sizes="100vw"
    alt="kitchen cabinets"
    aria-hidden="true" 
    decoding="async"
    loading="eager"
/>
  1. There's a potential conflict between alt="kitchen cabinets" and aria-hidden="true". If the image is decorative (aria-hidden), it should have an empty alt text (alt=""). If it's meaningful, it should have descriptive alt text and not be hidden from screen readers.
#

This configuration will generate a responsive <picture> element with multiple <source> elements for different formats and a responsive srcset attribute, as described in the Astro documentation for the Picture component.

Overall, with these small adjustments, your configuration is well-optimized for a full-width responsive image.

Let me know if you need any clarification or have other questions about optimizing images in Astro!

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

#

@slate drum Kapa.ai is still learning and improving, please let me know how I did by reacting below.

slate drum
#

@thorn niche
are these necessary?
width={image.attributes.width}
height={image.attributes.height}

thorn nicheBOT
#

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

#

Based on the knowledge sources, I can clarify whether the width and height attributes are necessary in your <Picture /> component.

For local images (images imported from your src/ directory), the width and height attributes are optional. Astro can automatically infer these dimensions from the image file itself. As stated in the documentation:

When using images in their original aspect ratio, width and height are optional. These dimensions can be automatically inferred from image files located in src/.
Assets API Reference

However, there are cases where these attributes are required:

  1. For images in the public/ folder, both width and height are required as Astro cannot analyze these files.
  2. For remote images (from external URLs), both dimensions are required to avoid cumulative layout shift (CLS), unless you use the inferSize attribute.

If image.src in your code is a local image that you've imported (not from public/ and not a remote URL), then you can omit these attributes and Astro will automatically determine the appropriate dimensions.

If you're using responsive images with a specific layout type, keeping these attributes might be beneficial as they help establish the aspect ratio, even for local images.

So to directly answer your question: for local imported images, these attributes are not strictly necessary, but they may still be useful depending on your specific use case.

Would you like me to provide more information about any specific aspect of image handling in Astro?

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

#

@slate drum Kapa.ai is still learning and improving, please let me know how I did by reacting below.

slate drum
#

@thorn niche
how about sizes="100vw"
Is it as effective as using fixed pixels values?

thorn nicheBOT
#

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

#

The sizes="100vw" attribute tells browsers that the image will display at 100% of the viewport width. Let me explain how this compares to using fixed pixel values:

Using sizes="100vw" vs. Fixed Pixel Values

When you use sizes="100vw", you're telling the browser that the image will occupy the full viewport width at all screen sizes. This works well for:

  • Full-width hero images
  • Banner images that span the entire width
  • Images in single-column layouts

According to the Astro documentation, the sizes attribute is used to help browsers select the appropriate image from your srcset based on the expected display size:

sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${myImage.width}px`}

Assets API Reference

Effectiveness Comparison

Using sizes="100vw":

  • Simpler: One value covers all viewport sizes
  • Works well for truly full-width images
  • Less optimal for images that don't actually occupy the full viewport width in your layout

Using specific media queries with pixel values:

  • More precise: Browsers can select the most appropriate image size
  • More efficient: Can prevent downloading unnecessarily large images
  • Better performance: Especially for images that aren't actually full-width on larger screens

When to Use More Specific Values

The Astro documentation notes that for responsive images:

#

The generated sizes attribute for responsive and full-width images is based on the assumption that the image is displayed at close to the full width of the screen when the viewport is smaller than the image's width. If it is significantly different (e.g. if it's in a multi-column layout on small screens) you may need to adjust the sizes attribute manually for best results.
Experimental Responsive Images

Recommendation

If your image truly displays at 100% viewport width across all screen sizes, then sizes="100vw" is appropriate and effective.

However, if your image appears in a layout where it doesn't occupy the full viewport width (especially on larger screens), you'll get better performance by using more specific media queries in your sizes attribute that accurately reflect the image's display size at different breakpoints.

For example:

sizes="(max-width: 768px) 100vw, 50vw"

This tells browsers that on screens smaller than 768px, the image is full-width, but on larger screens, it only takes up half the viewport width.

Would you like me to help you craft a more specific sizes attribute based on your actual layout?

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