Tips for Dealing With Images in WordPress

Dealing With Images in WordPress

Michael Kaulkin WordPress Leave a Comment

Share this Post

There are lots of reasons why WordPress is the leading platform for building web sites of all descriptions, and one of them is how easy it is to use. Mostly. One of the most confusing and opaque aspects of working with WordPress as a content manager is dealing with images. Even though it is intuitive in some ways, you really have to apply some know-how to get this right. Just following your nose and relying on the provided user interface without understanding fully how it works will lead to mistakes.

Getting it right starts before you even upload your images to WordPress. In fact, it starts before you even choose them! Here are some tips for dealing with images in WordPress for the maximum effect in terms of SEO, performance and serving the goals of your site.

For the skimmers out there, I’ll cut to the chase: You should crop, resize and rename your images before you upload them to WordPress. Read on to discover why.

Choosing Your Images

If your site includes a blog, you probably already know that each post will have one image that’s the “Featured Image” (in WordPress lingo). This is the one that will show up on the blog index itself as well as at the top of the single post view. The way this is laid out is determined by the theme, and there may not be much (or any) flexibility.

What You Should Do

For the best results, try to be consistent about the aspect ratio (width/height ratio) of your images.  If you’re using a theme that automatically crops your images to fit neatly into its template, that makes it easier, but experiment enough to see how exactly they’re being croppped and choose images accordingly.  For example, if your theme is cropping them at the center (probably the most typical way), then make sure you’re image has its focal point in the center.  Anything on the outer edges of the image will be cropped out. As a rule, a close-up of someone’s face will not work well unless you don’t mind some of it being cut off.

Ideally, if you have it in you, use an image editing tool like Apple Preview to crop your images yourself exactly to your liking according to the theme’s aspect ratio before uploading them to WordPress. That way you will ensure that it looks exactly as desired and no automatic cropping will occur.

Cropping this to the center will not work

This picture would not work particularly well if it were automatically cropped to the center by WordPress.

Keep Social Sharing in Mind

In considering what image to use as your Featured Image, keep in mind that Facebook, Twitter and LinkedIn will automatically recognize that as important and include it when people share your page or post, so make sure it represents the content in a suitable way for those media as well as on your site itself.  You can test what it will look like by just pasting the URL of your content into the status box without actually posting it.  It is a good idea to try this before sharing your content so you can fix any problems you hadn’t anticipated.

Note that once Facebook scrapes the image from your site, it will be cached there and it is very difficult to get them to show a replacement that you may install after the fact.  Here’s a little power tip:  Use their URL Debugging Tool — not to debug anything, but just to get Facebook to clear its cache of your previous image.

Image Sizes

Consider the file size of your image before uploading it to WordPress.  Very large, high-resolution images are good for print purposes, but anything over a certain size or resolution on a screen is overkill.  So, whereas a picture right out of a camera or downloaded from a stock photo source for print purposes might be 4000 pixels wide (or more) and 5 mb or more, a large computer monitor is only 1920 pixels wide.  There is no reason for any image to be wider than that, and most web site templates contstrain the width of their content to anywhere from 800 to 1200 (roughly) pixels.

For all practical purposes, the maximum pixel size you’d ever need for images intended to fill the screen (which should be rare on a web site) would be 1920.  A pixel width of 1280 should be suitable for images intended to cover the full width of a browser window in most situations, considering that even with a very large screen the browser window would normally not be expanded to the full width.

The file sizes of digital images in their original form can be very high, upwards of 5mb or even 10.  Large image files add to the time it takes for a page to load, and this annoys users.  It is also something search engines are aware of in calculating where your page should rank in search results, so it’s important to find ways to keep the file sizes down. By reducing the pixel width down to what is suitable for a computer screen you can cut down on that overhead, but you can also cut corners on quality.

What WordPress Does With Your Images

When you upload an image to WordPress, it performs a bunch of tasks at the same time. In addition to capturing your uploaded image file, depending on the rules set by your theme, it also creates a number of copies of the image at different sizes that may come in handy when you’re embedding it within a post or page (as opposed to setting as your Featured Image). So if you upload an image that’s, say, 1920 pixels wide, it may create versions that are Large (1280px), Medium (640px), and Small (320px) as well as a square thumbnail (150×150)  (These numbers are arbitrary examples.  The real numbers depend on your theme.)

What You Should Do

Don’t depend on WordPress to solve this problem for you.  Many themes will use your full-size image in certain situations where the Featured Image is displayed.  This is usually done to accommodate screen size responsiveness in the most reliable way. So if your original image is too large you have a problem. You should take the time to use your image editor to resize your image before uploading it.  If it’s going to be a full-screen image, 1920px wide is a good bet.  Otherwise, something like 1280px should serve most situations amply.  Again, a lot of this depends on your theme, so this is not an across-the-board recommendation.

Rename Your Image Files for a Little SEO Boost

Inscrutable file names are unnecessary and unwieldy to deal with.  There is a persistent misconception that file names should be full of hyphens and crazy abbreviations, but it’s not true.

What Else Does WordPress Do With Your Images

In addition to making various-sized versions of your image, upon upload, WordPress will take the file name of the image and use it as a Name for the image in the Media Library.  If there are spaces in your file name, it replaces them with hyphens before storing the image in the uploads directory. That means you can name your image file in plain English. And if you don’t, then you’ll have to replace the filename gibberish it’s using as the image Name with something meaningful, and that’s an extra step, unless…

What You Should Do

While you’re creating a practical size version of your image, please also rename your image file before uploading it to WordPress.  Use a plain English phrase relevant to the content you’re writing about as the filename.  It can just be the title of your post or something similar. This will save you a few steps in WordPress because, again, WordPress will use your filename as the Media Library Name for the image, but more importantly it will boost SEO a little bit, because our search engine likes to see that there are images that are relevant to the content.

So, for example, instead of:

“IMG_0881.jpg”

Rename your image file to:

“Some Tips for Dealing With Images in WordPress.jpg”

Yes: Include the spaces, and yes: use proper title case. Plain English.

Then WordPress will take that filename and process it as the name of the image object it creates during the upload process. The only remaining thing you need to do is copy that Name in the Media Library and paste it into the field that says “Alt Text”.  Whether this is needed in all cases depends on your theme, but it is a good habit. It will further ensure that search engines understand that this is an image that’s relevant to your content.

Michael Kaulkin on sabtwitterMichael Kaulkin on sablinkedinMichael Kaulkin on sabfacebookMichael Kaulkin on sabemail
Michael Kaulkin
blank
Michael Kaulkin has been building, managing and maintaining web sites since 1998, with a focus on WordPress since 2005. He founded Oakland, California-based Cantus Firmus LLC in 2010 to provide WordPress web development and consulting services to businesses and non-profits of all sizes.