Image compression, best practices?

Wappler General How To
#1

Hey all, how have you done the following?

We’re letting users upload product images. This brings the concern of a big file size.

Ideally the image is as optimized as possible (highest quality with the lowest size) to make sure the loading speed is not impacted much. The pages are check out pages, so speed is extra important. It’ll impact the bottom line of our customers.

So far I got in mind:

  1. Resizing the image (using Wappler’s resizer)
  2. Compressing with a library ( Client Side Image Compression Before Upload )
  3. Showing WebP and AVIF foramts when possible https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Anyone got extra tips / implemented this?

(Sorry this question is similar to Client Side Image Compression Before Upload but it’s not only client side image compression that I’m looking for. I’d like to broaden the question and get tips in general)

#2

we’re working on an image heavy project.

in our use case, the images/files will be very big. multiple images/files worth GBs at times.

we upload as is from clietn side to wasabi s3.

have another tiny wappler project run on a hetzner (cheap) server to download these files on that vps and process them, then reupload to wasabi s3 - via a scheduler.

this is a very niche use case. maybe it help you maybe it doesn’t.

generally client side compression is desired when client side uploads needs to be fast enough and/or server side uploads needs to be fast and small.
if this is not a limitation, then as is upload is better off and do what you want on server side itself.

#3

Thanks for sharing!

Why the additional wappler project and not the ‘main’ one?

#4

The processing will need significant resources in bandwidth, CPU & ram.
Hence a different project to deploy on a high config but cheap server outside of the primary server locations.

Splitting the processes ensure that high resource cost does it affect the primary website speeds.

1 Like