Videos and images can deliver a lot of information in a short amount of fourth dimension. When these files aren't optimized and your website's performance starts to endure, 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 almost why exactly you have to optimize your website's videos and images, and so talk over each subtopic in more than applicative terms, and shut with answering a few oftentimes asked questions on the topic of optimizing videos. Let'southward swoop 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'due south 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 study from 2015 showed that in the first quarter of that twelvemonth solitary there was on boilerplate 43% more than engagement with videos and co-ordinate to Tubular Insights, video content makes users 64% more likely to buy related products.

History reflects this upwardly turn for more video content also, according to Speed Bend's inquiry, 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 demand to brand sure that any video or prototype yous add to your website is properly optimized so that they don't slow down your website and negatively affect your site'due south SEO rating.

How fast is your website now?

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

You lot tin likewise 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 employ a few staple optimization methods to your media content. Also notation 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 full general. As you know, an image is made up of a bunch of pixels and the more pixels it has, the college its quality. But guess what? The human center is unable to perceive the departure 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 plow, lead to happier visitors and drive conversions. Elementary!


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 admittedly 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 hard, you can choose "Easy Way" which lets you choose from 3 different optimization modes (Conservative, Balanced, Farthermost).

  • Bourgeois: 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 paradigm.
  • Balanced: this option allows yous to employ upwards to 40% reduction to your image size (lossy reduction) while keeping your total-sized image but not its EXIF data
  • Farthermost: you lot can reduce the size of your images past upwards to 90% (farthermost reduction), just this method of compression doesn't save the full-sized prototype nor its EXIF data

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

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

You tin assign different compression modes based on each image'south format, you can catechumen your images to your desired format before yous optimize them, you can choose whether or not to keep the original image or if y'all want to keep your external image file form (EXIF) information, amongst many others.

If you wanna larn more about the 5 primal things to look for in an image optimizer, check out this commodity.

Optimizing your website's videos

Optimizing video works a bit differently since at that place aren't any easy-to-use plugins that you lot 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 finish before you upload them
  • Have your website fix 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, then you lot'd be able to feature your videos without the need to use whatsoever 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 back up all formats, it's important that yous 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 lot tin can play your video from your WordPress site. Yous tin use whatever 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, merely I'd go with the open up source software, HandBrake.

HandBrake's interface is very piece of cake to navigate and on height of compression, you can use it to convert your video files to a variety of modern codecs.

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

When you first launch HandBrake and select the video file that y'all 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 yous to apace format and compress your video based on what you want to utilise your video for.

For our purposes, choosing fast1080p30 should exercise 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 bank 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 subsequently it's encoded. This way your featured video will start playing immediately instead of downloading it first before playing it.

Finally, equally an optional footstep, you can caput 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 remainder betwixt your video's size and quality to your exact needs, and that's about information technology!

Yous just need to add the directory binder at the very lesser, to specify where you want to save your video and then printing the "Start Encode" push at the top.

How to optimize your website for video:

  • Hosting

Your hosting plan matters a not bad deal when it comes to self-hosting video files on your WordPress website. In full 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 volition ever exercise the fox.

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

    1. Storage: First and foremost, photos/videos accept up infinite 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, brand sure your hosting programme provides you with ample solid-state-drive (SSD) storage so you can upload and then you can host your videos without whatever problems.
    2. Traffic: In accordance with the statistics above, hosting videos on your site is a surefire way of driving traffic to your website. Information technology goes without saying that hosting videos on your own site is a massive resources hog, and as such y'all need your host to provide you with the necessary computational capabilities that would host your videos without any issues. Which is why it'south very important that your host provides y'all with some sort of scalability, such as, Rubberband scaling so that even in summit traffic you tin rest assured that your site won't go down.
    3. Content Commitment Network (CDN): The two steps higher up are definitely your priority for your hosting plan, but calculation a CDN to your site will not only increase the overall operation of your site merely the responsiveness and seamlessness of your streamed videos likewise, no matter where your users visit from.

You lot can become all of these features, in one handy package with our 10Web Deject 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 than.

  • Multiple device functionality

In the formatting section, I mentioned how of import it is to encode your video in a format that'south supported by as many devices and browsers as possible, such as MPEG-four.

While truthful, sometimes you lot might similar to upload your videos in multiple formats and display your video in a specific format that best suits the visiting user'south device or browser.

For case, in the instance of a single format video, let'due south 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 together the video you'd add the shortcode:

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

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

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

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

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

The all-time function is you lot don't demand to specify all the specific devices that correspond to each format, WordPress automatically detects whichever video format the user'due south device supports and loads the respective video on their device.

  • Specifying video parameters

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

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

This style your site will allocate the necessary bandwidth beforehand, instead of wasting precious load speed fourth dimension every bit the video player resizes itself to fit the user's device.

  • Scalable video resolution

Ane final matter that you tin do in club to take your video be as responsive and catering to all your users, is to provide the functionality to take your videos scale their resolution based on your user's device.

This step takes a footling scrap more than our previous steps, but if yous're willing to have that functionality then information technology's all worth it.

Get-go, 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 together this lawmaking 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          " blazon="          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 all-time possible experience that optimizes based on the user'due south device. This is specially useful if you're looking to optimize but a footstep further for mobile visitors of your site.

What is video optimization in SEO?

Optimizing videos for SEO ways 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 exercise to SEO-optimize your videos:

  • Upload your videos on your own website. YouTube and Vimeo are peachy for putting your brand out in that location, only you don't want people to Google something, go to YouTube, notice another blogger talking about the topic, and leave to scan 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.
  • Continue the championship of the video brusk and to-the-point. What is the user getting out of it?
  • Exercise some keyword enquiry and elaborate on the topic of the video down in the clarification using those keywords. Don't overdo information technology, but make certain people who are looking for the video can find the video.
  • Never forget most metadata or search engines will ignore you entirely!
  • Utilise the right thumbnail.
  • Perform these steps of SEO-optimization earlier you lot compress the video to salve the metadata.

How to optimize videos for YouTube

In general, information technology is recommended that you host your videos on your site, of course, but sometimes what yous needs almost is the exposure a big platform similar YouTube tin can provide. To brand 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 style yous analyze the topics for your other channels: identify keywords, inquiry the competitors, gauge the general relevancy.
  • Rename the terminal file yous 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 master keyword into your video title organically, do so. If non, 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 gratuitous to requite more information after those 100 characters using the keywords you've come up upwards with.
  • Definitely make utilise 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 y'all compare well.
  • It'south absolutely crucial that you use a custom thumbnail image of a 16:9 ratio and 2 Mbs max. The random blurry screenshot won't raise video performance.
  • Exercise the flake of extra piece of work and create an SRT file to add subtitles and closed captions to be more inclusive and international.
  • And finally, make sure to fix YouTube cards, meaning those spots that come 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 yous have it. Some quick and easy ways on how to first test your website'due south performance and then optimize your images and videos accordingly. If there are whatsoever other tricks or methods that you use to optimize your own videos, brand sure to permit u.s.a. and the remainder of our readers know in the comments below.

Automated PageSpeed Boost With #ane WP Hosting

Go ninety+ PageSpeed Score and boost Core Web Vitals past migrating your client websites to 10Web – all within minutes, all automatically.