Already a customer? Please sign in.

Resizing images for WordPress

by Scott Rollo on June 26, 2012 / 5 comments

If you’ve picked up one of our themes and are ready to upload a logo, a banner, or perhaps a set of photographs to your site, then this is the post for you. We’ll discuss why you should be cropping and optimising your images before uploading them to WordPress, and the importance of saving your photos in a suitable file format.

Why should I crop and optimise my images?

Perhaps your images don’t look very good, or your photos are slow to load. Cropping, resizing, and optimising your images properly will fix both of these problems. Mastering — or, at least, learning — these techniques is an important step in building a successful WordPress site. You’ll create better visual content; speed-up the uploading process; reduce bandwidth usage, and shed inessential bytes from your graphic files. Not only that, your webpage will load more quickly — and readers love speedy sites.

Understanding common file formats

Your image files are influenced by two key factors — file size and quality. Therefore, optimising your graphics is a game of balance: file size affects how fast your images will load; quality determines how your photos will look to your readers.

To better understand this balance, let’s take a closer look at file formats. There’s a plethora of file formats out there, and each of these formats have their own unique characteristics. We’re going to focus on the two main contenders, PNG and JPG.

Compression: PNG is a lossless file format, whilst JPG is lossy. Therefore, PNG files have fantastic image quality, but they also have a larger file size. JPG files, on the other hand, may show signs of compression and look pixelated, but will usually have a considerably smaller file size.

Uses: This isn’t to say that all graphics should be saved as JPG files. Each format still has its own specific use cases. PNG files are perfect for logos and interface elements. Buttons and small background textures are also best saved as PNG. Stick to JPG files when saving large photographs and banners.

Transparency: If you want to get fancy, and your graphic is in need of a transparent background, save the image as a PNG file. The JPG format doesn’t support transparency.

The example

Now that we’ve discussed common file formats, let’s walk through an example.

Before we start, it should be noted that all of our themes auto-crop and scale to fit your images to content areas such as the Featured Slider and Featured images. We also include important image dimensions within each of our theme tutorials to help you pre-crop your photos.

I’m using Sumo.fm (A free, online image editing tool) for this tutorial, but feel free to follow along with your favourite image editing application.

Let’s crop a photo to use as a Featured image in our Portfolio theme. First, I’ll check the theme tutorial for the correct dimensions. The documentation specifies a width of 860px and a recommended height of 450px. In this particular case, the height is only recommended, and can be adjusted to your liking.

Resizing: If you’re working with photographs from your camera, the chances are your images are going to have enormous dimensions. These large image dimensions are great for print, but in most cases, smaller dimensions are better for the web.

Let’s resize your image to your specific dimensions. Once you’ve opened your image and are ready to start editing, navigate to ImageImage Size, and check Constrain Proportions. Setting this option ensures your photo will be scaled proportionally. Then, input a width of 860px, and click OK. Don’t worry about the height — we’ll deal with that next.

Once you’ve resized your image’s width, select the Crop Tool from the Tools panel, and drag to crop the image to a height of 450px. While cropping your image, you can see the cropping dimensions under the Info/Zoom panel.

Saving: Now your image is resized, navigate to FileSave to My Computer. Save this image as a JPG file to your Desktop. I’ve chosen JPG, with a quality of 90%, because of the large dimensions of the image.

Uploading: Now it’s time to upload this image to WordPress. Within your WordPress dashboard, navigate to PagesAll Pages. Then, click to edit one of your pages. Under the Featured image panel, click Set featured image. Select and upload your image, then, under the Size option, select Full Size. Selecting this option displays your image at its maximum dimensions (860 × 450). Lastly, click Use as featured image.

Update or Publish your page, and view the results :)

You now have a resized image, which fits perfectly in your theme, and will load much more quickly than the original file.

Now it’s time to get busy resizing and showing off your images!

Additional resources for working with images:

Enjoy this post? Read more like it in Tutorials.

5 Comments

  1. Jonathan Dingmn

    Great write-up Scott.

    One thing, I’d be careful of recommending smush.it to people. I know that the WordPress plugin built around the service, has often caused issues for sites either hanging or crashing. Also, when trying to view that site right now, it times out. I’m not sure of the fate of the site, if it’s even sticking around.

    Cheers,
    jonathan

  2. Shapeshifter 3

    Smart Information Scott,

    Thank You. I know that The Theme Foundry is involved in the development of WordPress Twenty Twelve.

    Quite a bit of discussion has been going on about the problem with image presentation on devices of different sizes. Some of these discussions have taken place on W3C. Here are three links for interested parties to review (they all have to do with images).

    http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/036160.html
    http://dev.opera.com/articles/view/responsive-images-problem/
    http://www.w3.org/community/respimg/2012/06/18/florians-compromise/

    Hope these links will be helpful for anyone who is interested in image display on a WordPress site.

  3. Shapeshifter 3

    A little delay on my part, but: You are welcome!

    Here’s a W3C draft proposal submitted by the Responsive Images Community Group on July 02, 2012.

    http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal

    I have read that Matt currently wants a default theme without a header image, BUT I was wondering if it would be possible in the future to develop either WordPress Twenty Twelve, or Twenty Thirteen to allow a header image which would display on desktop screens only, but AUTOMATICALLY NOT be downloaded to mobile devices.

    I’m not a programmer, but wouldn’t it be great if either the browser, or a WordPress Theme could automatically filter certain components to be downloaded to smaller devices?

Comments are closed.