You have started your next big project, it has a feature to allow users to upload pictures, your team agreed to call it Ultragram (You can judge my lack of creativity later).
Ultragram is great, you’ve got users, and everyone is happy.
Then all of a sudden, you get angry performance reviews from your users, you quickly realize that the internet speed of your users isn’t as great as yours, with your fancy office setup, the app’s performance is slow, loading time seems endless, and after investigation, the culprit is found, very large images uploaded by your users, from their brand new state of the art High definition iPhones.
What if you could save storage space, bandwidth, and improve the overall performance of the app? It turns out you can! by compressing image files client-side. Remember that smaller file sizes also mean smaller bills from your cloud provider.
Uploaded files will be chewed by your client app, and the compressed version will be sent to the server.
Let’s do this!
Create A Svelte App
First of all, let’s create a svelte app.
npx degit sveltejs/template ultragram
cd ultragram && yarn
#Or if you are using npm
npx degit sveltejs/template ultragram
cd ultragram && npm install
Dependencies
We’re going to use an amazing npm package that uses the canvas to resize your images client-side, it was named… hold on to your hats…, react-image-file-resizer!. And yeah, I know it’s weird too, but it works! We’re going to use it with svelte.
Install it with the following command:
yarn add react-image-file-resizer axios
#Or if you are using npm
npm add react-image-file-resizer axios
We’re going to need axios for POST requests.
If you are using the svelte REPL to follow along, you might experience some weird behavior once you import the package, I’ll recommend using your local environment with VSCode, Atom, or whatever editor works for you.
#svelte #sveltejs #front-end-development #javascript #compression
