Does WASP hope to handle compression of images to improve FE experience
I wanted to know if WASP has functionality to compress images to more efficient format (webp) on the FE (like nextjs image tag) or other BE solutions to improve user experience should be considered especially for applications with lots of images
3 Replies
Hi @layinka. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Currently, Wasp does not have built-in functionality for image compression or optimization like Next.js's Image component. However, this is an area that the Wasp team is aware of and considering for future improvements.
There are a couple of relevant points to note:
1. Wasp is currently working on replacing the default PNG logo in new projects with an SVG version, which would be more efficient Github Issue #1534 (https://github.com/wasp-lang/wasp/issues/1534). This shows they are thinking about image optimization, albeit on a small scale for now.
2. There's an open issue about the ability to serve and upload dynamic binary assets (including images) Github Issue #494 (https://github.com/wasp-lang/wasp/issues/494). While this doesn't directly address compression, it shows that handling images is on their radar.
3. The Wasp team is also considering support for Progressive Web Apps (PWAs) Github Issue #1117 (https://github.com/wasp-lang/wasp/issues/1117), which could potentially include image optimization features in the future.
For now, if you're building an application with Wasp that requires a lot of image handling and optimization, you might need to consider implementing your own solution or using third-party libraries for image compression and optimization on the frontend or backend.
It's worth keeping an eye on Wasp's future updates, as they seem to be continuously improving and adding new features to enhance the developer experience and application performance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @layinka, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
@miho @Vinny (@Wasp) you will know how to answer this the best!
Since the frontend is a React + Vite app, you could try using a Vite plugin for image optimisation: https://www.npmjs.com/package/vite-plugin-image-optimizer
npm
vite-plugin-image-optimizer
A Vite plugin to optimize your image assets using Sharp.js and SVGO. Latest version: 1.1.8, last published: 5 months ago. Start using vite-plugin-image-optimizer in your project by running
npm i vite-plugin-image-optimizer. There are 7 other projects in the npm registry using vite-plugin-image-optimizer.