Five Steps You Need To Take When Adding Images To Your WordPress Theme

The first task when customizing a WordPress theme is adding your own images, especially the logo, background image, slider images, post and page featured images.

But, be aware: the images on your WordPress blog are the most obvious telling sign of its level of professionalism or amateurishness.

Taking the five steps I outline below, will greatly improve the look of your website as well as your website’s visitors’ experience and your site’s search engines ranking.

#1: Read Your WordPress Theme’s Documentation

All WordPress themes released through a reputable channel will offer some kind of documentation page.

The quality of the theme’s documentation is not standardized, alas ! However, this is the first port of call for anybody who sets out to customize a WordPress theme.

In particular, when it comes to adding images, at the very least the documentation offers guidance as to the recommended size for the most important features of your theme.

For example, I recently customized the WordPress.com Stay Theme by Automattic for a client, and found the theme’s documentation page so very helpful. Apart from the usefulness of such info as how to set up the home page slider, and which widget areas, menus, and page templates the theme offers, the real treasure trove for me was finding the dimensions of all key theme components clearly laid out in one place.

WordPress Stay Theme Specifications
WordPress Stay Theme Specifications

Knowing these dimensions was crucial for me to plan for the images: the widest images needed to be at least 960px, featured images 920px, and the width of images added to posts and pages had to take into consideration the maximum space available inside the main column to gauge the width they needed to have to look good on the page.

#2: Crop Your Images When Necessary

Are you one of those WordPress blog owners who add images from their digital cameras straight into their WordPress post? If you are, stop right there: you’re killing your users by subjecting them to the pains of a slow, bandwidth eating website.

If your image has elements that are not necessary to its aesthetic effect or to the message you want to convey to your audience, don’t think twice about it: get rid of them (but don’t forget always to save the originals in a safe place)!

To do so, you can use WordPress image editor: from the Media Library, select an image, then click on the Edit image link, and finally click and drag on the image to make your selection.

WordPress Built-in Image Editor Interface
WordPress Built-in Image Editor Interface

Once you select the portion of your image you want to keep, click the Update button and then the Save button.

WordPress automatically preserves the appropriate aspect ratio between the image’s width and height, so that the image won’t look squashed or skewed after cropping.

That’s it, you’re done!

#3: Optimize Your Images

Cropping images is not enough to make sure your images are not eating up too much bandwidth. There are great free online tools that make it very easy to squeeze a few bytes out of your images without deteriorating them.

The image optimizer I find myself using most often is Kranken.io. Kranken offers a free and a paid optimization service. I’ve been using the free service and I’m very happy with the results.

Using Kranken.io to compress your images before uploading them to your WordPress site can be done in a few clicks:

  1. Go to the Kranken.io web interface and upload your images
    Kranken.io Image Optimizer Interface
    Kranken.io Image Optimizer Interface
  2. Wait for Kranken to do its job (it usually takes a few seconds).
  3. Once the results appear at the bottom of the files upload interface, you have the choice to either download a single image or to download all kranked images nicely packaged in a zip file. As you can see below, Kranken managed to squeeze 503 bytes out of an already low resolution image.
    Kranken.io Image Optimizer Results
    Kranken.io Image Optimizer Results
  4. Finally, upload your kranked images onto your WordPress site.

#4: Fill Up Image Meta-data When Uploading Images To WordPress

Too often I come across websites, especially personal blogs, without any image meta-data in the mark-up. By meta-data I mean alt, title and description tags. This is quite bad both for Search Engine Optimization (SEO) reasons and for accessibility reasons.

Both search engine crawlers and assistive technologies read the info contained in the meta-data, making it available to users who perform online searches and to visually impaired users who otherwise wouldn’t have access to your images’ content.

Therefore, each time you add an image to your post or page, or after you’ve uploaded an image to your WordPress media library, simply spend a minute or so adding relevant information to the meta-data text-boxes in the WordPress media library interface.

WordPress Insert Media Interface
WordPress Insert Media Interface
WordPress Edit Image Interface With Meta-data Boxes
WordPress Edit Image Interface With Meta-data Boxes

#5: Adjust The Image Display Settings When Adding Images To A Post Or Page

Each time you add an image to a post or page, WordPress gives you the opportunity to select a size option, i.e., thumbnail, medium, full-width. It also offers you the ability to manage the image’s position: you can easily choose if you’d like the image to have a right, left or center alignment.

WordPress Image Display Settings Interface
WordPress Image Display Settings Interface

Except for WordPress featured images, for big home page slider images, and for WordPress header images (that have a recommended size of their own), each time you add an image to a post or a page, it’s almost always a good idea to go for a thumbnail or medium size.

As for the image’s alignment, as a rule of thumb, go for left/right alignment for small thumbnail images. The medium size images look good both when aligned to the left or right and when centered to the page. Play around with the size and alignment and click the Preview Post/Preview Page button to check your results before publishing.

Don’t overlook these settings: they make a lot of difference on how the image looks on your blog page.

To Sum Up

Being aware of the process that it takes to add your own images to a WordPress theme the right way is crucial to achieving great customization results.

Failing to do so, not only will show on the way your blog looks, but most importantly, will have a negative impact on your blog’s accessibility to assistive technologies for visually impaired users, to mobile device users, and to search engines.

Simply by following the five steps outlined above, you’ll be avoiding the pitfalls of the newbie blog owner’s slow bandwidth-eating website and your visitors will love you all the more for it!

Have you got a favorite tool to crop and optimize your images for the web? Why not sharing your findings with the world using the comment box below?
Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s