Pixels and Cropping and Scaling. Oh My.

It’s been a long time coming – at long last, here are my notes from our Meetup on September 4, 2017. You may also remember this as “the Meetup we had to sit outside for because it was Labor Day and the restaurant was closed.” I covered photo-related topics that day: where to source stock photos, which I wrote about in this post; how to prep them for upload and managing image sizes, which I’ll cover below; and in a future post I’ll talk about compression.

So anyway…let’s face it. We’re lazy creatures. We order lousy takeout food because we don’t feel like cooking. We walk the dog a half-block and call it exercise. We take any photo hanging around on our computers and throw them up on our sites. Who can be bothered with prepping them first?

I’m not your mother, so I don’t have anything to say about what you make for dinner, and I walk my dog at least a mile and a half every day thankyouverymuch. But I’m happy to wag my finger at you and chew you out for being too lazy to prep your photos before throwing them all willy-nilly into your WordPress content. After all, it’s the only one of these three things you can do without standing up. Say it with me now:

Photos should be prepped before upload in general.
They should be cropped to proper dimensions in particular.

The image sizes you need should be determined by your site design, not by WordPress’ three default sizes for Thumbnail, Medium, and Large (plus the photo’s original size).

The problem I see most often is that a user will upload the original gigantic file from their digital camera or phone. But too-small is just as much of a problem as too-big. You see, WordPress isn’t good at making up pixels where there aren’t any. If your Large image size is defined in WordPress as being 1024px(1)Tip: px = pixels, and image sizes throughout this post are expressed showing the horizontal dimension first, then vertical. in its longest dimension, and you upload a photo that’s only 300px, you won’t be able to choose “Large” when you want to embed that photo into your post. WordPress isn’t going to scale your image up for you, you wouldn’t want it to, and you certainly don’t want to grab the corner of the image and stretch it bigger in the post. It’ll look awful.

An example will help, working with the sizes WordPress sets by default:

  • Thumbnail: 150 square, cropped to the center of the image
  • Medium: 300 max in each direction
  • Large: 1024 max in each direction

Let’s say your photo is 2048 x 1536, which makes for an aspect ratio of 4:3.(2)Here’s a helpful site that defines aspect ratio. Includes a handy ratio calculator! When you upload it, assuming you haven’t changed the default settings, WordPress will process that image so that you end up with:

  • The Thumbnail image will be 150 x 150, so your image will be cropped since this is an aspect ratio of 1:1. Your 2048 x 1536 is wider than it is tall. By default, WordPress will crop to the center of an image, so your image will be cropped by equal amounts from the left and right sides of the image. If it was a vertical photo the top and bottom would be cropped equally.
  • The Medium image size will be 300 x 225 – the longer of the two sides, at 2048, will be reduced to the 300 px defined in WordPress. Cropping is not turned on, so the shorter axis will be reduced a proportionate amount; in this case, it’s 225.
  • The Large image will be 1024 x 768. Again, cropping is not on and the two sides are scaled proportionally.

WordPress allows for as many extra image sizes as you like. There are a few ways to define these extra sizes: use a plugin like Simple Image Sizes; add some code to your theme’s functions.php file; or by creating a simple site-specific plugin. There are pros and cons to all of these choices. For the purpose of this post, I’ll focus on the easiest, and I’d expect by far the most common choice – using a plugin.

Customize your defaults

Our current image size settings

But before we go there, let’s revisit the default settings handled by WordPress. The three defaults are actually user-defined; all WordPress does is put default values in the right place so there’s something to work with. But if you’re never really going to want a 150px thumbnail and 300px is too small for your most common use of the Medium size, why would you settle for those defaults?

Set your Thumbnail to match the smallest common size you’d need; quite often this would be the featured image you’d display on a post archive page, and likely not a square. If you’re going to show your posts in columns or a grid, it’s best to have all of the images at the same size, so leave the crop setting turned on. I usually have the Medium size set to about half the width of my content column so I can float an image left or right in a block of text, and the Large size set to the full width of the content column.

If your original image is larger than the defined Large size, it’s likely the only time you’d see that full image is when clicking on it to display in a Lightbox. If you’re displaying images from a digital camera, or more likely these days from your smartphone, there’s no reason to upload the full-size image to your site. It’ll be much larger at full size than most monitors will show and there’s no reason to make your users wait for huge images to download.(3)For reference, iPhones since the 6s have had a 12MP camera, saving photos at 4032 x 3024 px. For this reason, I often reduce the images to twice the size of my Large size before uploading them. Do yourself, your users, and your web host a favor and avoid uploading huge photos!

Custom Image Sizes

New image size added

There it is, below my default sizes.

So now that you’re a true believer in getting your Media Settings in order, what if you want or need more sizes? I’ve often turned to Simple Image Sizes to get the job done. Once you’ve installed this plugin, you’ll find the settings for it at the bottom of the Settings -> Media page. I’ve added an image size I called Tall Feature, where I might want to use a portrait orientation photo at no more than 300px wide by however many vertical pixels I need. I have cropping turned off so that I’ll get the full image, and I’ve checked the Show in post insertion? box.(4)Why would you want to turn that off? In case you’ve created an image size you’ll only be inserting programmatically, like in a custom post archive loop or something, but don’t want to give your authors access to it when they create their posts.

So now that I have my new size, I can easily insert a file that follows the Tall Feature setting by selecting it from the insertion dialog box.

Retroactive Resizing

If you’ve been posting for awhile and realize that you need an extra image size available not only for future posts but for some images you’ve already uploaded, fret not: Simple Image Sizes has a handy regenerate function that will go through your Media Library and create files based on your new setting or settings.

There’s another cool feature to Simple Image Sizes: there’s a handy Get the PHP for the theme button that generates the code you’d insert into functions.php. Once you’ve done that you can deactivate and delete the plugin, which is not a bad idea if you’re not going to use it again.

Overall it’s not a bad system and by following a few simple rules you’ll find it easier to work with photos on your site!

Asides   [ + ]

1. Tip: px = pixels, and image sizes throughout this post are expressed showing the horizontal dimension first, then vertical.
2. Here’s a helpful site that defines aspect ratio. Includes a handy ratio calculator!
3. For reference, iPhones since the 6s have had a 12MP camera, saving photos at 4032 x 3024 px.
4. Why would you want to turn that off? In case you’ve created an image size you’ll only be inserting programmatically, like in a custom post archive loop or something, but don’t want to give your authors access to it when they create their posts.

stuff we dig

FYI: yes, the above are affiliate links, so we do make a small amount of money if you follow them over and buy what they're selling. Thank you for helping pay our hosting costs!

Posted in

Dave Kuhar

Dave is the jack-of-all-trades running Transmit Studio, a media creation lab in San Jose. He's built more websites than he can remember, well over a hundred of them on WordPress. Whether it's tradeshow booths, video/TV, graphic design, presentations, magazine, tearsheet, and catalog layout, corporate identity packages, or just about any other kind of visual communication project, he's worked on it!

3 Comments

  1. Amy on April 2, 2018 at 9:24 pm

    It would be great if you could post about how WP image optimization works and how to best handle retina display. It seems to me like the plugins that are intended for retina display do it by making up those extra pixels, which, as you say, doesn’t produce great quality images.

  2. Dave Kuhar on April 3, 2018 at 11:46 am

    That’s a tough subject, but one I do need to learn more about. I’ll do some research and see what I come up with.

  3. Amy on April 3, 2018 at 4:47 pm

    Fantastic!

Leave a Comment