How to maintain image quality

I’m working in the Wix Studio Editor and experiencing an issue where high-quality images lose sharpness after being uploaded to the site. The platform automatically reduces the image quality, which makes it difficult to see fine and precise details. This is a problem because clearly identifying these details is essential for the purpose of the website. My goal is to keep the images as sharp and high-quality as the original files, without automatic compression or quality loss.

When you upload an image to your site, there is some conversion/optimisation done to the images for the purpose of performance. You can read a little more about this here - Site Performance: Optimizing Site Media | Help Center | Wix.com

If the images are appearing blurry, it’s recommended to upload higher resolution, along with appropriate formats like AVIF, WebP or JPEG.

Have you got an example side-by-side of what it should be vs what it displays like in your site?

Hi, @user3918 !!

I personally refer to this issue as:
“The theory that converting images to AVIF before uploading them to Wix is not only pointless, but may actually be counterproductive.” :innocent:

Until fairly recently, I felt that manually converting images to AVIF before uploading them was the best approach. However, that was back when Wix automatically converted images to WebP. At that time, if you uploaded your own AVIF images and added them to a page, they could be displayed as AVIF exactly as you created them—that is, using the resolution and compression settings you had chosen yourself.

These days, though, it seems that Wix automatically converts images to AVIF on its own. As a result, even if you upload images that you have already converted to AVIF, some additional processing appears to be applied when they are added to a page. The outcome is disappointing: the image quality degrades further, and the file size actually becomes slightly larger, resulting in a worse AVIF image overall.

At first, I suspected that the image might actually be WebP under the hood, just masquerading as AVIF. But after inspecting the file contents via command-line tools, I confirmed that it really was AVIF… :melting_face:

That said, as you probably agree, areas like hero sections—where visual clarity is especially critical—demand a vivid, lifelike sharpness. Think of the sparkle of jewelry or the fresh, almost moist realism you see when seafood is laid out right in front of you. Humans are surprisingly sensitive to this kind of visual clarity, and we tend to notice even small compromises made in the name of cost or optimization. :thinking:

At the moment, the only way I know to work around this limitation is to load and display images using an <img> tag inside a custom element. Unfortunately, this approach does not seem to work for videos, so a different solution will be needed in that case. :raising_hands:

I believe that by using a custom element, it should be possible to display AVIF images exactly as you created them. Additionally—although I haven’t personally tested this—it might be that if images are upscaled in advance using super-resolution techniques before being uploaded, their visual sharpness could be better preserved even after Wix’s automatic AVIF conversion process.

That said, this approach is neither particularly productive nor reproducible, but it’s possible that the post-conversion sharpness depends heavily on the original image’s resolution. If this method does work, it may offer some benefit in cases where the number of images is limited—provided that the converted AVIF images are pooled and reused on Wix’s servers. :innocent:

Hi , @user3918

To maintain image quality on your site while keeping performance optimal:

1. Export correctly: Save images at the exact display size you need with appropriate compression (e.g., 72–150 dpi for web).

2. **Use the right format:
**
JPEG/WEBP for photos,

PNG for graphics with transparency,

SVG for icons/vector shapes.

3.Avoid upscaling: Don’t stretch small images - always upload at least as large as the largest display size.
**
4.Test on devices:** Preview on mobile and desktop to ensure sharpness without oversized files.
Keeping source files well-prepared and letting Wix handle responsive delivery gives the best balance of quality and speed.

Alternatively , you can use (https://www.wix.com/app-market/image-optimizer-pro) for image optimizing and maintaining image quality.

Hope this help .