Conforming Images: WordPress Aspect Ratio

Adding images to posts can easily throw off grids of logos, lists of posts, and other series where images should all be the same size. Ideally, there will be an option when adding an image that aligns the image for that space. When setting up a theme, image sizes should be set up for the various areas but it does need to either be coded or configured with a plugin. These settings need some finesse as well. While a large enough image will always enable the options needed, if cropping is not enabled, the image will still throw off the layout. Also, if an image is too small (or just right which is tricky,) the right options won’t show at all. Let’s look at how this should work.

Selecting an Image for a Space

We have a 3 column grid with a default image filling out each of the spaces. When uploading a new image, we see that this new image isn’t following the aspect ratio that is set up. For the technically minded, the original images are 600 by 900 pixels or 2:3 and the new image is 750 by 1000 pixels or 3:4. WordPress can work with an odd shaped images but sometimes there are compromises.

Custom Image Sizes

There are default image sizes, small at 150 by 150 pixels, medium 300 by 300 pixels, and large 1024 by 1024 pixels that can work in body text areas but design elements will likely need specific sizes noted by a designer. With our 3 column design, we have custom image tall size that is 600 by 900 to make the design.

Custom images needed for a design like this should be added to the theme settings to get the right effect. When uploading a large image, we should see an option to scale the image down. Here we have cropped and uncropped options that show how images are conformed if an uploaded image is larger than a needed space.

Cropping After Uploading

Uploading images larger than a needed space (using our 600 by 900 grid example) is common but there are 2 ways WordPress conforms images either cropped or uncropped. If a size is set to cropped then WordPress will trim the largest dimension down to fit the image to the aspect ratio.

Our too large image, 750 by 1000, becomes 667 by 1000 to fit the 2:3 aspect ratio needed. The uncropped image stays the odd ratio of 3:4 and even enlarging the image doesn’t work since the extra width spills over the space. If an image, like the 04 example, is too large, but the same aspect ratio, it fits in the space regardless of what size is chosen. Choosing the right size will optimize the loading of the page instead of loading a high resolution image.