WordPress

Using Images and Video with Your WordPress Blog

Taking Picture
Written by ellice

Images on WordPress

A universal truth: blog posts and web pages with good images and videos will generally rise higher on the search engine results pages than those without.

Visuals are a great thing to add to your WordPress website website. But finding good images or videos 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?

Luckily, there are great websites out there that offer free, awesome imagery with few restrictions.

  • PixabayMore than a million free images, vectors, art illustrations, and videos.
  • PexelsLots of images and videos that are free for both personal and commercial use.
  • UnsplashRepository of free images gifted by generous photographers.
  • GratisographyFree images added weekly for personal and commercial use.

Don’t Force choke your website’s design. Elevate your site with these lessons from StarWars.com.

Optimizing Images

The speed of your website is very important, but a lot of new website owners make a critical mistake that ends up bogging down their load times: not optimizing their images.

Think about it — today’s .jpgs are larger than ever before. Even photos taken with your cell phone can be gigantic.

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 Web Resizer and Optimizilla.

That image at the top of this post? That came from Pexel and was shrunk by 97 percent with very little reduction in display quality. Boom.

Plugins to Consider

Once you have your images resized, there are a couple of plugins you might want to consider using:

  • Adaptive Images for WordPressResizes and optimizes images delivered to mobile devices in a transparent and unobtrusive way to dramatically reduce load times.
  • Lazy LoadOnly 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 CDNUploads 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.

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 based on the number of downloads relative to alternatives?
  • What is its rating relative to other plugins?
  • How long ago was it updated?
  • Is it compatible with the latest release of WordPress?

Optimizing Videos

Unless your video is your featured media, it is a good idea to upload your video to YouTube or Vimeo and then embed the video in your post.

Embedding a YouTube video is easy.

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

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 “< >”.)

Now that your WordPress site is looking sharp with fresh images and video, upgrade your hosting for lightning-fast load times. Get DreamPress today!

About the author

ellice

Ellice comes to us from House DreamHost, the first of her name, Gatekeeper of All Things Content, Protector of the Brand and Ruler of Social Realms.

tl;dr - Ellice is the Content Marketing Manager at DreamHost and oversees all social media and content efforts.