Sign In
Awfully Compressed

When you are looking at the showcase images in a model overview on a large screen, you maybe have noticed that they look somewhat blurred compared to when you actually click on the image and get to the image viewer, where you see the original image. The reason is that the "preview" image is a scaled down version of the original with a width of 450px and additionally highly compressed.
I noticed that before with anime style images, but did not pay much attention to it, even though there was an article 3 months ago that's probably about the same issue. It becomes very apparent when you are looking at an image with painting style that is highly detailed.
Here is a side-by-side comparison, how I see it in the broswer, of an image I published yesterday for a model showcase. On the left side there is the original image (.png) downscaled to fit the browser window and on the right side there is the preview image ~x2 the size it actually has.

side-by-side.webp

To see the difference better, please open it in a new tab. For reference here is the link to the original image: https://image-b2.civitai.com/file/civitai-media-cache/1889f708-f21c-4ea1-ac83-aed8e477607e/original
And the link to the preview image: https://image-b2.civitai.com/file/civitai-media-cache/1889f708-f21c-4ea1-ac83-aed8e477607e/450x%3Cauto%3E_so
You can also see it in the model overview: https://civitai.red/models/2875849/anima-29b-preview-v1-convrot-quantization
In the left image, you can see that this is supposed to look like a painting. You can see details of the face, you can see the brush strokes on the clothes, the shadows look sharp. The right side looks just like an out of focus photography of the painting.

Here is another example, this time an image I found on the feed: https://civitai.red/images/140409825

side-by-side_2.webp

Again open it in another tab. The left side (original) has clear sharp lines, details in shadow and light and it looks like impasto, compared to that the right side looks really blurry. Link to the original: https://image-b2.civitai.com/file/civitai-media-cache/73bd3dd7-5fed-4a82-aac0-5e63f6a2c3fe/du_q90_hm
Link to the preview: https://image-b2.civitai.com/file/civitai-media-cache/73bd3dd7-5fed-4a82-aac0-5e63f6a2c3fe/450x%3Cauto%3E_so_hm

Even though not that bad it also degrades anime images: https://civitai.red/images/140415751

side-by-side_3.webp

Opening it in a new tab, you can see the original (left) has sharp lines and the text can be read without an issue, on the right side lines look pixelated and the text is not that clear to read.
Link to the original: https://image-b2.civitai.com/file/civitai-media-cache/013e3738-da61-47a4-b403-7e2b356bd72d/original
Link to the preview: https://image-b2.civitai.com/file/civitai-media-cache/013e3738-da61-47a4-b403-7e2b356bd72d/450x%3Cauto%3E_so

So what is actually the problem with the preview images? As I said, for larger images they are downscaled to a width of 450px, so for a 1024x1024 image the width is less than half of the original. This already makes them slightly blurry when looking at them on a monitor screen in the model overview. The other problem is the compression of the image. I did a test scaling down my image to 450px and saving it with different compression.
Here is the first one saved as png:

00067-3256416448_PNG.png

The second one as slightly compressed wepg:

00067-3256416448_WEPG.webp

The third one higher compressed jpg:

00067-3256416448_JPG.jpg

And this is the preview image from civitai:

450x_auto__so.webp

Here is a side-by-side comparison:

compression_progression.png

From left to right png, webpg (slightly compressed), jpg and civitai preview. You can see even at this low resolution how the details vanish as the compression gets higher.

Why does this matter? For anime character models or concepts this is probably not that bad. But for styles, especially high detailed painting styles, and base models with painting style abilities this makes the model overview with the preview images much less useful. You have to view the showcase images in the image viewer instead to get a grasp what the model is capable of and not everyone will do that. Seeing blurry images in the preview may discourage to use the model.

Suggested solution: The preview images are there for a reason. To make the feeds load faster. The preview image from civitai is about 10kB in size, the jpg is 38kB and the other two clock in around 200kB. So I am not proposing to use larger images (or much less compression) on the image feed, but on a model overview. Just scale them in the model overview to ~1MP without much compression, there is no need for 16MP images in the overview, but that would benefit the showcase images in the model overview by a lot.

Musing: I hope I am not the only one who is seeing the differences, so please give feedback on that.

0