How to Create Additional Image Sizes in WordPress (Easy)

Hi there, I’m Naveed Ahmed, a WordPress enthusiast with over 15 years of experience helping website owners like you optimize their websites for performance and visual appeal. One of the most common questions I get from clients is how to create additional image sizes in WordPress. Today, we’ll delve into the world of image optimization and discover how to effortlessly create custom image sizes that perfectly suit your needs.

You might be wondering why creating additional image sizes is even important. Well, let me tell you, it’s crucial for a few key reasons. Firstly, it ensures that your images are displayed at the right size, preventing them from being stretched or squished, which can significantly impact your website’s visual appeal. Secondly, it helps speed up your website’s loading time by providing smaller, optimized images for different areas of your website. And lastly, it gives you more control over how your images are displayed, allowing you to create unique and compelling layouts.

Why Create Additional Image Sizes in WordPress?

WordPress, by default, generates a few standard image sizes when you upload an image. However, these sizes often aren’t enough to perfectly accommodate various website sections and layouts.

For instance, you might need smaller thumbnail images for your blog feed, larger images for your featured posts, and even custom image sizes for specific sections like sidebars or galleries. In such scenarios, creating additional image sizes tailored to your website’s requirements is essential.

Let’s break down the benefits of creating additional image sizes in WordPress:

• Enhanced Visual Appeal: Images are displayed at the right size, preventing stretching or distortion, resulting in a visually pleasing website.
• Faster Website Loading Time: Smaller image sizes lead to faster loading times, improving user experience and boosting SEO.
• Greater Control and Flexibility: Create unique layouts by incorporating images of different sizes and proportions, adding visual interest to your website.
• Improved SEO: Optimized images contribute to better SEO by improving website speed and user experience.
• Reduced Bandwidth Consumption: Smaller images use less bandwidth, reducing server strain and saving you money.

Registering Additional Image Sizes for your Theme

The process of creating additional image sizes in WordPress starts with registering them within your theme. This ensures that WordPress knows about the new sizes and can create them when you upload images.

To register additional image sizes, you’ll use the `add_image_size()` function. Here’s the basic format:

add_image_size( 'name-of-size', width, height, crop mode );

Let’s break down each component of the function:

• `name-of-size`: This is the unique name you’ll use to identify the new image size. Choose a descriptive name that reflects its purpose.
• `width`: The desired width of the image in pixels.
• `height`: The desired height of the image in pixels.
• `crop mode`: This determines how WordPress crops the image to fit the specified dimensions. You have two options:
• `true` (Hard Crop Mode): WordPress crops the image to the exact dimensions you defined. This may result in some parts of the original image being cut off.
• `false` (Soft Crop Mode): WordPress resizes the image proportionally without cropping. This ensures the image maintains its original aspect ratio, but it may not match the exact dimensions you specified.

1. Hard Crop Mode

Hard cropping is ideal when you need to ensure that your images have a specific, consistent look. This mode crops the image to the exact dimensions you define, regardless of the original image’s proportions. This is often used for thumbnails, avatars, or images that need to fit into a specific space.

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode

In this example, we’ve created a new image size named `sidebar-thumb` with a width and height of 120 pixels. The `true` value after the height tells WordPress to crop the image to the exact size we’ve defined.

2. Soft Crop Mode

Soft cropping is ideal when you want to resize images proportionally without distorting them. This mode resizes the image based on the defined width, while maintaining the original aspect ratio. The height will adjust accordingly, ensuring the image doesn’t appear stretched or compressed.

add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode

In this example, we’ve created a new image size named `homepage-thumb` with a width of 220 pixels and a height of 180 pixels. Since we haven’t specified `true` after the height, WordPress will use soft cropping, maintaining the image’s proportions.

3. Unlimited Height Mode

Sometimes, you may want to create an image size with a fixed width but allow the height to vary. This is especially useful for long images like infographics, where you don’t want to limit their height but need to control their width to fit your layout.

add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

In this example, we’ve created an image size named `singlepost-thumb` with a width of 590 pixels and an unlimited height. The value `9999` for the height allows WordPress to adjust the height as needed to fit the image without cropping.

Displaying Additional Image Sizes in your WordPress Theme

Once you’ve registered your custom image sizes, you need to use them in your theme. This involves referencing the image size name when displaying the image.

To display an image with a specific size, use the `the_post_thumbnail()` function within your theme files. Here’s how:

Replace `your-specified-image-size` with the name of the image size you registered earlier. For example, to display the `sidebar-thumb` image, use:

This will display the image in your theme with the dimensions you defined for the `sidebar-thumb` image size.

Regenerating Additional Image Sizes

The `add_image_size()` function only creates new image sizes for images uploaded after you register them. If you have existing images in your media library, they won’t have the newly created sizes. To address this, you’ll need to regenerate your image thumbnails.

Here are two popular methods for regenerating image thumbnails:

1. Using a Plugin: Perfect Images

The easiest way to regenerate thumbnails is by using a plugin like Perfect Images. This plugin scans your media library and creates the missing image sizes for all your uploaded images.

Here’s how to use Perfect Images:

1. Install and Activate: Install the Perfect Images plugin from the WordPress Plugin directory. Activate the plugin to start using it.
2. Go to Media » Perfect Images: Access the Perfect Images settings from your WordPress dashboard. The plugin will scan your media library and display a list of available actions.
3. Select ‘Regenerate All Entries’: From the dropdown menu labeled ‘Bulk Actions,’ select ‘Regenerate All Entries.’ This will regenerate all your thumbnails, including the new image sizes you’ve created.

2. Regenerating Manually

If you prefer not to use a plugin, you can manually regenerate thumbnails using the following steps:

1. Go to Media » Library: Navigate to the Media Library in your WordPress dashboard. This is where you manage all your uploaded images.
2. Select ‘Bulk Actions’: In the dropdown menu labeled ‘Bulk Actions,’ select ‘Regenerate Thumbnails.’
3. Apply to Selection: Click the ‘Apply’ button to regenerate thumbnails for all the selected images. You can either select specific images or regenerate all images in your media library.

Enabling Additional Image Sizes for Your Post Content

While you can use the newly registered image sizes in your theme, they won’t be available in the WordPress editor for post content. To make these sizes accessible within the editor, you need to add a filter to WordPress.

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail',
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

This code adds the new image sizes to the list of available sizes when you upload an image in the WordPress editor. You can then select the desired size for your images directly within the post content.

Bonus Tip: Fixing Image Upload Issue in WordPress

If you’re encountering difficulties uploading images to your WordPress website, here are a few troubleshooting tips:

• Check Your Browser: Different browsers handle uploads differently. Try uploading images using a different browser to rule out browser-specific issues.
• Clear Your Cache: An outdated cache can sometimes interfere with the upload process. Clear your browser cache and your WordPress website’s cache to see if it resolves the problem.
• Disable Plugins: Plugins can sometimes conflict with the image upload process. Temporarily disable all your plugins and try uploading an image again. If the issue is resolved, re-enable your plugins one by one to identify the culprit.
• Check Theme Compatibility: In some cases, your WordPress theme might be causing the issue. If you’re using a custom theme, consider checking the theme’s documentation or contacting the theme developer for assistance.

Conclusion

Creating additional image sizes in WordPress is an essential part of optimizing your website for performance and visual appeal. By registering custom image sizes, you ensure that your images are displayed at the right size, enhance your website’s loading speed, and gain greater control over how images are presented. Remember to regenerate thumbnails after creating new sizes to ensure all your existing images benefit from the optimization.

FAQs

What are the best image sizes for my WordPress website?

There’s no one-size-fits-all answer to this question, as the ideal image sizes will depend on your website’s design, content, and target audience. However, here are some general guidelines:

• Thumbnails (blog feed): 150-300 pixels wide
• Featured Images: 700-1000 pixels wide
• Gallery Images: 600-800 pixels wide
• Sidebar Images: 150-300 pixels wide

How do I choose the right crop mode?

The choice between hard cropping and soft cropping depends on your specific needs. If you need a consistent look and are willing to sacrifice some image content, hard cropping is the way to go. If you want to maintain the image’s original aspect ratio and avoid cropping, soft cropping is the better option.

Can I create more than one image size at once?

Absolutely! You can use the `add_image_size()` function multiple times to register as many custom image sizes as you need. Just ensure each size has a unique name.

How do I use these custom image sizes in my theme?

Use the `the_post_thumbnail()` function with the custom image size name as an argument. For example, to display the `sidebar-thumb` image size, you would use `the_post_thumbnail(‘sidebar-thumb’)`.

What if I want to create different image sizes for specific page types?

You can create image sizes for specific page types using conditional statements in your theme’s functions.php file. For example, you can create a separate image size for blog posts and a different one for pages.

What if my images are larger than the custom sizes I’ve created?

WordPress will automatically resize images to fit the custom sizes you’ve defined, maintaining the image’s aspect ratio.

What if my images are smaller than the custom sizes I’ve created?

If an image is smaller than the custom size, WordPress won’t be able to create a larger version. It will simply display the image at its original size.

Can I use these custom image sizes in my plugins?

Yes, you can use these custom image sizes in your plugins as well. Just ensure the plugin code correctly references the custom image size name.

How can I improve the quality of my images when creating custom sizes?

Use image editing software like Photoshop or GIMP to edit your images before uploading them to WordPress. Ensure the images are in a suitable format like JPEG or PNG and optimize them for web use.

Should I create custom image sizes for every page type on my website?

While it’s good practice to create custom image sizes for common elements like thumbnails and featured images, you don’t necessarily need a separate size for every page type. Focus on creating sizes that meet the most frequent image requirements on your website.

If you’re interested in learning more about tech news, feel free to visit my website: www.naveedahmed.me.