Responsive Smugmug Images on WordPress

EverythingEverywhere

Is there an easy way to implement responsive images using the element?

The closest thing I've found is some code which is 3 years old that you need to manually enter in your functions.php file (https://ramblurr.github.io/smugtools/responsive/wordpress.html)

Even if there was code you could get from the Share button in Smugmug, it would be nice.

leftquark

There's nothing built by SmugMug to do this at this time, though it's certainly a good feature request as we dive into sharing and making sure your photos look good anywhere.

To confirm, when you say "implement responsive images using the element", do you want the image size that gets returned to be optimized around the size of the element, or can any (large enough) image work, and just have it be scaled down appropriately by the browser? (ie. you could pull in the X4 image and then size it down ... or would you rather it pull the M, L, XL, X2, X3, X4... based on the size of the element its within)?

EverythingEverywhere

Optimized.

Currently, you could just serve up a big image and have the browser resize it, but that would slow down page speed by serving up a needlessly large file.

The srcset attribute allows you to define multiple images. Because Smugmug already has predefined sizes, I would think that part at least would be easy to do for any image hosted on Smugmug.

leftquark

When you're browsing SmugMug, we optimize the image that's displayed but we don't have any share options that do this. I'll talk with the team about taking advantage of srcset when we give the HTML code in the Share Panel.

leftquark

Are you aware that IE11 and Edge do not support the srcset and therefore it wouldn't work for visitors on those browsers?

EverythingEverywhere

Just checking browser market share, there is still 80-85% of the market it would work with.

Also, if there is an alternative way of doing it, that would be fine too.

In doing research on this I came across a comment by Don Macaskill @onethumb in 2012 where he talked about supporting the "picture" element. I don't know what the state of things are since that was written in 2012.

https://www.w3.org/community/respimg/2012/05/11/respimg-proposal/