Large Media files in code

christinajoshi · May 25, 2022, 11:15pm

Hi,

My site name is: lighthearted-marigold-c9758c

I have an image in Large Media for that site. I just don’t know how to reference it in my code. For example, I have tried this in my html:

img src=“https://lighthearted-marigold-c9758c.netlify.app/.netlify/large-media/img/lakemeditation.jpg?nf_resize=fit&w=300&h=300”

No image is showing, just the alt text that I have for it. Can someone please assist? Thank you!

-Christina

coelmay · May 25, 2022, 11:54pm

Hey @christinajoshi

You don’t need the /.netlify/large-media part of the URL.

E.g. https://lighthearted-marigold-c9758c.netlify.app/img/lakemeditation.jpg?nf_resize=fit&w=300&h=300 which shows

christinajoshi · May 26, 2022, 12:42am

Thank you. Can you tell me how you make it responsive? Do I do that with media queries? Thank you again.

-Christina

coelmay · May 26, 2022, 1:20am

You could use a <picture> tag with multiple <source> elements, and a default/fallback <img>.

christinajoshi · May 26, 2022, 1:38am

Thank you so much!

-Christina

christinajoshi · May 26, 2022, 11:25am

Hi,

Can you tell me what I’m doing wrong here? I’m only getting one image size. Thank you.

coelmay · May 26, 2022, 12:08pm

A per this example (and the one following it) using the media attribute, the <img> src is the default image and displayed when no media queries match.

In your case though, media="(min-width: 1200px)" is going to capture any window greater than that width, and display the image that is 507px wide. The <img> is never displayed.

Changing the order (I have discovered) is key too (at least in Firefox.) So the media queries should go largest to smallest—1200, 786, 576. You might consider changing these to max-width instead of min-width.

Examples:

<picture>
  <source media="(min-width: 1200px)" srcset="https://lighthearted-marigold-c9758c.netlify.app/img/lakemeditation.jpg?nf_resize=smartcrop&w=800&h=800">
  <source media="(min-width: 768px)" srcset="https://lighthearted-marigold-c9758c.netlify.app/img/lakemeditation.jpg?nf_resize=smartcrop&w=600&h=600">
  <source media="(min-width: 576px)" srcset="https://lighthearted-marigold-c9758c.netlify.app/img/lakemeditation.jpg?nf_resize=smartcrop&w=400&h=400">
  <img src="https://lighthearted-marigold-c9758c.netlify.app/img/lakemeditation.jpg?nf_resize=smartcrop&w=1000&h=1000" alt="Picture of a lake" >
</picture>

In the HTML above, the <img> element’s src attribute is never used because the min-width: 1200px is the largest screen value (yes, I made the image square because it was easier than doing the 3:2 aspect ratio maths! )

<picture>
  <source media="(max-width: 1200px)" srcset="https://lighthearted-marigold-c9758c.netlify.app/img/lakemeditation.jpg?nf_resize=smartcrop&w=800&h=800">
  <source media="(max-width: 768px)" srcset="https://lighthearted-marigold-c9758c.netlify.app/img/lakemeditation.jpg?nf_resize=smartcrop&w=600&h=600">
  <source media="(max-width: 576px)" srcset="https://lighthearted-marigold-c9758c.netlify.app/img/lakemeditation.jpg?nf_resize=smartcrop&w=400&h=400">
  <img src="https://lighthearted-marigold-c9758c.netlify.app/img/lakemeditation.jpg?nf_resize=smartcrop&w=1000&h=1000" alt="Picture of a lake" >
</picture>

In the HTML above, on a screen/window larger than 1200px the <img> element’s src attribute is used. Between 769px and 1200px the max-width: 1200px is used and so on.

(In the case of using multiple image formats, <img> is the default .jpg while the <source> elements are alternate formats such as webp or avif.)

christinajoshi · May 26, 2022, 12:34pm

Thanks for looking into this. I copied what you have the image size is not changing; it’s staying at 800 x 800. The image is in a flex column and that is also inside a class that has things like padding-right: 1rem. Though, there shouldn’t be any way that it’s affecting different images from not being served up. Just threw code in codepen to confirm. Any ideas?

Yes, it’s the Meditations.html page.

I was using a class to make the image responsive and that’s the code that’s up there now.

Want me to commit my changes to github?

coelmay · May 26, 2022, 12:40pm

Can you share the site/page?

christinajoshi · May 26, 2022, 12:54pm

I just pushed the changes you recommended and it’s up on netlify:

https://lighthearted-marigold-c9758c.netlify.app/meditations

coelmay · May 26, 2022, 1:12pm

Add the CSS

picture img {
  width: 100%;
}

which will make the image responsive.

christinajoshi · May 26, 2022, 1:37pm

That is essentially how I was handling it before using a class for the img:
.responsive {
width: 100%;
height: auto;
}

I was hoping to use netlify’s large media transformations. Unfortunately, it’s not working. The following just keeps the image at 1000 x 1000 (which is the default/fallback).

coelmay · May 26, 2022, 10:19pm

This is what I have locally

<picture>
  <source srcset="netlify-we-love-the-web-bag-1000.jpg" media="(min-width: 1000px)">
  <source srcset="netlify-we-love-the-web-bag-800.jpg" media="(min-width: 800px)">
  <source srcset="netlify-we-love-the-web-bag-600.jpg" media="(min-width: 600px)">
  <img src="netlify-we-love-the-web-bag-480.jpg" alt="Netlify Tote Bag Image">
</picture>

As I resize the window/viewport I see the image changes to the <source> specified for that viewport size.

Netlify doesn’t have any control over what is displayed in the browser—that is all down to the HTML/CSS/JS you are using. What Netlify LM does is allow you to have one image source which you can dynamically transform rather than having to generate multiple files with different transformations based on colour, size, etc. (as I did in my example above.)

christinajoshi · May 27, 2022, 11:55am

Thank you. The issue was the size of the pictures; they were too big. I’ve fixed what I was passing into the nf_resize param and the pictures are now showing. Thanks again.

-Christina

hillary · May 27, 2022, 2:09pm

Glad everything is working now! Thanks for sharing how you resolved your issue. And thanks @coelmay for some excellent debugging!