Closed guimachiavelli closed 1 year ago
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
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
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)
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!
This issue is now the responsibility of an external team and will be monitored in their preferred platform.
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 usesrcset
so users on smaller screens are not forced to load 2500px-wide images.Tasks/questions:
srcset
attribute to the default<img>
tags generated from the original markdown files@mdubus, @bidoubiwa, what do you think? Any ideas/suggestions?