Working with WordPress’ media library and images can be at once and pleasure and pain. I tend to like the manner in which images are managed in the admin; however, I have been left wanting when it comes to using images in the frontend of site. In particular, I have experienced difficulties displaying images at a specific size in posts or pages. While one can use CSS or the img tag attributes height and width to display the precise image size, it is far more efficient to create an image of the exact size to display. Austin Matzko’s excellent Custom Image Sizes plugin helps ease this process by extending the functionality of the some of the main image display functions in WordPress.

Basic Image Sizes on WordPress

By default, WordPress creates up to four images when an image is uploaded, which include:

  • thumbnail (150 x 150)
  • medium (proportionally sized; 300 x 300 max)
  • large (proportionally sized; 640 x 640 max)
  • full (original image size)

To display the image using one of these sizes, you can use either wp_get_attachment_image() or wp_get_attachment_image_src(). For instance, you can display the thumbnail sized image:

Or, perhaps, you can display the large size using the following:

These two built-in WordPress image functions are quite simple to use. The first argument takes the id of the attachment. The second argument takes the size of the image to display. As demonstrated, this argument can be the name of the image size. Additionally, an array defining the height and width of the image can also be sent to these functions as the second argument; however, this is where things can become frustrating. In order to display an image of a precise size (e.g., 225 x 125) to fit a pixel perfect design, one might think to do the following:

Unfortunately, this function will not display an image 225 pixels high and 125 pixels wide. It will instead display the default image size that most closely matches the size specified by the array. In this situation, the thumbnail image would most likely be shown. You can, of course use the add_image_size function to create the size of the image you want. This is a built in WordPress function for exactly this reason; however, I would rather use the image functions in the intuitive way that I showed above. Enter the Custom Image Sizes plugin–it does exactly that.

Once you install and activate the Custom Image Sizes plugin, the wp_get_attachment_image() and wp_get_attachment_image_src() functions will behave as one would expect, with only a slight alteration to the second argument in the functions. With Custom Image Sizes, you can display the specific image size by simply calling the following function with the altered second argument.

With this code, the following will happen:

  • A new image of the specified size will be created if an image of the specified size does not exist
  • The image will be cropped if necessary with cropping preserving the center of the image
  • The function will return what the original WordPress function returned

Thanks to the Custom Image Sizes plugin, utilizing images from the media library is simple and intuitive, making it one of my favorite WordPress utility plugins.

FREE EBOOK: The Ultimate Guide To Speed Up Your Website and Increase Conversions!


Site Speed Secretsis a is a step-by-step blueprint about how to speed up your website and increase conversions.

Scroll to Top