Image and video optimization on webpages has become more and more critical as digital content has come to dominate the internet. Video streaming accounts forms nearly 90% of internet bandwidth. As internet speeds improve we will continue to see a rise in the consumption of video over other forms of media, however internet speeds are not able to quickly stream high quality video yet. By including video content on your webpages you can help your SEO rankings, but if you don't properly optimize your video content, you can severely hinder your site's speed (for more information on this, check out this blog article about testing site speed.
To keep your site relevant going forward devote time to producing image and video content for your blog, social channels, and website. But to avoid issues with page load times and the associated damages to SEO try to implement some of the following strategies.
Many images are downsized by software in the browser to fit in the space provided via CSS. However, the full-size image is sent to the browser consuming large amounts of bandwidth. In search engine optimization, one metric you will be graded on is page size. A large page size (above 2 MB) will start to see some penalties as a result of page load time. Before you go to upload your image, think about how big you want it to be on your page. If it's a full screen background, 1920x1080 might be an appropriate size. If you just want a little graphic, 1920x1080 is overkill. By resizing the image before you upload it, you can help your pages load faster.
Instead of hosting video files on your own servers, try to use online services to host. Youtube, Vimeo, Facebook, and other video hosts allow videos to be embedded on your site while the data is sent from their servers. This means that your page only needs to load the embedded link and not the whole video. When the person visiting the webpage clicks play on the video it sends a request to the video hosting service to stream it and it is then displayed on your webpage.
Video hosting services also use compression and different resolutions to ensure the video loads quickly. This will be more stable than sending the data from your hosting provider and will help to keep your web pages fast!
Just when you thought you had a handle on the whole image sizing issue, here comes retina displays. Retina displays have a higher density of pixels in the same amount of space. One square inch of a retina display has 326 pixels in it, whereas a full HD 50 inch TV has 44 pixels per inch (PPI). Retina displays are more common on mobile devices which means designing a mobile-specific site can include using a different file type for high-resolution phones or tablets. Doing this correctly will increase an image's PPI and keep images looking crisp and clear even on higher resolution devices.
Manual image and video optimization can be a time consuming task, luckily there are a few shortcuts. One great (and free) WordPress plugin that will automatically optimize your images for you is Optimole. Wireframe has no affiliation with Optimole, it's just a good plugin. Optimole will automatically resize images for the display size of the browser being used.
If you would like a personalized analysis of your website, fill out the form below and we can talk about ways to improve your website's performance and search engine optimization to help drive traffic to your website. Oh, and did we mention it's free?
