How to properly compress an image for a website?

Question

Image processing

There is a stack restaurant site like this: nuxt js + adonis js + pgsql.

Images of goods are uploaded to google storage (jpg format) and are pulled by api, the weight of the image is about 5-6 mb, which is long enough for loading, how they can be compressed, preferably without a strong loss of quality, so that they are instantly loaded.

Answer 1

Another option https://squoosh.app/

Answer 2

For example https://www.npmjs.com/package/imagemin
for gulp is also https://github.com/sindresorhus/gulp-imagemin

Answer 3

https://www.npmjs.com/package/sharp
Can do more than compress.

Answer 4

You can use progressive jpeg or make your own. When loading, thumbnails (low quality pictures) are pulled up for you, and when the main ones are loaded, replace them