Auto convert Markdown images into Srcset equivalent

[mmistakes]

Investigate better way of handling responsive images by writing in Markdown and replacing with Srcset markup. Possibly via a plugin.

References:

• https://github.com/wildlyinaccurate/jekyll-responsive-image/issues/15
• https://github.com/jekyll/jekyll-assets/issues/157

[psirek]

Any thoughts on how you would implement this now? The easy way might be to extend your markdown_img_replacement.rb plugin to create the needed scrsets like in your page__cover.html file and put all files in the feature image folder. Trying to find a solution myself for my fork of this site.

[mmistakes]

@psirek The Markdown to srcset part is easy, its taking the image asset and generating the array of resized versions that's tricky.

Originally I was going to use the Jekyll picture tag plugin, but imagemagick was way to slow for me. I haven't found a good way to pipe it through Sharp, which is much faster. I use a Gulp task to do it, but it's not ideal since the responsive image markup I'm generating is assuming the image assets will be there too...

[mmistakes]

@psirek How Gatsby handles all of this is one of my main motivators for considering switching away from Jekyll.

[psirek]

Ok, looking forward to seeing your work on Gatsby if you ever make the switch. In the meantime I have added some code to generate the srcset like in the feature image to the post images and galleries. It is not pretty, but it works. Next I will add a link checker for checking site links and finding gaps that way. But you are right, it is cumbersome for something that should work out of the box!

[mmistakes]

If you don't have a lot of images the plugin gist above should do the trick when used with the Jekyll picture tag plugin. I believe the maintainers of that plugin recently rewrote it to support srcset markup which is nice.

So in theory that little image replacement plugin above can take vanilla Markdown image syntax, convert it to {% picture %} tags, which then would be handled by picture tage plugin and generate the responsive image markup along with all image assets. No checking links or any of that nonsense either.

I would have went that route but using Imagemagick to generate 20k images would have killed my build process. Instead I'm using a variation on that image replacement plugin to take Markdown images pepper in some lazyload attributes to greatly improve page performance.

And if you're curious I have test Gatsby repo where I've been playing with it.

[psirek]

I will look into it, Jekyll Picture Tag should be enough for me since I do not expect to go over 500 images anytime soon. And I will take a look at Gatsby early next year when the holidays has passed.

Thanks for pointing me in the right direction, much appreciated!