How to Create Additional Image Sizes in WordPress (Easy)

After 15 years building WordPress sites, I‘ve learned how important it is to optimize your images.

The right image sizes can make your site faster, more responsive, and provide a better user experience. The wrong sizes can bloat pages, slow down load times, and deliver blurry, pixelated images.

Fortunately, WordPress makes it easy to create additional image sizes to take control over your images.

In this detailed guide, I‘ll show you how to:

• Generate perfectly sized images for any layout
• Speed up load times by reducing file sizes
• Create cropped images with no whitespace
• Make responsive images for mobile devices
• Display crisp, high-resolution retina images
• Get unlimited height images for vertical graphics
• Regenerate thumbnails after adding new sizes
• And more…

Let‘s dive in!

Why You Need Custom Image Sizes

Out of the box, WordPress creates 3 image sizes:

• Thumbnail (default 150×150)
• Medium (default 300×300)
• Large (default 1024×1024)

This works fine for basic blogs. But for modern responsive sites, you likely need more control.

Here are some common reasons to create custom image sizes:

Match Your Layout Perfectly

WordPress‘s default sizes don‘t always fit your design needs. For example:

• Your sidebar widget needs 120×120 thumbnails
• Your posts need 600×400 images
• Your image slider needs 960×400 banners

Custom sizes let you tailor images for any layout.

Optimize for Mobile Devices

Mobile traffic accounts for over 50% of visits. But high resolution desktop images can bloat pages on mobile.

Additional sizes let you generate smaller images for mobiles. This improves load times and saves mobile data usage.

Enhance Responsiveness

Serving one image size to all devices results in poor responsiveness.

With custom sizes, you can serve smaller images to phones, larger to tablets, and huge images to desktops.

Crop Images for Better Fit

Default WordPress sizes often leave extra whitespace around images.

Custom crops like squares and portraits give you images with no whitespace.

Support Retina Displays

Retina screens have pixels twice as dense for ultra sharpness. Without 2x images, your images will look fuzzy.

Custom sizes make it easy to generate double resolution images for retina support.

Get Vertical Images for Graphics

Infographics, illustrations, and other graphics tend to be extra tall or wide.

Default WordPress sizes will crop them horizontally. Custom sizes can prevent this.

As you can see, additional image sizes help craft a better visual experience on your site.

How to Create a New Image Size in WordPress

WordPress includes a simple function for registering custom image sizes called add_image_size(). Here is the format:

add_image_size( $name, $width, $height, $crop );

Let‘s go over what each parameter is for:

• $name – A unique name for your image size. Should be all lowercase with underscores instead of spaces.

• $width – The width of images in this size, in pixels.

• $height – The height of images for this size, in pixels.

• $crop – Whether to crop images or not. Set to true to crop. Default is false (soft crop).

For example, to create a 200×200 cropped thumbnail named "square", you would use:

add_image_size( ‘square‘, 200, 200, true );

Here are a few more common examples:

// Small resized thumbnail
add_image_size( ‘widget-thumb‘, 120, 120, true );  

// Wide landscape banner
add_image_size( ‘banner‘, 960, 400 ); 

// Unlimited height portrait graphic 
add_image_size( ‘tall-graphic‘, 400, 9999 );

As you can see, the possibilities are endless!

Important Tips for Adding Image Sizes

Here are some best practices when adding image sizes:

• Keep file sizes reasonable – For performance, stick under 2000px for width and height.
• Use descriptive names – Assume other developers will use your sizes.
• Use hard cropping for widgets and icons. Use soft cropping for important images to avoid distortion.
• Compress images – Use tools like EWWW or Imagify to reduce file sizes.
• Delete unused sizes – If a plugin adds sizes you don‘t need, remove them.
• Regenerate thumbnails – Existing images need to be re-processed to add new sizes.

Where to Add Image Sizes in WordPress

The best place to add add_image_size() is your main functions.php file. This makes the size available globally.

You can also add sizes inside of plugins or themes. Just be cautious about bloating every site if releasing publicly.

I recommend creating a specific section for image sizes in functions.php. For example:

function custom_image_sizes() {

  add_image_size( ‘square‘, 200, 200, true );
  add_image_size( ‘banner‘, 960, 400 );

}
add_action( ‘after_setup_theme‘, ‘custom_image_sizes‘ );

This keeps them organized in one place.

Displaying Your New Image Sizes

Once you‘ve registered custom image sizes, you need to display them across your site. Here‘s how:

Display in Post/Page Editor

When editing a post or page, your new sizes will appear in the media modal. Simply select the size you want when inserting an image.

For example, choose "square" to insert a 200×200 cropped thumbnail:

Display in Theme Files

To output an image size in a theme template file, use:

<?php the_post_thumbnail( ‘square‘ ); ?>

This will automatically display the image size specified.

You can also get the image URL directly:

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘banner‘ )[0]; 

This saves the banner image URL in a variable for outputting in <img> tags.

So you have full control over your new sizes, both in the admin and theme templates.

Regenerating Thumbnails After Adding Sizes

One catch with custom image sizes is that WordPress won‘t retroactively add sizes to existing images. It only creates the sizes when you upload new images.

To generate your new sizes for all images, you need to regenerate the thumbnails.

The simplest way is with a plugin like Regenerate Thumbnails. Install it, then click "Regenerate All Thumbnails" under Tools.

This can take a while on sites with many images. Some hosts may time out, so consider scheduling it off hours.

After regenerating, all images will now have your cool new sizes!

Expert Tips for Managing Image Sizes

Over the years, I‘ve refined my approach to image sizes. Here are some pro tips:

• Audit sizes – Take inventory of every size in use and delete bloat.
• Centralize control – Add global add_image_size() calls in one main file.
• Resize strategically – Create multiple sizes to serve small images to mobiles, bigger to desktops.
• Name descriptively – Assume another dev will use your size names.
• Use CDNs – Save optimized images on a CDN like Imgix or Cloudinary.
• Compress wisely – Lossy compression like WebP works for photos but harms logos and illustrations.
• Watch loading speeds – Monitor site performance using Lighthouse or WebPageTest after changes.
• Delete with care – Some themes and plugins may rely on default sizes.

Following these practices will help keep your image sizing lean, optimized, and organized as your site grows.

Summary

We just covered how to create and use additional image sizes in WordPress. Here‘s a quick recap:

• Use the add_image_size() function to generate custom sizes
• Regenerate thumbnails after adding new sizes
• Insert specific sizes when uploading images
• Display any size in templates using the_post_thumbnail()
• Optimize and compress images for performance
• Audit sizes and delete unused ones
• Monitor site speed as you make changes

With this approach, you can craft pixel perfect images that match your designs.

So try adding some new sizes and take control of your site‘s visual experience! Feel free to reach out if you have any other questions.