support responsive images via <picture> element about blogdown HOT 3 CLOSED

Manipulating the HTML of plot output is possible right now, you could use a similar approach to knitr hooks as I did here to wrap the image in <picture> with different sources.

You could append a set suffix at the end of each source, so you have e.g. image.png for the original image and image-medium.png and image-small.png or something, which would make your HTML good to go, but at this point you only have one image actually existing, i.e. image.png.
At this point you could use a post-processing script using something like imagemagick or the magick package to crawl through your output directory, take every image that doesn't hav one of your predefined suffixes, and have it create the two image versions you references in the <picture>-tag.

It wouldn't be pretty, but the more I think about it, the more I'm certain that it's at least doable right now.

from blogdown.

I found a way to output the <picture> tag with arbitrary additional sources, and also a way to convert plot output on the fly while it's being generated to additional formats. I briefly explain and link to the relevant code in this post, and more adventurous folks might be able to build upon that approach.

from blogdown.

Yeah, on second thought, I think it makes more sense for users to redefine the plot hook to do whatever they want just like @jemus42 did. I don't want to go too deep into this rabbit hole myself. I feel the responsive <picture> is more for displaying art, and I don't see how beneficial it is to display a scatterplot in multiple versions.

from blogdown.