Image Optimization issue

[X3Technology]

I am working with this .jpg

When I upload via the Asset Manager (or the Image block), it optimizes the image into the various formats, which is great.
But, the webp image that is being displayed is now too pxielated.

GitHub won't let me upload the optimized .webp file, but here is a screenshot of it.

Is this a compression problem? Not sure how to work around this.

[meetmandeep]

The two images are not of same dimensions. Can you provide the original image you're uploading?

[X3Technology]

The top one is the original .jpg. Try uploading it via the Image picker and selecting it. It comes out pixelates like the second image. It's especially noticeable in the embedded text (I know, bad idea, but not my image).

[nikhilmandeeps]

Upload top image via the Asset Manager. The original .jpg file is same as below .webp image

[X3Technology]

The image @nikhilmandeeps uploaded and referenced as "below .webp image" is not .webp, it is .jpg. GitHub doesn't allow you to upload .webp images.

[nikhilmandeeps]

@mathisjay uploaded image is screen shot of .webp image

[X3Technology]

I didn't make up the .webp images in the attached .zip file. These came directly from Vanjaro. The image degradation in the image files that Vanjaro generated is very clear. I'm not sure how else to explain it...

[X3Technology]

Here is a .zip file with the original image (.jpg) and the 4 optimized images (2 .webp and 2 .jpeg).

homepage-pco-facein2-hero-fg.zip

If you look closely, you will see significant pixilation on the 4 optimized images. The quality is too low for me to be able to use these.

[meetmandeep]

It looks like we need to introduce the "Quality" setting to save the new JPEG/WEBP files. It's always a compromise between performance and image quality. But if we can expose that setting then admin can tweak it as necessary.

[X3Technology]

I agree. It would be ideal if it could be done differently on each individual image. The default compression setting is probably fine for most images.

Images with fine detail like person's faces (headshots) or any type of smooth color gradient will have the same issue.

[X3Technology]

@nikhilmandeeps
Here is another test. I tested using two images.

1. A 600px x437px .jpg that contains a person face and some embedded text (test.face.jpg).
2. A 1920px x1200px purple gradient used as a background. (bg.jpg)

I uploaded both image via the Asset Manager.
For image 1, Vanjaro created 4 new optimized images and placed them in the .version folder - 2 600w versions (.webp and .jpg) and 2 360w versions.
For image 2, Vanajro created 8 optimized images (2 360w, 2 720w, 2 1280w, 2 1920w).

I zipped up my .versions folder and the original images in this .zip file to show the results.

images.zip

Please inspect the images and you should be able to see the image degradation very clearly.

For image 1, the degradation is most obvious around the embedded text and details around the persons face and some other gradient effects.

Here is the original:

Here is the optimized 600w version with some pointers added to show the problem:

For image 2, the smooth gradient of the original image become very banded, even in the 1920w versions.
Here is the original:

Here is the optimized 1920w version with some pointers added to show the problem:

The degradation is enough that the client complained, thus unacceptable. I can't explain it anymore clearly than this.
Let me know if you have any questions.

[nikhilmandeeps]

I am able to duplicate the issue with second image and will be fixed in next update.