•  
  •  

How to Optimize 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. That’s why the general question “How to optimize your WordPress website” has two essential parts: “How to optimize the videos on my site” and “How to optimize the images on my site.”
In this article, we’ll first talk about why exactly you have to optimize your website’s videos and images, then discuss each subtopic in more applicable terms, and close with answering a few frequently asked questions on the topic of optimizing videos. Let’s dive right in and optimize everything WordPress!

  1. Why do I need to optimize videos and images on my website?
  2. How’s your site performing now?
  3. Optimizing your website’s images
  4. How to optimize images for WordPress
  5. Optimizing your website’s videos
  6. What is video optimization in SEO?
  7. How to optimize videos for YouTube

Why do I need to optimize videos and images on my website?

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 fast is your website now?

Before you start optimizing your images and videos, I recommend you run a quick Google PageSpeed score 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.

You can also check your score from 10Web dashboard.

I recommend the 10Web WP Speed Optimization Service for a very thorough and in-depth speed check. You can figure out exactly how to optimize your WordPress website for a better PageSpeed score 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. Also note that you can optimize your website’s speed in multiple ways but we’re not going to discuss them here.


Optimizing your website’s images

This is how image optimization works in general. As you know, an image is made up of a bunch of pixels and the more pixels it has, the higher its quality. But guess what? The human eye is unable to perceive the difference if you just get rid of the redundant ones. That’s the principle behind all image optimizers: You reduce the number of pixels thus decreasing image size, but the quality change of the image is not visible.
Since images typically take up a bulk of website size, optimizing them is an integral part of optimizing your website in general. And optimized websites, in turn, lead to happier visitors and drive conversions. Simple!


How to optimize images for WordPress

Image optimization on a WordPress site has never been easier than when using 10Web Image Optimizer service, which is absolutely free in its premium version. 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.

If you wanna learn more about the five key things to look for in an image optimizer, check out this article.

Optimizing your website’s videos

Optimizing video 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

How to optimize 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.

How to optimize your website for video:

  • 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.

What is video optimization in SEO?

Optimizing videos for SEO means increasing the frequency with which people stumble upon your website on search engines but making sure that when they do see your video, they’re on their way to a potential conversion is also a part of it. Here’s what you can do to SEO-optimize your videos:

  • Upload your videos on your own website. YouTube and Vimeo are great for putting your brand out there, but you don’t want people to Google something, go to YouTube, notice another blogger talking about the topic, and leave to browse YouTube instead. You want to send people to your website through the video. Luckily, with 10Web hosting, uploading videos, unless they’re super long and high quality, won’t be an issue.
  • Keep the title of the video short and to-the-point. What is the user getting out of it?
  • Do some keyword research and elaborate on the topic of the video down in the description using those keywords. Don’t overdo it, but make sure people who are looking for the video can find the video.
  • Never forget about metadata or search engines will ignore you entirely!
  • Use the right thumbnail.
  • Perform these steps of SEO-optimization before you compress the video to save the metadata.

How to optimize videos for YouTube

In general, it is recommended that you host your videos on your site, of course, but sometimes what you needs most is the exposure a big platform like YouTube can provide. To make sure all that effort you’ve invested in creating that video pays off, here are the main tips to follow to optimize videos for YouTube:

  • Analyze your video topic in the same way you analyze the topics for your other channels: identify keywords, research the competitors, gauge the general relevancy.
  • Rename the final file you upload to something that contains the keyword. Say, instad of having “videosequence1,” put “tip-for-beginner-blogers.MP4.”
  • If you’re able to insert your main keyword into your video title organically, do so. If not, refrain.
  • Start off the video description with the most important 100 characters, as those are the ones viewers will see unless they click “Read more.” But feel free to give more information after those 100 characters using the keywords you’ve come up with.
  • Definitely make use of categories and tags to help YouTube and the potential viewers contextualize your video. But before choosing a category, make sure you’ve researched the competitors in that category and you compare well.
  • It’s absolutely crucial that you use a custom thumbnail image of a 16:9 ratio and 2 Mbs max. The random blurry screenshot won’t enhance video performance.
  • Do the bit of extra work and create an SRT file to add subtitles and closed captions to be more inclusive and international.
  • And finally, make sure to set up YouTube cards, meaning those spots that come up usually at the end of a video asking you to answer a question or redirecting you to another related video by the same creator.

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.

Don't forget to share this post!

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