0👍
While it certainly is possible to reduce the resolution of your images, directly in your Vue app, it wouldn’t solve your problem – it might even make your Vue app less performant. The Vue app runs entirely in the browser (unless you’re using server-side rendering). Therefore the high resolution images would still have to be downloaded, before any image processing library can reduce them in the Vue app. Having to download the files means that the load time wouldn’t change. In fact, letting the browser do the processing would cause it to use the users computer resources, instead of your servers.
You’re better off reducing the image resolution server side (or at "compile" time, if the images are static):
- You can reduce the resolution each time an image is downloaded, and then use caching to avoid processing the same image over and over.
- You can do it when the image is uploaded, and store the low resolution image in your file storage.
- A combination of the above, where you lazily reduce the resolution when an image is downloaded, and then store the low resolution version for use with any subsequent request.
If the images are merely static images for your Vue application, there exists build tools which hook into the Vue-cli build pipeline, that can optimize images for production when the application is being built. Then you simply upload the optimized images when the application is deployed.