There are a lot of things to take into consideration when it comes to capturing and retaining a website visitor’s attention. No matter what route you take, chances are you will make the use of media to do so, such as pictures, videos, icons, and any type of graphics, really. Using media is essential for any website. It helps convey ideas, offers entertainment to visitors, and overall, helps create quality content. Here at WebDevStudios (WDS), we’ve learned a thing or two over the years about best practices when it comes to adding visual content to your site. We recommend that you consider the following media solutions and suggestions for your WordPress website.
Make Use of the WordPress Media Library
The Media Library allows users to simply upload media directly to their site and then select where they would like those files to display. It’s a great way to quickly display media onto your WordPress site alongside other content.
While the ease of use is great, the Media Library, unfortunately, comes with a few drawbacks—specifically around asset organization, image optimization, and overall user experience. In order to help get around some of these limitations though, we’ve outlined a few helpful recommendations and best practices to help ensure your site remains at optimum performance level.
Optimizing Images
According to WP Engine, “…images and media files take up a hefty 63% of bandwidth on modern website.” That is a big percentage of a site’s bandwidth that could be used for other more important functions, and a big reason why you want to ensure you’re optimizing your images.
Image optimization is essentially trying to get the best quality image with the least number of pixels. This will ultimately reduce media size and improve site performance. This can be achieved in a couple of different ways.
1. Optimize before uploading to the site.
Image editing software is a proven media solution for your WordPress website because it can be depended on to optimize your images. As you perform this task, you will want to keep in mind both the file format and the overall size of the image.
- The size of the image will be dependent on where it is being displayed on your site. You’ll want to be sure to plan ahead and know where placement will be, so you’re not using up bandwidth. For example, don’t bother uploading large images if you plan to display them at a small scale.
- Different file formats have different purposes. It’s important to understand the differences, so you can save them out accordingly. The three most popular image formats include:
- JPG – You may sacrifice image quality, but you will make up for it with improved site performance.
- PNG – This allows for transparent backgrounds, which is ideal for icons, logos, or high quality images.
- SVG – This is best for vector graphics because it can be scale without losing image quality and retain a small file size.
2. Make use of plugins.
If you are not able to us a media solution like image editing software to optimize images before uploading to your WordPress site, a great alternative is using a plugin. The following WordPress plugins will help to go through and optimize your images with a variety of customizations to help improve site performance. Here at WDS, before launching any site, we typically recommend running reSmush.it to help ensure site performance, especially with image heavy sites.
In addition, a few other recommendations (some at premium cost) include:
The Best Way to Add Video Content
We’re actually going to start with how not to add videos to your site. Although WordPress has a built-in video player media solution, we would advise skipping the WordPress Video Player. This is because:
- Using this method means you would be self-hosting the videos, which can take up value bandwidth on your site.
- You may need to convert videos into multiple file types. This is needed to accommodate different browsers sometimes.
- Embedded videos can be shared on social and searched on platforms like YouTube more easily. This, in turn, drives more traffic to your site.
So if you don’t use the WordPress Video Player, what do you do?
Just because you’re embedding from another site doesn’t mean you loose all control over displaying the video either. For instance, you may want the video to be centered within your content instead of the default left aligned placement. That’s no problem at all, and you have complete control over that placement. If you’re interested in learning just how to do that, WP Engine details how to center align your videos in their great article: Beginner’s Guide: How to Center Align a Video in WordPress.
There are also some great plugin options available to help provide even more customization:
- WordPress Video Gallery plugin from Huge-IT
- This plugin extends the options of displaying your video content by using different layouts, galleries, and pagination options.
- Elite Video Player
- Consider another video player option that supports embeds and self-hosted videos, as well as advertising options and custom controls.
- Video SEO for WordPress
- This is a plugin that helps ensure Google is finding your videos to serve in search results and drive traffic.
Media Library Recommendations
You’ll inevitably find yourself relying on the Media Library from time to time. When that’s the case, no worries; there are a few recommendations we have on hand to help guide you in using it as efficiently as possible.
Videos
First, let’s look at some things to keep in mind for video media:
- Ensure your videos are encoded properly, so they work on various devices. Various encodes include .mp4, .webm, .ogv that can be set accordingly through the use of short codes.
- The recommended video resolution is typically 1280×720 (720p).
- The recommended video frame rate is 24, 25, or 30.
- If you are self hosting, ensure you have enough bandwidth, stories, and speed for your site with your hosting provider.
- To help make things easier, make use of the Gutenberg Video Block. On the desired page, simply navigate to the default Video Block, add the block to your page, and upload your video.
- If you’re not sure where to place a video yet, you can use the Media Library and then reference it when you’re ready.
Images
For imagery in the Media Library, there are a few helpful tips that may make your user experience a bit easier:
- As mentioned before, the Media Library by default has no way to organize your media. To help with organization and planning, you can try the Media Library Folders for WordPress plugin. They have a free version, but the Pro version will also integrate with ACF and NextGen Gallery.
- To avoid duplication of media, it’s good to get into the practice of searching your Media Library first before uploading a duplicate by accident. You may already hold in your library the exact media you’re wanting to use.
- You can also install various plugins that will help in replacing old images with new ones (and their associated links), such as Enable Media Replace.
- Lastly, it’s always good practice to set metadata for all images. The reality is that everyone says they will go back and add it later, but rarely do they. So, it’s better to just add metadata as soon as you upload the image. The metadata will help with organization and WordPress post data.
- Tip: It’s helpful to include a tag (such as logo, icon, infographic). You can then search for tags within the search field to find the desired content.
Media content on the web is a big piece of building a website. Using media solutions correctly can have a huge, positive impact on your WordPress site. These recommendations are just the tip of the iceberg in diving into the world of website media, but they will certainly help get you started on the right path in optimizing your site’s performance with the best tools at hand. If you are looking for more recommendations or to take a deeper dive into improving your site, definitely reach out to us at WDS and we’d more than happy to continue the conversation!