How to Create Additional Image Sizes in WordPress

Understanding WordPress Image Sizes

WordPress, by default, generates multiple sizes of each image you upload to your media library. This is a fundamental feature designed to optimize website performance and user experience across various devices and contexts. When you upload an image, WordPress creates thumbnails, medium-sized images, and large-sized images, in addition to the original full-size image. This allows WordPress to serve the most appropriate image size based on where it’s being displayed – a small thumbnail on a blog post list, a medium-sized image within the post content, or a full-size image when clicked.

The default image sizes are defined in the WordPress settings (Settings > Media) and are generally sufficient for basic needs. These sizes include:

• Thumbnail Size: A small square crop designed for thumbnails or icons.
• Medium Size: A mid-sized image suitable for displaying within content without excessive loading times.
• Large Size: A larger image intended for displaying more detail or filling wider spaces.

The “full size” image is, as expected, the original image you uploaded. While WordPress handles the creation of these sizes automatically, sometimes your theme or specific design requirements necessitate creating additional image sizes tailored to your needs.

Why Create Additional Image Sizes?

The default WordPress image sizes often fall short when dealing with custom themes or designs that require specific aspect ratios or dimensions. Creating custom image sizes offers numerous benefits:

• Improved Website Performance: Serving optimized images specific to the container they occupy reduces the image file size, leading to faster page load times. Faster loading improves user experience and SEO rankings.
• Responsive Design: Custom image sizes allow you to cater to different screen sizes and devices, ensuring images look crisp and appropriate on desktops, tablets, and smartphones.
• Precise Image Control: You can define specific dimensions and cropping behavior to ensure images fit perfectly within your design layout, maintaining visual consistency.
• Theme Compatibility: Many premium themes rely on specific custom image sizes for their layouts. Creating these sizes ensures your images display correctly within the theme’s design.
• Reduced Bandwidth Consumption: Serving smaller, optimized images reduces the amount of data transferred, saving bandwidth and potentially lowering hosting costs.

For example, if your theme features a prominent header image area that requires a specific aspect ratio (e.g., 16:9) and dimensions (e.g., 1200×675 pixels), creating a custom image size for this area ensures your images are displayed correctly without distortion or excessive file size. Similarly, creating a custom size for WooCommerce product images ensures consistent and professional product displays.

Methods for Creating Additional Image Sizes

There are several ways to create custom image sizes in WordPress, each with its own advantages and disadvantages:

• Using the `add_image_size()` Function in `functions.php`: This is the most common and recommended method for theme developers.
• Using a Plugin: Several plugins simplify the process of creating and managing custom image sizes.
• Custom Coding Within a Theme: While possible, this approach is generally discouraged due to potential theme update conflicts.

We’ll primarily focus on using the `add_image_size()` function and then briefly discuss plugin options.

Using the `add_image_size()` Function

The `add_image_size()` function is the core method for defining custom image sizes in WordPress. This function must be placed within your theme’s `functions.php` file or a custom plugin.

Here’s the basic syntax:

“`php
add_image_size( string $name, int $width, int $height, bool|array $crop = false )
“`

Let’s break down each parameter:

• `$name`: A unique string that identifies the image size (e.g., ‘custom-header-image’). This name will be used later to retrieve the URL of the image in this size.
• `$width`: The desired width of the image in pixels.
• `$height`: The desired height of the image in pixels.
• `$crop`: A boolean value (`true` or `false`) or an array that controls cropping behavior.
  • `false`: The image will be resized proportionally to fit within the specified width and height, potentially resulting in white space or letterboxing if the aspect ratio doesn’t match.
  • `true`: The image will be cropped to fit the exact dimensions, potentially losing parts of the image. WordPress will attempt to center the crop.
  • `array( ‘left’, ‘top’ )`: Allows for specifying custom crop positions. Valid values are ‘top’, ‘bottom’, ‘left’, ‘right’, and ‘center’. For example, `array( ‘right’, ‘bottom’ )` crops the image to the specified dimensions, focusing on the bottom-right portion of the image.

**Example:**

Let’s create a custom image size for a header image with dimensions 1200×675 and crop it to fit.

“`php
function my_theme_setup() {
add_image_size( ‘custom-header-image’, 1200, 675, true );
}
add_action( ‘after_setup_theme’, ‘my_theme_setup’ );
“`

**Explanation:**

• We define a function named `my_theme_setup()`. This function encapsulates the `add_image_size()` function call.
• Inside the function, we call `add_image_size()` with the following parameters:
  • `’custom-header-image’`: The unique name for this image size.
  • `1200`: The desired width (1200 pixels).
  • `675`: The desired height (675 pixels).
  • `true`: Enables cropping to fit the specified dimensions.
• We use the `add_action()` function to hook our `my_theme_setup()` function to the `after_setup_theme` action. This ensures that our custom image size is registered after the theme has been loaded.

**Custom Crop Positions:**

To specify a custom crop position, use an array instead of a boolean `true` for the `$crop` parameter. For example:

“`php
add_image_size( ‘custom-featured-image’, 800, 400, array( ‘center’, ‘top’ ) );
“`

This will crop the image to 800×400 pixels, focusing on the top-center portion of the image.

**Important Considerations:**

• Uniqueness of Name: The `$name` parameter must be unique. If you try to register an image size with a name that already exists, it will not be added.
• `after_setup_theme` Hook: Registering image sizes within the `after_setup_theme` action ensures they are available early in the WordPress loading process.
• Theme Updates: If you’re adding the code directly to your theme’s `functions.php` file, be aware that theme updates might overwrite your changes. Consider using a child theme or a custom plugin to preserve your modifications.

Regenerating Thumbnails

After adding a new image size, you need to regenerate your existing thumbnails so that WordPress creates the new size for all previously uploaded images. WordPress does not automatically generate the new sizes for existing images. Several plugins can handle this task:

• Regenerate Thumbnails: This is a popular and widely used plugin for regenerating thumbnails.
• Force Regenerate Thumbnails: Another option for regenerating thumbnails.
• Media Library Assistant: Offers more advanced media management features, including thumbnail regeneration.

After installing and activating a thumbnail regeneration plugin, follow its instructions to regenerate the thumbnails for your entire media library. This process can take some time, especially for large media libraries.

Displaying the Custom Image Size

Once you’ve added the custom image size and regenerated your thumbnails, you can display the image size in your theme’s templates. The general approach involves using the `wp_get_attachment_image_src()` or `wp_get_attachment_image()` functions.

**Using `wp_get_attachment_image_src()`:**

This function returns an array containing the image URL, width, and height.

“`php
$image_id = get_post_thumbnail_id(); // Get the ID of the featured image
$image_data = wp_get_attachment_image_src( $image_id, ‘custom-header-image’ ); // Get the image data for the custom size

if ( $image_data ) {
$image_url = $image_data[0]; // Image URL
$image_width = $image_data[1]; // Image Width
$image_height = $image_data[2]; // Image Height

echo ‘‘;
}
“`

**Explanation:**

• We retrieve the ID of the featured image using `get_post_thumbnail_id()`.
• We call `wp_get_attachment_image_src()` with the image ID and the name of our custom image size (`’custom-header-image’`).
• We check if `$image_data` is not empty (meaning the image exists).
• We extract the image URL, width, and height from the `$image_data` array.
• We then output an `` tag with the appropriate `src`, `width`, `height`, and `alt` attributes.

**Using `wp_get_attachment_image()`:**

This function directly returns the `` tag.

“`php
$image_id = get_post_thumbnail_id();
echo wp_get_attachment_image( $image_id, ‘custom-header-image’ );
“`

This is a simpler way to output the image if you don’t need to manipulate the image URL or attributes. `wp_get_attachment_image()` automatically handles the `src`, `alt`, `width` and `height` attributes.

Using a Plugin to Create Image Sizes

While using the `add_image_size()` function is the preferred method for developers, plugins can provide a more user-friendly interface for creating and managing custom image sizes. Some popular plugins include:

• Simple Image Sizes: This plugin allows you to easily define custom image sizes from the WordPress admin panel without needing to edit code.
• Media Library Assistant: As mentioned earlier, this plugin offers a comprehensive suite of media management features, including custom image size creation.

These plugins typically provide a visual interface where you can enter the desired width, height, and cropping options for each custom image size. They often also include thumbnail regeneration functionality. While plugins simplify the process, they can add overhead to your website and may not be as flexible as using the `add_image_size()` function directly.

Best Practices for Image Optimization

Creating custom image sizes is just one aspect of image optimization. To ensure your images are performing optimally, consider the following best practices:

• Choose the Right Image Format: Use JPEG for photographs and images with complex colors. Use PNG for images with transparency or sharp lines. Use WebP for modern browsers to achieve smaller file sizes.
• Compress Images: Use image optimization tools to reduce the file size of your images without significantly affecting quality. Tools like TinyPNG, ImageOptim, and ShortPixel can automate this process.
• Use Lazy Loading: Implement lazy loading to defer the loading of images until they are visible in the viewport. This significantly improves initial page load times.
• Specify Image Dimensions: Always include the `width` and `height` attributes in your `` tags to prevent layout shifts as the images load.
• Use Responsive Images: Use the `` element or the `srcset` attribute of the `` tag to serve different image sizes based on the device screen size.
• Optimize Images for SEO: Use descriptive filenames and alt text to improve your images’ search engine ranking.

By combining custom image sizes with these optimization techniques, you can ensure that your images contribute positively to your website’s performance, user experience, and SEO.