First, I check the "Accepts" header of the http request, which automatically gets sent by all browsers. If "webp" is in the value of that header, I know the client can accept webp format.
Second, I'm using the sharp npm package to manipulate the images. Sharp can create WebP images from source images.
now its working like a charm. im just curious if its possible to control quality wen resizing. Im losing a great deal of quality for example if i resze an image from 800x800 to 200x200 the difference in quality is highly noticable.
Apparently, Sharp (the image processing library used) accepts some options for quality. I added the settings and pushed the changes. It looks like that solved the issue, so let me know if that helps.
Thanks for the praise, and you're welcome!
Two things work together to return WebP.
First, I check the "Accepts" header of the http request, which automatically gets sent by all browsers. If "webp" is in the value of that header, I know the client can accept webp format.
Second, I'm using the
sharp
npm package to manipulate the images. Sharp can create WebP images from source images.And that's it. Glad you like the solution.
Thanks for a quick reply.
I am facing the following an Error if the image is not in the bucket root,
Example: original URL: distribution/uploads/test.jpeg?w=200
Error message: "Error while getting source image object "/uploadstest.jpeg": NoSuchKey: The specified key does not exist"
If the image is in the subfolder I get the following error how can if ix it.
Ah, looks like a bug in appending the prefix ( a missing / character). I'll push a fix in about an hour.
yah it took me long to realize that a / was missing please du push the fix.
I fixed the bug. You'll just need to
git pull
andnpm run update [env]
.now its working like a charm. im just curious if its possible to control quality wen resizing. Im losing a great deal of quality for example if i resze an image from 800x800 to 200x200 the difference in quality is highly noticable.
There should be no loss of quality when sizing down. If anything, you'd gain quality. I'm curious... can you point me to an example?
Apparently, Sharp (the image processing library used) accepts some options for quality. I added the settings and pushed the changes. It looks like that solved the issue, so let me know if that helps.
Simply did the trick thank you so much for your effort much appreciated.