Your website’s look and feel is just as important to your end user as its loading speed. Pairing great web design with performance ensures every site you build is both outstanding to the eye and seamless to use.
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: Without quality visuals and quick loading times, visitors simply won’t have the chance or patience to engage with your design.
While website imagery—such as product photos, artwork, or event videos—plays a big role in the story your web design relays to visitors, these visual elements have the potential to slow down your site if they’re not properly optimized. Follow these best practices for media optimization to ensure your site looks great, and performs even better.
Thanks to our friends at Wix for sponsoring this blog post!
1. Upload the right image sizes
You’ll always want to upload the best quality image available. For starters, this means finding imagery and media that both look great and will upload speedily.
Generally speaking, 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.
2. 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 typically 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 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.
?? Pro tip:
In the 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).
3. 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 its 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. You can adjust this default setting to make sure your images look sharp, and load fast.
4. 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 loading. Have no fear: That’s known as lazy loading, and it’s a placeholder for the real (optimized) image.
In order to speed up loading time and show visitors something as soon as they land on your site, the browser first displays a small, blurred version of the image. In other words, it “lazily” downloads the best quality images to optimize them for the display’s dimension. As images scroll into view, the high-resolution images download, replacing the Low Quality Image Placeholder (LQIP) currently displayed.
Apart from improving user experience, LQIP also helps your website’s SEO, since it provides search engines with indexed images, instead of a blank or a broken image icon.
5. Know 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.
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.
?? PRO TIP:
To make the most of SVGs on your 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. For example, SMIL animations contain some insecure content and harm runtime performance, thus modern browsers do not support them.
6. 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.
As a rule of thumb, videos uploaded to your site should be a maximum of 1GB. Before uploading your video, check which video formats are compatible with the website platform you use. Some of the most popular formats include AVI, MPEG, MPG, MPE, MP4, MKV, WebM, MOV, OGV, VOB, M4V, 3GP, DivX, XVID, MXF, WMV, M1V, FLV and M2TS.
7. Select the right color video background
When adding a video to your site, keep in mind that parts of the video may be cropped or hidden for some visitors depending on the device or browser they use. The video content itself, however, 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.
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 may look different on different browsers. One possible solution to overcome the color variation is to define a transparent background for the video.
8. Choose video over GIFS (mostly)
A GIF’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 only start playing when all content frames are available. Since you cannot optimize GIFs for web streaming, using them can significantly slow down a page’s loading speed.
If you’re deciding between a GIF and a video, stick with the latter. Videos support almost unlimited color palettes, come with controlled playback and can be optimized for web streaming. They also start playing on the web as soon as the first frame is available.
Use GIFs in these cases on your 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.
Design websites that look great and perform even better
Building on Wix means that the foundations are covered and performance doesn’t come at the sacrifice of your site’s appearance and style.
Every time you add an image to your website, Wix automatically optimizes it to ensure high quality and quick load time on any device. No need to worry about resizing, compressing, or converting your images to a modern format like WebP—Wix has you covered.
Our website infrastructure and media servers are designed to optimize for video from the get-go. Enjoy full creative freedom and elevate your web design using fun features—like Transparent Video, VideoBox, and Video Mask — without hurting your site’s performance. ■
About Wix: Wix is the industry-leading website creation platform trusted by 230M+ users worldwide. Since 2006, Wix has empowered businesses, entrepreneurs, enterprises and creators to build, manage, and grow their online presence—all from one place. With fully-managed infrastructure and enterprise-grade protection, every Wix website is secure, reliable, and engineered to support limitless growth. Start building today.
Find more Process stories on our blog Courtside. Have a suggestion? Contact [email protected].
