Making the WordPress Media Library Your Friend

This entry is part 2 of 3 in the series Optimizing WordPress

Images are one of the most important part of a website, but also basically the most technically challenging part — at least if you want to do them right. I previously wrote about optimizing your images for your website for free. It’s still my tride and true method, but it’s a very manual process and can take a bit of time. Compound that with the limitations of WordPress’ Media Library and managing your images on your site can become a real drain on creativity and/or productivity.

I’ve been putting special attention to this in my latest clients’ sites and have a few new WordPress tools that I’m finding increasingly indispensable when it comes to image management and optimization. Lucky for you, you’re here! You get to Power Manage your images now too.

OBSTACLE #1: Image Sizes are CRAZY!

That is the main reason I wrote my optimize image article. Website owners really should be responsible enough to resize their images in a responsible way that is good for your server and make your pages load as quickly as possible. But let’s face it: some folks just don’t care! Does that mean their sites have to suffer? — YES! Ok… not really. At least, there’s a few good tools to help minimize the suffering of their servers and visitors:

Imsanity

Imsanity-settingsThis plugin get’s plenty of press, but it really should be a Core function of WordPress at this point. Think about your typical user. They take pictures with their bleeding edge technology camera and upload their 3000 pixel wide images and then wonder why it takes 10 seconds to load the page on their phones. Imsanity brings “sanity” to your “IMages” (I’m just guessing that’s where the name comes from. If not… come on!).

Imsanity will automatically shrink your images down to a set height or width that you designate. For example, on a certain site, I know that the content area of the blog is never going to be wider than 800px. So there’s no reason why any images should ever be 801px wide or more. So now, when said website own uploads their 3000px wedding shots, they are automatically shrunk down to 800px wide and no wider.

There are also options for doing some lossy compresion as well (which I covered in my tutorial) which is outstanding.

Next, every theme has presets for the sizes of the images it uses. If you change them or update them, the old sizes are still stuck on your server and most often, the theme doesn’t even find the new sizes. Why? You need to regenerate your thumbnails.

Force Regenerate Thumbnails

Even if you regerneate your thumbnails, you are still taking up totally needless space by keeping the old sizes on your server. This plugin deletes the sizes that are no longer supported and generates the ones you need. It’s awesome. That is all.

OBSTACLE #2: I Can’t Find Anything!

I absolutely will NEVER find an old image that I need for a new post. Even if I’ve called it exactly what it looks like, but THAT name I’ll never remember when I need it a year from now. The Media Library simply doesn’t have a good way to categorize images or general media files in a way that makes sense for browsing and selecting your images while you are in the Post Edit screen. Enter Enhanced Media Library.

Enhanced Media Library

media-library-darthThis is a tool I install on basically every new clients site now. I’ve tried several others that attempt to solve this same problem and they all either fall short or end up hogging crazy amounts of server resources. Here’s why you need this and you needed it years ago.

Enhanced Media Library basically takes the concept of WordPress taxonomies (think “Categories” that you have in Posts), and applies them to your images. Why is that awesome? Because it doesn’t bog down your system because it’s just using logic that WordPress already has. So it’s quick. Then, why do you care? Because now you can Filter your images according to whatever you want.

Let’s say you are a school Humanities website. You have History, Philosophy, Art, English, etc. Each of those departments does articles on Book Reviews, Films, Star Alumni, etc. Now, when you upload a mug shot of a star alumnus, you can tag it as “Star Alumni, History”. Then when you think “Oh, I’m sure we uploaded a mug of Johnny Class at some point, you just filter by History, then Alumni and bam… there’s his mug!

Trust me, if you have a lot of images, you needed this years ago.

OBSTACLE #3: My Images Are Killing My Shared Hosting Environment!

The last thing that’s super important is serving up your images quickly. This is particularly challenging when you are using a shared host like GoDaddy or HostGator. Their environments just were not designed to dish up large images quickly, especially over long distances. Of course, if you optimize manually you do yourself and your server a huge favor, but here’s a few more automated options that you could use.

JetPack Photon

photonThis is the easiest and perhaps most effective way to lighten the load on your server and deliver up your images more quickly no matter where your visitors are. Jetpack’s Photon is a Content Distribution Network (CDN) just for images. What you’ll see, is that once Photon is activated if you look at your code, you’ll see that the source of the image no longer begins with your domain (like mattcromwell.com). Instead, it starts with i2.wp.com, which is WordPress.com’s CDN. Yes, that’s WordPress DOT COM, the one that serves millions of blogs over several continents. It’s actually a really fascinating partnership — the hosted platform making the self-hosted sites quicker and leaner. Install this and you are better off.

Miscellaneous other goodness

Those are the basics. Using these tools will help you really power manage your WordPress images, making them load more quickly, you’ll find them more quickly, and you’ll generally take a lot of the “pain” out of writing your posts and using images.

But wait! There’s more!

These are other really useful tools that I really like, that really help make the Media Library your friend.

Media Grid

This is a fun tool that gives you a “Grid View” of your images. It makes browsing through your images really easy.

Resize Thumbnails

From the mind of Nick Ciske and ThoughtRefinery.com, this just makes your image Thumbnails in the backend show up as the size of your theme’s default thumbnails instead of the tiny 50×50 things no one can see. It honestly was a feature I never thought about until Nick introduced this to our Advanced WP Facebook group. Now, I’ll probably use it ALL. THE. TIME. For full details, read the blog post at FooPlugins.

WP-Inject

If you want to be able to just find a cool image to plug into your blog article and cite the author, this is for you. It’s a really easy way to search through the images at Flicker, embed them into your post and have the image author credited automatically. Bonus: You can set the image you choose as a Featured Image. Double Bonus: If you choose to serve it up from Flickr instead of downloading it, you benefit from Flickr’s CDN.

Cloudinary

This is a really powerful tool. It basically optimizes your images when you upload them, then stores the images on their CDN. Makes for a super fast image experience. There’s only a couple key draw-backs to why I recommend Photon before this: (1) It’s a Media Library replacement tool. Bascially, if you install this when you first build your site, you’ll almost never want to use the Core Media Library at all. It ties into the Core ML really well, and creates the image sizes you need and everything, but I prefer plugins that enhance WordPress Core rather than replace it. (2) This is a “freemium” model, meaning it’s free if you only need the basics. If your image usage gets large, you’ll end up paying for their service. It’s probably a great service and does really well.

The Extra Mile

I treat you right around here, don’t I!? Just for showing up, if you liked these plugins and would like to give them a go, you don’t have to go searching through the Repo. Instead, install my “Media Library Friend” plugin, which just activates these plugins as suggested installs (via Thomas Griffin’s TGM Activation script). There you go! Free info, resources, and time saved. Bam!

Download Media Library Friend Here

 

I wrote most of this post using 750words.com. It’s a really motivating tool to help you to write at least 750 words every day. You can read an analysis of this post here.
Series Navigation<< Optimizing Images for WordPress like a Pro for FreeImage Optimization and Automation in WordPress >>
43 Visits74.42%Bounce Rate 1.40page views/Visits
60 Pageviews00:01:40%Avg. Time on Site 79.07%New Visits

You may also like...

6 Responses

  1. Cool to see a mention of my Media Grid plugin. One day I’ll find time to work on it again, and make it even better. For now, its purely a way to browse your media.

    • At Matt’s suggestion on his blog post, I have uploaded your Media Grid Plugin. I am a plugin novice so I will have to let you know as time goes on how much I like it. I have great admiration and respect for anyone who can create a plugin. My background is in graphic design. So I am from way over on the other side of the brain! Thanks.

  2. Matt, thanks so much for the suggested Plugins. I am always having to deal with several of the issues you addresses. I’ve installed all the plugins and notice all but one is rater 5 stars. Cloudinary is rated 4 and a half while two other choices are rated 5. They are EWWW Image Optimizer and EWWW Image Optimizer Cloud. I am curious why you chose Cloudinary over either of the 5 star plugins.

  1. March 28, 2014

    […] Making the WordPress Media Library Your Friend […]

  2. March 31, 2014

    […] Making the WordPress Media Library Your Friend (Matt Cromwell) […]

Leave a Reply