Using Images and Video with Your WordPress Blog

Blog posts and pages with good images and videos will generally have better search engine results than those without. They are a great item to add to any post or page. Finding good images or videos, however, for your blog posts and pages that do not have copyright issues can be a challenge. Sure you can pay for images from sites like iStockPhoto and ShutterStock. But what if you have budget constraints? And who has the time to take their own photos? Good news! There are some great websites that offer excellent images that allow you to use them in your website with no or minimal restrictions. Our favorites include:

• Pixabay – over 670,000 free images, vectors, art illustrations, and videos (Creative Commons Zero license)
• Pexels – completely free images and videos you can use (their videos are really unique)
• Unsplash – repository of free images to use (Creative Commons Zero license)
• Gratisography – free images to use (free of copyright restrictions)

Once you find great images and video to use on your site, the next step is to optimize them.

Optimizing Images

Speed of your website is very important. One mistake new users sometimes make when creating their website is to not optimize their images. Today’s images have become larger and larger. Even photos taken with your cell phone can be quite large.
By optimizing your images, you can keep the amount of data that a user’s browser needs to download to view your blog and image as small as possible and not lose quality. This is even more important for mobile devices, which are often downloading the data over a slower network.
The first thing to do is resize your images. High resolution images take too long to download and are not required to display on a mobile display or monitor. You can usually reduce the image resolution without affecting display quality. And you don’t need Adobe Photoshop to do it. There are quite a few good online tools to do this, such as:

http://webresizer.com/
http://optimizilla.com

The image above came from Pexel and was reduced 97% with very little reduction in display quality.
Once you have your images resized, there are a couple of plugins you might want to consider using:

• Adaptive Images for WordPress. Resizes and optimizes images delivered to mobile devices, in a transparent and unobtrusive way, so that the total download time is dramatically reduced.
• Lazy Load. Only loads an image on the page when it becomes visible to the user instead of having to load all images to display a page.
• DreamSpeed CDN. If you want super high performance image delivery, this plugin delivers it. It uploads your WordPress images to the Fastly content distribution network for quick global delivery. This does cost both for DreamObjects storage, which is relatively inexpensive, and CDN charges, but it can be worth it. Learn more about DreamSpeed CDN here.

There are quite a few other plugins you could use. Making images responsive for mobile devices and lazy loading images are two of the best ways to improve image delivery. When looking for a good plugin, check four things:

• How popular is the plugin by number of downloads relative to other alternative plugins?
• What is its rating relative to other alternative plugins?
• How long ago was it updated?
• Is it compatible with the latest release of WordPress?

Optimizing Video

Speed is also important when optimizing video. Unless your video is your featured media, it is a good idea to upload your video to YouTube (or Vimeo) and simply embed the video in your post. If it the feature media, you will need to upload. But embedding is always better.
Embedding a YouTube video is easy. All you need to do is:

1. Upload the video to YouTube
2. Copy the embed link
3. Past the embed link in your post/li>

If you want to customize the size of the video, add the following steps:

1. Change the embed link with the format below
2. Replace “w” with the actual width, “y” with the actual height and youtube_url with the actual URL.

For example, from this embed link:

<iframe width="560" height="315" src="https://www.youtube.com/embed/theYouTubecode" frameborder="0" allowfullscreen></iframe>

Change it to:

<embed width=”560” height=”315”> https://www.youtube.com/embed/theYouTubecode</embed>

(Except use “[ ]” instead of “< >”.)

If the video is the only content of the post, you’ll want to consider these options:

• Indicate that the post contains video with something like this in the post title: “(Video)”. You’ll want to edit the word “video” out of the permalink.
• Give some context for the video. Summarize what the video is about in the post in a few sentences so the viewer has some idea of whether or not to view it. Downloading on a mobile device takes time. If the video is just part of a longer post, this won’t be necessary.

Good luck with adding great images and videos to your WordPress blog posts and pages!

Share this

Share on FacebookPlus on Google+