Wix Media Optimization: Tips for Adding Images to Your Site
Web design and performance, the Wix Editor and you—these are some of the perfect pairs that make sure Wix websites are outstanding to the eye, and seamless to browse. When you create a website, your site’s look and feel is just as important to your end user as its performance.
While you build your web design’s visual story using imagery—for example, product photos, artwork or event videos—these elements have the potential to slow down your site if they’re uploaded without proper optimization. Thankfully, working with the Wix Editor and making a website with Wix means that the foundations are covered and performance doesn’t come at the sacrifice of your site’s appearance and style.
Still, every now and then you could run into questions about which format or size of imagery to use (“Should I upload a PNG or a JPG?”). As lead designer for Wix’s Visual Innovation Team, I'm here to break some myths about image optimization, and give you my expertise as a guide.
After reading this article, you’ll know exactly when to choose what format, and why. You’ll gain more tips on how to optimize your images and media so your site looks good and performance great.
Why is image optimization important for web design?
According to Think With Google, your website’s bounce rate can increase by 32% as page load time increases from one to three seconds. This emphasizes how crucial usability is to your website's success: visitors value loading speed just as much (and in some cases, more than) they value its aesthetics.
10 best media optimization practices for your Wix site
Website imagery plays a big role in the visual story your site will relay to visitors. But without quality visuals and a normal loading time, visitors won’t have the chance or the patience to engage with your design.
You’ll always want to upload the best quality image available. For starters, this means finding imagery and media that both look great, but will upload speedily. When building a website with Wix, things like compressing images to reduce them to an ideal downloadable size are done automatically through the Wix Editor. Once your images are uploaded and added, the Wix Editor compresses them to reduce upload time, optimizing your media’s performance.
Follow these best practices:
01. Upload the right image sizes
Generally speaking—and in the specific case of designing a site on Wix—your file should be no bigger than 25MB (or 15MB when it comes to GIFS) to ensure efficient loading. In addition, you’ll want to start with an uncompressed or RAW file to preserve your visual’s quality. This refers to a file that includes all of the image’s original data, and has not been reduced in byte size.
02. In most cases, choose JPG over PNG
JPG images—the most common format—are usually much smaller than the equivalent PNG images—sometimes as much as 10 times smaller. Due to the smaller size, you’ll want to opt for a JPG over a PNG (Portable Network Graphic).
When deciding between a JPG or PNG on your site, keep in mind that these two formats are also resized in different ways. JPG uses algorithms to reconstruct only an approximation of the original data when resized and delivered over the web. This is called lossy compression, which means some of the original data is permanently removed or “lost.” When PNGs are resized, the format uses a compression algorithm that allows original data to be perfectly reconstructed (known as loss-less compression).
Essentially, when you want to retain the quality of your images, you might opt for a PNG. The trade-off here means working with larger files that can potentially harm your site’s performance.
Tip: In the couple of cases below, however, you will want to choose a PNG over a JPG.
You require transparency in the image (e.g. you want the subject of the image, or the foreground, to appear as though it’s been cut out).
You need extreme high quality and sharpness, like in images with small text (e.g. a screenshot) or richness in colors (e.g. gradients).
03. Adjust the default compression of your images to improve sharpness
When adding images to your web design, you’ll likely find that whatever platform you’re working with has their own default when it comes to the compression of images. After uploading your JPEG or PNG file to the Wix Editor, for example, it will reduce its compression to a default of 90% quality.
However, by using the image sharpening tool you can choose an alternative compression size to adjust the sharpness level of all individual images across your site (excluding galleries).
04. Don’t stress about lazy loading—it’s a good thing
As you scroll through your site, you may notice that images appear blurry for a microsecond, before fully uploading. Have no fear: that’s known as lazy loading, and it’s a placeholder for the real (optimized) image. To see something fast on your site before the “real” image fully loads, the web will first show a small, blurred version—and here’s why:
A browser “lazily” downloads the best quality images to optimize them for the display’s dimension (aka, pixel perfect images). As images scroll into view, the high-resolution images download, replacing the Low Quality Image Placeholder (LQIP) currently displayed instead.
LQIP also helps your website’s SEO, since it provides search engines with indexed images, instead of a blank or a broken image icon.
05. When to use SVG vs. PNG
Scalable Vector Graphics, also known as SVGs, are delivered in an XML-based format. Mathematical formulas are used to build high quality images, such as Wix’s Vector Art.
An SVG has vector-based contents, instructing the browser what to display through a complex network of lines, dots, shapes and algorithms. That makes SVG more malleable than a PNG, since its size depends on the number of elements and “nodes” it contains. PNGs are raster-based formats (as opposed to the vector format of SVGs) and they’re made up of a fixed number of pixel grids that are high quality, but difficult to resize.
SVGs remain sharp on every resolution and size, even if the viewport’s dimensions change. When considering the performance burden of the image’s size, use SVG instead of raster formats like PNG, unless the SVG is VERY complex (e.g. an SVG depicting the coastline of Norway) and the element’s actual dimensions are, in comparison to the image, small.
Tip: To make the most of SVGs on your Wix site, upload SVG files with weights of up to 250KB.
In addition, be sure to avoid content that may potentially cause security issues or browser crashes, since Wix will automatically remove them from your site. For example:
SMIL animations contain some insecure content and harm runtime performance, thus modern browsers do not support them.
CSS animations are currently not supported
06. Choose the right video formats
With wider angle ranges, lengthier messages, entertaining animation and more, videos help website visitors effortlessly engage with more content. Whether promotional or purely decorative, stick to these fundamental rules to ensure your videos will appear in the highest quality, without affecting page load speed.
Wix wants users to have more design freedom therefore, our website infrastructure and media servers optimize for video from the get-go. Simply upload the best quality video available to you.
As a rule of thumb, videos uploaded to Wix your video should be a maximum of 1GB. You should also choose one of the following compatible formats:
AVI
MPEG
MPG
MPE
MP4
MKV
WebM
MOV
OGV
VOB
M4V
3GP
DivX
XVID
MXF
WMV
M1V
FLV
M2TS
As part of optimized media delivery, the Wix Video Player will always use MP4, regardless of the initial format, since all browsers and devices can stream MP4. The video player also transcodes videos into three qualities (1080p, 720p and 480p) to play on different devices and screen sizes.
Whether a fast-moving car or a slow-motion blooming flower, Wix’s video profile compressions are optimized for the most common bitrate range to provide the best networking delivery (bitrate refers to how many bits of data can be processed within a certain amount of time). These set components “choose” which video quality and dimension to stream by a logic of the video dimension with the available qualities.
07. Select the right color video background
Wix displays video backgrounds as “fill mode,” meaning parts of videos may be cropped or hidden. That said, the video content itself will appear to cover all of the component’s dimensions.
Video components are calculated based on the full dimensions of the media being uploaded, and not only the visible parts. In this case, you may want to add a color space to make up for the rest of the background and give visitors the best aesthetic experience.
Keep in mind that different browsers use different color spaces, so when you use a color as a video background and select the same color as a page background, these color spaces will look different on different browsers. One possible solution to overcome the color variation is to define a transparent background for the video.
08. Choose video over GIFS (mostly)
A GIF (Graphic Interchange Format)’s simple animation can catch the attention of visitors and uplift your web design. However, GIFs come with a few drawbacks: You can’t control playback on your site, which can harm performance, accessibility and the overall user experience. GIFs also will only start playing when all content frames are available. Since you cannot optimize GIFs web streaming, websites with multiple GIFs can significantly slow down a page’s loading speed.
If you’re deciding between a GIF vs. video, stick with the latter. Videos support almost unlimited color palettes, controlled playback and can be optimized for web streaming. Videos will also start playing on the web once the first frame is available.
Use GIFs in these cases on your Wix website:
If your content animation contains a few frames and a small dimension size (e.g 100X100) you should use a GIF.
When you have text content in your video and you want to maintain readability.
09. Elevate your design with VideoBox and Video Mask
Break free from the conventional concepts of video players with Wix’s unique VideoBox and VideoMask design elements. Without hurting the performance, these advanced tools allow users to customize their video’s look and feel by applying different shapes and filters.
10. Make your own transparent videos
While MP4 videos are the standard for streaming video on browsers today, they do not allow for transparency. Wix’s Transparent Video collection consists of MP4 files, arranged in such a way that they will start playing as soon as the page finishes loading.
Our users can also upload a transparent video of their own, and Wix will automatically convert it into an MP4 that can play on any browser as transparent.
To upload your own transparent video, you’ll need one of the following formats that supports an alpha (transparency channel). These files should also be a maximum of 1GB:
Apple Animation (MOV)
Apple ProRes 4444 (MOV)
PNG Sequence (MOV)
GoPro Cineform (MOV)
AVI uncompressed (AVI)
vp6a Flash Video (FLV)
vp8 & vp9 (+alpha) (WebM)
Tip: Don’t upload a transparent video with a first frame that’s blank or black. It will not be seen at all before it begins to play. And make sure to export the video without the audio channel to not display the sound icon.
By Ron Ron
Head of Product and Art Director, WOW (Wix’s Visual Innovation Team)
