Image pipeline

[guimachiavelli]

Our current deployment process has no procedure in place for handling images. This means any image added to the public folder will be published as-is without any optimisation.

We should improve our build workflow so that at the very least all our static images are resized and our <img> tags use srcset so users on smaller screens are not forced to load 2500px-wide images.

Tasks/questions:

• [ ] Does Vuepress offer any in-built tools to do this? We need something with two main steps: first, generate image size variants on build/deploy, and second, add the srcset attribute to the default <img> tags generated from the original markdown files
• [ ] What are the size variants we should generate?

@mdubus, @bidoubiwa, what do you think? Any ideas/suggestions?

[bidoubiwa]

Hey @guimachiavelli this might help to find a lead https://github.com/vuejs/vuepress/issues/1829

For your first question about resizing, per the issue linked, it seems that sharpJs is the library to add in our pipeline to resize the images.

For your second question, what is the purpose of this attribute?

Not sure about the image sized @mdubus might know more about that

[guimachiavelli]

Thanks for the reply, @bidoubiwa ❤️

In short, srcset accepts a comma-separated list of image paths. Then, when the browser is rendering the page, it chooses one of the images by taking into account browser size and screen resolution. So, ideally, a browser on a low-res phone will only download a small image, a browser in a retina iphone will load a bigger version of that image, etc.

More info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset and https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

[bidoubiwa]

Oh that's very interesting. However do we know how to add the srcset to the image tag through markdown or will we have to change the syntax to proper HTML?

Once we know the sizes it seems not that hard to resize them (emphasis on seems)

[mdubus]

Hi 👋

This is a great suggestion!

Regarding the breakpoints for the srcset, I would suggest using the same as you currently have in VuePress, which is 720px if I'm correct. That makes only 1 breakpoint which is few, but if you want you can also add another one for tablet <> desktop like 1024px for example.

I checked quickly and I didn't find how to manage the srcset with markdown. I would say that it would be easier with HTML directly. I'm not really familiar with the VuePress environment, but maybe you have tools to help you add this to your images.

If you're not that familiar with srcset, I would suggest you take a look at this video which helped me a lot in understanding it a few months ago. It's with Next JS but the principles stay the same :)

Hope it helps!

[drdogbot7]

If Vuepress had something equivalent to gatsby-plugin-image, that would be… really really useful. It's basically a wrapper for Sharp that eliminates a ton of work. I hate working in React, but that plugin is a reason I still end up using Gatsby for some projects.

[guimachiavelli]

This issue is now the responsibility of an external team and will be monitored in their preferred platform.