(Mis) Using srcset and sizes attributes...

[SATTERWHITE ART]

Using srcset and sizes to deliver scaled image below 420px breakpoint.

It looks simple enough, yet I’m missing something. I have used the srcset and sizes attributes on the first two images in a carousel slider, leaving those that follow as they were for comparison.

Test site at:

http://0182d1d.netsolhost.com/SITE-TESTING/indexTESTcarousel.html

-Thanks in Advance-

[osgood_]

Have you got the link to your srcset images correct? If they are located where the default image is (in the banner folder) the browser is returning an error?

Contains Errors

http://0182d1d.netsolhost.com/SITE-TESTING/images/banner/fineArt-sm.jpg

Default image displays:

http://0182d1d.netsolhost.com/SITE-TESTING/images/banner/fineArt-lg.jpg

[SATTERWHITE ART]

Osgood,

I think the image paths are correct, and I did not get a browser error. It did not show the first two images; only the alt content and the caption.

Slide 3-5 came in just fine.

I’ve uploaded an annotated screenshot of file menu.

http://0182d1d.netsolhost.com/SITE-TESTING/Files-screenShot.jpg

(Apologies if this link is inop... I see it on the server, but onclick "within this reply" wiggy at my end. URL is accurate.

Hope that helps to clarify.

[osgood_ · Accepted solution]

I'm getting a message in the browser:

fineArt-sm.jpg cannot be displayed, because it contains errors

I would check that image and I would correct the path to the images in the srcset attribute:

srcset="images/banner/fineArt-sm.jpg 420w, images/banner/fineArt-lg.jpg 1000w"

[SATTERWHITE ART]

Thank You.

I'd likely been so deep in the forest, I couldn't see the trees...(so to speak).

Note that I never had any browser return an error (Firefox, Safari, Chrome) and this is first time use of these attributes.

Good lesson, learned.

Again, Thanks.

Quick follow up, Google page speed does not show success, as the warning to serve scaled images continues to include the two slide items I used the secret/size attribute on.