Mobile View Image Compression

Ask the community
1

Hi all,

Wix Studio is displaying a scaled down version of an image in Mobile View, usually the right option, however, in this instance, I would like to maintain the same large image that is shown in the desktop/tablet view.

Is there any way to override WS from creating a scaled down version for mobile?

TIA

2

Hi, Lee_Wilson !!

Do you mean that you want to load images with the same resolution on mobile as on desktop or tablet? :thinking:

3

Thats right, so the image gets cropped based on screen size, looking at the image urls:

Mobile: w_1030,h_72
Desktop: w_2963,h_2122

…I would just like the mobile view to load the desktop sized image.

4

Understood. :thinking: If you’re aware that resizing can be done via the URL, try adding the following Velo code to the page’s code and see if it works. I haven’t personally tried it, but it might be possible.


import wixWindowFrontend from "wix-window-frontend";

$w.onReady(function () {

    let formFactor = wixWindowFrontend.formFactor; // "Desktop", "Tablet", "Mobile"
    if(formFactor === "Mobile"){
        $w("#yourTargetImageElemId").src = "desktopVersionImageUrl";
    }

});

Additionally, it seems that Wix now allows the use of .avif format images (though it’s unclear if there has been an official announcement). By setting the original image format to .avif, you may be able to display high-quality images with smaller data sizes. Why not give it a try? If the resulting image quality satisfies your needs, the current code approach might not even be necessary.

Currently, Wix likely converts your images to .webp format, which is then loaded on your mobile device. However, based on my previous tests, uploading .avif images directly to Wix’s Media Manager prevents them from being converted to .webp. Instead, .avif images are loaded directly. This is likely because .avif offers better performance, so Wix avoids converting them to .webp.

Below, I’ve included a link to a site where you can easily convert images to .avif format. Be sure to give it a try! :wink: :+1:

5

I get your concern about keeping the same image size on mobile. The Velo code shared above is a good option, but if you want an easier way, you can try compressing your desktop images to make them smaller without losing quality.

6

Fantastic, using a avif file solved the problem.

Thanks so much for your help.

7

Have a nice Wix Studio life! :wink: