Optimizing Videos and Images on Your WordPress Site

optimize-video-image-wordpress-banner

Videos and images can deliver a lot of information in a short amount of time. When these files aren’t optimized and your website’s performance starts to suffer, your content will end up sending users away instead of generating more conversions.

Need more proof?

Facebook’s industry report from 2015 showed that in the first quarter of that year alone there was on average 43% more engagement with videos and according to Tubular Insights, video content makes users 64% more likely to buy related products.

History reflects this upwards turn for more video content as well, according to Speed Curve’s research, loosely based; ever since 2011 the average website has grown from less than 1MB in size to an average of 3MB as of 2017.

Considering the importance of videos and images, you need to make sure that any video or image you add to your website is properly optimized so that they don’t slow down your website and negatively affect your site’s SEO rating.

How’s your site performing anyways?

Before you start optimizing your images and videos, I recommend you run a quick performance check so you can get an overall idea of what exactly is slowing down your website and to figure out just how much your media content needs optimization.

video-image-optimize-performance-service-10web

I recommend the 10Web Performance Service for a very thorough and in-depth performance check. You can figure out exactly how to optimize your website for a better performance grade and in-turn a higher SEO ranking.

Now that you have an average basis of your site’s pre-optimized performance, it’s time to apply a few staple optimization methods to your media content, you can optimize your website’s speed in multiple ways.

Optimizing your website’s images

Image optimization on a WordPress site has never been easier than when using 10Web Image Optimizer Service. With the Image Optimizer a single click will have your images resized, compressed, and optimized.

Even if it seems too difficult, you can choose “Easy Mode” which lets you choose from 3 different optimization modes (Conservative, Balanced, Extreme).

  • Conservative: this option allows you to compress the size of your images by up to 20% while keeping both the full-sized image and the EXIF data of the image.
  • Balanced: this option allows you to apply up to 40% reduction to your image size (lossy reduction) while keeping your full-sized image but not its EXIF data
  • Extreme: you can reduce the size of your images by up to 90% (extreme reduction), but this method of compression doesn’t save the full-sized image nor its EXIF data

10web-image-optimizer-video-image-optimize

After you’re done, on the right side you’ll notice the service provides you with all the necessary statistics, so you’d know exactly how much your website’s images were optimized.

You can assign different compression modes based on each image’s format, you can convert your images to your desired format before you optimize them, you can choose whether or not to keep the original image or if you want to keep your external image file form (EXIF) data, among many others.

Optimizing your website’s videos

Video optimization works a bit differently since there aren’t any easy-to-use plugins that you can install and optimize your videos with a single click.
That’s why you need to take more of an indirect approach:

  • Make sure that your videos are optimized on your end before you upload them
  • Have your website set up to properly embed or feature your videos on it

Steps to take straight on your video file:

  • Formatting

Your video file needs to be compatible with HTML5, so you’d be able to feature your videos without the need to use any external plugins.

WebM and MPEG-4 (MP4) are the most commonly supported video file formats, while WebM is supported by Firefox and Chrome, MPEG-4 is much more widely supported by all browsers.

Since not all browsers and devices support all formats, it’s important that you encode your videos so that your users can view them regardless of their device or browser.

For example, converting samplevideo.mov to samplevideo.mp4 so you can play your video from your WordPress site. You can use any online video converter to convert your videos to the recommended formats.

  • Compressing

You have to compress your videos prior to uploading them to your site. There are multiple tools to achieve this, but I’d go with the open source software, HandBrake.

HandBrake’s interface is very easy to navigate and on top of compression, you can use it to convert your video files to a variety of modern codecs.

They have their own guide over here, but here’s a quick couple of settings to have your video ready for your WordPress site:

When you first launch HandBrake and select the video file that you wish to compress. From the following screen, right beneath the top bar, there’s the “Presets” menu, these are a bunch of preset settings that allow you to quickly format and compress your video based on what you want to use your video for.

For our purposes, choosing fast1080p30 should do well in most circumstances.

handbrake-presets-image-video-optimize

This will automatically format your video in MPEG-4 format, keeping the high source quality of the video and its size relatively small. Afterward, in the “Summary” tab below, you need to check the box that says “Web Optimized.”

handbrake-web-optimized-image-video-optimization

This will allow progressive downloading for your MPEG-4 formatted video, where its data is reorganized and rewritten after it’s encoded. This way your featured video will start playing immediately instead of downloading it first before playing it.

Finally, as an optional step, you can head over to the “Video” tab, over to the “Quality” slider.

handbrake-slider-quality-video-image-optimize

Through this slider, you can further fine-tune the balance between your video’s size and quality to your exact needs, and that’s about it!

You just need to add the directory folder at the very bottom, to specify where you want to save your video and then press the “Start Encode” button at the top.

Steps to take on your website:

  • Hosting

Your hosting plan matters a great deal when it comes to self-hosting video files on your WordPress website. In general, unlike pages, photos/videos take up quite a lot of space.

Hosting your videos on other servers or even featured video platforms and then embedding them on your website will always do the trick.

Otherwise, there are some things that you need to look out for when it comes to your hosting plan:

    1. Storage: First and foremost, photos/videos take up space and depending on the length and quality of your video, you might run out of storage much quicker than you might think. That’s why when choosing a hosting service for your website, make sure your hosting plan provides you with ample solid-state-drive (SSD) storage so you can upload so you can host your videos without any problems.
    2. Traffic: In accordance with the statistics above, hosting videos on your site is a surefire way of driving traffic to your website. It goes without saying that hosting videos on your own site is a massive resource hog, and as such you need your host to provide you with the necessary computational capabilities that would host your videos without any problems. Which is why it’s very important that your host provides you with some sort of scalability, such as, Elastic scaling so that even in peak traffic you can rest assured that your site won’t go down.
    3. Content Delivery Network (CDN): The two steps above are definitely your priority for your hosting plan, but adding a CDN to your site will not only increase the overall performance of your site but the responsiveness and seamlessness of your streamed videos as well, no matter where your users visit from.

You can get all of these features, in one handy package with our 10Web Cloud Hosting Solution. Depending on your subscription plan, you’ll have all the necessary SSD storage space, scalability, multiple data centers across the world, and much more.

  • Multiple device functionality

In the formatting section, I mentioned how important it is to encode your video in a format that’s supported by as many devices and browsers as possible, such as MPEG-4.

While true, sometimes you might like to upload your videos in multiple formats and display your video in a specific format that best suits the visiting user’s device or browser.

For example, in the case of a single format video, let’s say you’ve added your MPEG-4 video named samplevideo to your media library, then on whichever page or post you’d like to add the video you’d add the shortcode:

 [video src=”video-samplevideo.mp4”]

switching samplevideo with the name of source video that is in your library.

Now to add other video formats so they would play on their respective compatible devices, you’d put this shortcode after adding the other video files to your media library:

[video webm=”samplevideo.webm” flv=”samplevideo.flv” mp4=”samplevideo.mp4”]

You only need to specify the correct file format of the videos you’ve uploaded in your media library, such as, .MP4, .WEBM, .WMV, .FLV, .OGV, .M4v

The best part is you don’t need to specify all the specific devices that correspond to each format, WordPress automatically detects whichever video format the user’s device supports and loads the corresponding video on their device.

  • Specifying video parameters

Ensuring your videos play at a consistent size across all devices is one of the easiest yet most effective things you can do to increase your site’s responsiveness. Simply add your desired width and height that you’d like your video display as, before or after src to the samplevideo shortcode from earlier, for example:

[video width=”1280” height=”720” src=”video-samplevideo.mp4”]

This way your site will allocate the necessary bandwidth beforehand, instead of wasting precious load speed time as the video player resizes itself to fit the user’s device.

  • Scalable video resolution

One final thing that you can do in order to have your video be as responsive and catering to all your users, is to provide the functionality to have your videos scale their resolution based on your user’s device.

This step takes a little bit more than our previous steps, but if you’re willing to have that functionality then it’s all worth it.

First, you need to add your source video to your media library in multiple resolutions. Let’s name the smaller sized video samplevideolow, then simply add this code to your HTML:

<video controls> 
   <source src="samplevideolow.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="samplevideolow.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="samplevideo.mp4" type="video/mp4"> 
   <source src="samplevideo.webm" type="video/webm"> 
</video>

This way, if a user is visiting on a device with a smaller screen, your site will play the smaller video providing the best possible experience that optimizes based on the user’s device. This is especially useful if you’re looking to optimize just a step further for mobile visitors of your site.

There you have it. Some quick and easy ways on how to first test your website’s performance and then optimize your images and videos accordingly. If there are any other tricks or methods that you use to optimize your own videos, make sure to let us and the rest of our readers know in the comments below.

 

Check your website's performance and optimize your images with 10Web

Start your free month and use all of 10Web’s 1-click solutions immediately. An all-inclusive platform to host your website, optimize your images, check your website’s performance and so much more.

Get started free
Garbis Vizoian
Garbis Vizoian
If Garbis is not in front of his computer screen, writing articles and exploring the world of WordPress and tech at 10Web, he must be painting Warhammer, playing video games or screaming his lungs out in his metal band.

Leave a comment

Your email address will not be published. Required fields are marked *

Your email address will never be published or shared. Required fields are marked *

COMMENT

NAME *

WEBSITE

Cancel reply
Arto

Arto

10Web Founder

Before You Leave...

Do you have any feedback to help us improve our offer?