Netlify lazyloads all images in production

[octipus]

I am using eleventy-img shorcode to render all images where i pass image properties such as sizes, src, loading etc.
I have a few images above the fold which i want to load as "eager".

This works well locally and right images are created with the loading="eager" tag. (both running serve and build)

However, when i deploy the site in netlify, all images come with loading="eager" and i cannot figure out why.

I don't run any post-processing in netlify and for sanity i have disabled any addons in netlify.

I appreciate this is not a direct issue for eleventy-img plugin but any help would be appreciated, below is the code i use

const` imageShortcode = async (
  src,
  alt,
  loading,
  widths,
  className,
  formats = ['webp', 'jpeg'],
  sizes='33.3vw'
) => {

  // Ensure widths is an array
  if (!Array.isArray(widths)) {
    widths = JSON.parse(widths);
  }

  const imageMetadata = await Image(src, {
    widths: widths,
    formats: formats,
    outputDir: 'public/assets/img',
    urlPath: '/assets/img',
  });

    /** Maps a config of attribute-value pairs to an HTML string
   * representing those same attribute-value pairs.
   */
  const stringifyAttributes = (attributeMap) => {
    return Object.entries(attributeMap)
      .map(([attribute, value]) => {
        if (typeof value === 'undefined') return '';
        return `${attribute}="${value}"`;
      })
      .join(' ');
  };


  const sourceHtmlString = Object.values(imageMetadata)
    // Map each format to the source HTML markup
    .map((images) => {
      // The first entry is representative of all the others
      // since they each have the same shape
      const { sourceType } = images[0];

      // Use our util from earlier to make our lives easier
      const sourceAttributes = stringifyAttributes({
        type: sourceType,
        // srcset needs to be a comma-separated attribute
        srcset: images.map((image) => image.srcset).join(', '),
        sizes,
      });

      // Return one <source> per format
      return `<source ${sourceAttributes}>`;
    })
    .join('\n');

  const getLargestImage = (format) => {
    const images = imageMetadata[format];
    return images[images.length - 1];
  }

  const largestUnoptimizedImg = getLargestImage(formats[0]);
  const imgAttributes = stringifyAttributes({
    src: largestUnoptimizedImg.url,
    width: largestUnoptimizedImg.width,
    height: largestUnoptimizedImg.height,
    class: className,
    alt,
    loading,
    decoding: 'async',
  });
  const imgHtmlString = `<img ${imgAttributes}>`;

  const pictureAttributes = stringifyAttributes({
    class: className,
  });
  const picture = `<picture ${pictureAttributes}>
    ${sourceHtmlString}
    ${imgHtmlString}
  </picture>`;

  return outdent`${picture}`;
};

{% image "img-path-here", "alt-text-here", "eager", "[90, 180, 320, 640]" %}

[zachleat]

Ah, I’m confused by the question—if you’re passing in "eager" as the loading argument, it’s always going to use loading="eager" in the imgAttributes string there

[octipus]

Ah, I’m confused by the question—if you’re passing in "eager" as the loading argument, it’s always going to use loading="eager" in the imgAttributes string there

it does, on local environment

However after deployed on Netlify, it changes to loading="lazy" and i'm not sure why.

[octipus]

nevermind! i have just turned off Cloudinary and it builds correctly now.
I always thought cloudinary is just replacing the url path not the entire <img> tag.
It kind of made sense it could be Cloudinary after i posted the screenshots above.
Rubber duck won the day 🦆

[zachleat]

Thanks! Glad you got it figured out!