image resizing

[oupala]

Feature request

Image resizing to avoid giant images on the web.

What problem does this feature solve?

When adding an image from a camera or a smartphone, the image can be a billion pixel and an enormous amount of bytes. So much data is usually useless on the web. VuePress should be able to detect very big images and to resize them to an affordable size, using imagemin, imagemagick or any other library.

How should this be implemented in your opinion?

A setting file to tell how big images should be. Bigger images are resized to this maximal size.

Are you willing to work on this yourself?

I do not have the required skills to do so, but I can contribute with other peoples (code contribution, testing, documentation).

[kefranabg]

Hi @oupala,

Thanks for opening this issue.

Resizing/optimizing images is not the primary goal of VuePress. It should be dev's responsability to take care of its assets weight.

As a workaround, you could easily have a process that optimize your assets before VuePress build.

Feel free to reopen this issue if you want to discuss further.

[oupala]

In my opinion, it is the job of a static generator to format the source content into a browseable content:

• markdown is reformatted into html
• images should be resized to a browseable size and quality

Why do you think it is the dev responsability, and not VuePress's one?

And what solution would you imagine as an automated workaround?

[kefranabg]

What you describes looks like gatsby image plugin.

Why do you think it is the dev responsability, and not VuePress's one?

What I mean is that create such a plugin is a lot of work, and optimize assets is not the primary goal of VuePress. You can optimize images by your own with dedicated tools before building with VuePress.

[oupala]

Would you mind giving me an example on how to do that with something around VuePress?

[kefranabg]

Some solutions:

• It exists online tools to resize/optimize images: compressjpg for example.
• You can have you own script that optimize your images with tools like sharp.js. Then you just run a command npm run optimize:images before running your vuepress build
• I also heard about solutions like cloudinary that could do the job.

Is that what you were expecting @oupala ?

[oupala]

Thanks for these pointers.

I was looking for something like sharp.js.

[oupala]

It works quite well.

Try this command:

npx sharp-cli resize 800 800 --withoutEnlargement true --optimise true --progressive true --withMetadata false --format input --fit inside --input $(find ./docs -name *.jpg -or -name *.png) --output "{dir}/{base}"

You should get something quite optimized.

[sdaitzman]

I know this is closed, but I want to +1 this request. Dynamic image resizing would drastically improve the experience of using this tool for blogging or communal documentation.

I might write a custom webpack loader for this, and will update this thread if I get it working.

[zzy-life]

#3120 It has been solved. Please look at this