A couple of questions:
<img srcset= but how can I tell which image size is actually being sent with the page? How can I verify that my responsive images is working correctly?OK - could still use an answer to 1 and 2 above, but now have a 3rd question:
Why aren’t my NLM image links rendering proper sizes? No matter the screen width, dev tools still shows the intrinsic size of the original image. It’s still downloading the whole thing!
Example is the main large image on my home page - 468 wide with intrinsic of 756 wide.
Hi, @donblanco, and welcome to the Netlify community site.
1. It appears that NLM converted all my image filenames to all lowercase. Do I need to change my html to match this?
You should not need to change your HTML. Netlify will serve the same content regardless of the case. If you see different behavior, please let us know.
2. I am using
<img srcset=but how can I tell which image size is actually being sent with the page? How can I verify that my responsive images is working correctly?
The best way to see what content your site is loading is to check the developer tools for the browser loading the site. The network tab will show the exact URLs the browser requests and exactly what our servers respond with.
Why aren’t my NLM image links rendering proper sizes? No matter the screen width, dev tools still shows the intrinsic size of the original image. It’s still downloading the whole thing!
I am seeing the smaller image downloaded instead, if I make the browser window smaller and force a reload of all assets (clearing the local browser cache).
There is more information about this behavior here:
When I have the window fullscreen the URL used is:
https://thedixons.net/img/grandpacornall.jpg?nf_resize=fit&w=756
When the window is small I see this loaded:
https://thedixons.net/img/grandpacornall.jpg?nf_resize=fit&w=320
If there are other questions about this, please let us know.
@luke - thanks for the response! I had a few problems going on here. First, I experimented with multiple methods and syntaxes. I could get none of them working, mainly because I was testing wrong. As it turns out (this is mentioned in the StackOverflow link you posted) just making the Chrome/Edge window narrower does not work. The only way I can correctly test mobile is to use Dev Tools, then toggle the device toolbar. Once that is set to one of the smartphone options, the proper image size loads.
The whole ‘network’ section of Dev Tools was new to me as well, so I learned a lot in the process. In the end, the method that I settled on was <picture> with multiple <source srcset= lines, which I got from @philhawksworth 's demo site.
tl;dr - it was all me 
