How to Skillfully Upload Media to Improve Performance and Save Bandwidth

Image credit: Pixabay

Most modern website owners and content marketers use a variety of different media files to enrich the content of web pages and better engage people. The types of media files typically uploaded to websites include images, graphics, videos, PDF lead magnets, and more.

While media has a powerful role to play in making a website stand out, it’s imperative to remember that uploading media impacts both website performance and server bandwidth consumption.

Inefficient media upload leads to unoptimized files accumulating on your website and slowing down page load times. Research by Akamai Technologies led to some interesting findings on slow-loading web pages:

• A 100-millisecond delay in website load time reduces conversion rates by 7 percent.
• A two-second delay in web page load time increases bounce rates by 103 percent.
• 53 percent of mobile site visitors will leave a page that takes longer than three seconds to load.

Read on to get five tips for efficiently uploading media to improve website performance and save on bandwidth.

Serve Media From a CDN

A content delivery network (CDN) is a global network of connected servers on which you can cache your website’s static content, including HTML pages, images, and videos. By using a CDN, you can improve page load times for website visitors who are located far from your website’s primary server.

The CDN distributes web pages and media files from the closest server on the network to each visitor. For example, if you host your website in Berlin and a visitor in San Diego requests a media-rich web page, the content will be served from a server in California rather than all the way from Berlin. When data has less distance to travel, it takes less time to load, which is great for website user experience.

Another benefit of CDNs is reduced bandwidth consumption because the amount of data that your website’s origin server needs to transfer is much lower. Less bandwidth consumption lowers website hosting costs.

Use Image and Video Management Solutions

Dedicated end-to-end media management solutions normally come with advanced functions to facilitate more efficient media upload. For example, the cloud-based Cloudinary service provides a Ruby on Rails SDK for skillful image and video manipulation and optimization.

Web developers using the Ruby on Rails framework can use Ruby file upload capabilities to serve bandwidth-optimized videos and images in their web applications. Media management solutions like Cloudinary let developers programmatically upload optimized media files in other languages and frameworks like PHP, jQuery, and Javascript.

Use Third-Party Video Hosting

Video files are typically hundreds of megabytes, and as more websites use high-quality video, the size of video files will only increase. Many website owners upload their video files directly to their website’s server and distribute the content from there. Bandwidth consumption can quickly become untenable if you have a lot of video content on your website.

The alternative to uploading videos directly to your website is to upload them on third-party video hosting sites. You can easily embed videos from these websites on your web pages using some simple HTML code. Some examples of popular third-party hosts are YouTube, Vimeo, and Dailymotion⁠—websites that the majority of Internet users know about.

Aside from saving a lot of bandwidth, third-party video hosts do most of the work to ensure your video files play on all types of visitor devices. YouTube enables your content to reach a wider audience to the point that you can monetize your channel if you get enough people watching and subscribing.

Compress Your Media Files

You can often trace much of the reduction in website performance to the problem of not compressing your media files before uploading them. There are many free and paid that compress all types of media to reduce their size.

Compression is either lossless or lossy and it’s important to distinguish between them. With lossless compression, you can reduce the size of media files without affecting their quality. Lossless compression typically eliminates redundant information like metadata that doesn’t impact how the image or video looks.

Lossy compression permanently deletes some data from media files. JPEG files use lossy compression, and the reduction in file size is typically substantial. You can choose a specific degree of lossy compression in most compression tools to find an acceptable quality level for your needs.

Lazy Load Images and Graphics

Pretty much every modern website heavily uses images, whether in the form of infographics, product images, logos, and even memes. HTTP Archive data at the time of writing shows a median desktop page size of 1896.8 kilobytes of which images account for 971.5 kilobytes (51% of the total size).

You can’t get rid of images and you’ve already seen how to compress them, however, you can further reduce their impact on performance by using lazy loading. The lazy loading technique defers image loading until the point when the user actually needs to see the image. Normally, websites load images up front, as soon as the user tries to load the page.

Lazy loading not only leads to quicker load times; it also reduces bandwidth consumption. If visitors never reach the point of needing to view your images, they don’t get loaded. Therefore, the total bytes transferred from the server to end users are reduced, which leads to cost savings.

Conclusion

Whether you are a developer wanting to reduce bandwidth consumption in your web app or a website owner looking to improve page speed, these tips will help you efficiently upload media to get the results you want. Using media files online is unavoidable, and optimizing them for performance is a smart move.