Good design and website performance are important for visitors to a website. The look and feel of your website are just as important to end users as its loading speed. Website bounce rate also emphasizes how important usability is to the success of your website. If your website does not display quality visuals with fast loading times, you can be sure that visitors will immediately leave your website.
Therefore, visual elements are very important for a website, they can potentially slow down your site if they are not optimized properly. In this article, we have cited practices you can follow to optimize your media to ensure your site looks good and performs better.
1. Upload the right image sizes
In general, your file size should be no larger than 25 MB (or 15 MB for GIFs) to ensure efficient loading. Additionally, you’ll want to start with uncompressed or RAW files to maintain the quality of your visuals. This refers to a file that contains 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 typically much smaller than equivalent PNG images—sometimes up to 10 times smaller. Due to its smaller size, you usually want to choose JPG over PNG (Portable Network Graphic).
When deciding between JPG or PNG on your site, keep in mind that these two formats resize in different ways. JPG uses algorithms to reconstruct only an approximation of the original data when it is resized and sent over the web. This is called lossy compression, which means some of the original data is permanently deleted or “lost.” When PNG is resized, the format uses a compression algorithm that allows the original data to be perfectly reconstructed (known as loss-less compression).
In essence, if you want to maintain image quality, you can choose PNG. The trade-off here means working with larger files that can potentially compromise your site’s performance.
PRO TIPS:
- In the case below, you should choose PNG over JPG.
- You need transparency in the image (for example, you want the subject of the image, or the foreground, to appear as if it were cut out).
- You need very high quality and sharpness, such as in images with small text (e.g. screenshots) or rich 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 use has its own standards when it comes to image compression. Therefore, first find out the default settings for each image compression platform, to ensure your images look sharp.
4. Don’t stress about lazy loading—it’s a good thing
To speed up loading times and show visitors something as soon as they land on your site, the browser first displays a small, blurry version of the image. In other words, it “lazily” downloads the highest quality images to optimize them for the display dimensions. As the image scrolls into view, a high-resolution image is downloaded, replacing the Low Quality Image Placeholder (LQIP) currently displayed.
In addition to improving user experience, LQIP also helps your website’s SEO, as it provides search engines with indexed images instead of blank or broken image icons.
5. Know when to use SVG vs. PNG
SVG has vector-based content, which instructs the browser what to display through a complex network of lines, points, shapes, and algorithms. This makes SVGs easier to create than PNGs, because their size depends on the number of elements and “nodes” they contain. PNG is a raster-based format (as opposed to the vector format SVG) and consists of a grid of pixels that is high quality, but difficult to resize.
SVG remains sharp at every resolution and size, even if the viewport dimensions change. When considering the performance burden on image size, use SVG rather than raster formats such as PNG, unless the SVG is very complex (for example an SVG depicting the coastline of Norway) and the actual element dimensions, compared to the image, are small.
PRO TIPS:
To get the most out of SVGs on your site, upload SVG files up to 250KB in size.
Additionally, make sure to avoid content that could potentially cause security issues or browser crashes. For example, SMIL animations contain some unsafe content and harm runtime performance, so modern browsers do not support them.
6. Choose the right video formats
Choosing to include some videos on your website is not a bad decision. Delivering a more precise message, accompanied by entertainment in the form of animation, movement or sound, can help visitors feel more at home and easily engage with more content. Whether promotional or simply decorative, stick to these basic rules to ensure your videos appear in the highest quality, without impacting page loading speed.
As a rule of thumb, videos uploaded to your site should be a maximum of 1 GB in size. Before uploading your video, check which video formats are compatible with the website platform you are using. 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 videos to your site, keep in mind that some videos may be cut off or hidden for some visitors, depending on the device or browser they use. However, the video content itself will appear to cover all component dimensions.
Video components are calculated based on the full dimensions of the uploaded media, and not just the visible portion. In this case, you may want to add color space to offset the rest of the background and provide visitors with the best aesthetic experience.
Different browsers use different color spaces, so when you use a color as a video background and choose the same color as a page background, this color space may look different in different browsers. One possible solution to deal with color variations is to define a transparent background for the video.
8. Choose video over GIFS (mostly)
A simple GIF animation can grab visitors’ attention and enhance your web design. However, GIFs have some downsides: You can’t control playback on your site, which can hurt performance, accessibility, and overall user experience. GIFs also only start playing when all frames of content are available. Since you can’t optimize GIFs for web streaming, using them can significantly slow down page loading speeds.
If you’re deciding between GIFs and videos, choose the latter. Video supports a nearly unlimited color palette, comes 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 the following cases on your website:
If your content animation contains multiple frames and small dimensions (e.g. 100X100), we recommend using a GIF. When you have text content in your video and you want to keep it easy to read.
Conclusion
Don’t underestimate the media you use on your website. Apart from the visual appearance or media selection, the size and loading speed have a big influence on the performance of your website. You can follow the steps above, or save them as a guide if you want to improve your web performance later.
Source:
Website: www.foxcreation.net
Instagram: foxcreationindo
