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:

8

Hello @Lee_Wilson , To keep the same image size on mobile without compromising performance, one way is to use a dynamically resized image, and another is to compress the image. Below are the practices you can apply the same -

Resize Image ( By using Velo Code)
If you want to adjust the image size to fit specific sections dynamically, you can use Velo to update the image size based on breakpoints.
For example -

$w.onReady(function () {
    const imageElement = $w("#myImage");

    // Resize image dynamically for mobile devices
    if (wixWindow.formFactor === "Mobile") {
        imageElement.src = "https://static.wixstatic.com/media/your-image-path-mobile.jpg"; 
    } else if (wixWindow.formFactor === "Desktop") {
        imageElement.src = "https://static.wixstatic.com/media/your-image-path-desktop.jpg";
    }
});

Lazy Loading for Images
To ensure that images are only loaded when needed, you can implement lazy loading to achieve that.
For example -

import wixWindow from 'wix-window';

$w.onReady(function () {
    const imageElement = $w("#myImage");

    // Check if the screen is mobile to enable lazy loading
    if (wixWindow.formFactor === "Mobile") {
        imageElement.src = "https://static.wixstatic.com/media/your-image-path.jpg"; 
        imageElement.lazyLoad = true; //lazy loading
    }
});

Compressing Image

Compressing the image is also a good approach to handling the image issues. It helps to reduce file size, all without losing quality. You can do the compression manually. Alternatively, I recommend trying Image Optimizer Pro- a Wix app that automatically compresses all media( Images and videos) with a single click for instant performance boosts. It compresses images up to 80% & converts to WebP for lightning-fast loading without losing quality. Helps in achieving better user experience and SEO rankings. It comes with a free plan as well for users.