Understanding WordPress Image Sizes
Every time you upload an image to your WordPress site, it automatically creates various sizes of that image. These additional versions can use up valuable storage space and complicate your server backups. Fortunately, you can manage these image sizes and stop WordPress from creating unnecessary duplicates. In this guide, I’ll cover the default image sizes, the reasons they’re generated, how to identify excess sizes, and provide a code snippet to prevent WordPress from creating extra images.
Default Image Sizes in WordPress
WordPress has several default image sizes it generates whenever you upload a new file. Here’s a breakdown of these sizes:
- Thumbnail: 150×150 pixels – Customizable thumbnail size.
- Medium: 300×300 pixels – User-defined medium size.
- Medium Large: 768 pixels wide – For responsive and high-DPI displays.
- Large: 1024×1024 pixels – User-defined large size.
- 1536×1536: For retina/high-DPI displays.
- 2048×2048: For high-resolution displays.
- -scaled: ~2560 pixels – Generated if the original image is larger than the big image size threshold.
- Full: Original image size or the largest available size.
Each upload can result in as many as seven additional image versions being created on your server! This doesn’t include any extra sizes your themes or plugins may add.
Image Sizes from Themes and Plugins
Many traditional WordPress themes and plugins generate their own image sizes, often overriding the core defaults to better fit their designs. This can lead to even more image sizes being created, which can bloat your server storage. Common culprits include plugins for directories, events, real estate, eCommerce, Learning Management Systems (LMS), and page builders.
To avoid unnecessary image sizes, always check the documentation for your theme and plugins. Most well-designed themes and plugins offer settings that let you modify or disable these extra sizes. You might also enjoy our guide on Troubleshooting Common SFTP Issues: A Thorough Guide.
Why Does WordPress Create Extra Image Sizes?
Understanding the reasoning behind these additional image sizes can help you make informed decisions about managing them:
- Faster Loading Times: Smaller images load quicker, enhancing user experience.
- Responsive Design: Different sizes suit various screen types, ensuring your site looks great on any device.
- Consistency: Maintaining uniformity for featured images across your site.
- High-Resolution Compatibility: Smaller versions are available for devices with high-DPI screens.
- Performance: Scaled images improve server efficiency.
Configuring Image Size Settings
If you want to minimize the number of image sizes generated, you can adjust settings in WordPress. By navigating to Settings > Media, you can set the dimensions for thumbnail, medium, and large image sizes. Setting width and height to zero will prevent WordPress from creating those sizes altogether. I recommend doing this as a first step when setting up a new site. (W3Techs)
Understanding the Big Image Size Threshold
Introduced in WordPress 5.3.0, the Big Image Size Threshold defines the maximum dimensions an image can have before WordPress generates additional sizes. The default setting is 2560 pixels. If you upload an image exceeding this threshold, WordPress will scale it down and create extra sizes based on the smaller version.
Disabling or Modifying the Big Image Size Threshold
If your site regularly uses large images (like a photography site), you may want to adjust or disable this threshold. Use the following code snippet to do so:
// Disable the big image size threshold
add_filter('big_image_size_threshold', '__return_false');
However, be cautious! Disabling this feature can lead to server performance issues. If you primarily upload smaller images, it’s fine to disable it, but for larger uploads, consider modifying the threshold instead:
// Modify the big image size threshold
add_filter('big_image_size_threshold', function($threshold) {
return 5000;
});
How to Check Registered Image Sizes
WordPress doesn’t provide a straightforward way to view all registered image sizes. However, you can use code to see what’s set up: For more tips, check out Domain Hosting vs Web Hosting: What You Actually Need to Get.
Quick Code Method
Paste this code into your functions.php file to display registered image sizes on your site:
add_action('wp_head', function() { echo '(WordPress.org)'; foreach ((array) wp_get_registered_image_subsizes() as $size => $dims) { $width = $dims['width'] ?? 0; $height = $dims['height'] ?? 0; echo "{$size}: {$width}x{$height}\n"; } echo '';
});
Remember to remove the code after you’ve copied the information.
Displaying Image Sizes in WP Admin
If you want to see registered image sizes directly in your WordPress admin, you can use this snippet. It adds a table of image sizes in the Settings > Media section:
add_action('admin_init', function() { add_settings_section( 'dummy_registered_image_sizes_info', esc_html__('Registered Image Sizes', 'text_domain'), function() { echo ''; echo '
'; } ); });'; foreach ((array) wp_get_registered_image_subsizes() as $size => $dims) { echo " ' . esc_html__('Name', 'text_domain') . ' ' . esc_html__('Dimensions', 'text_domain') . ' "; } echo ' {$size} {$dims['width']}x{$dims['height']} Conclusion
Managing image sizes in WordPress can save you storage space and improve your site's performance. By understanding the reasons behind the default image sizes and taking control over them, you can smooth out your website’s media handling. Whether you want to disable unnecessary sizes or modify how WordPress handles large images, the code snippets provided will help you get started. Take charge of your image sizes today!
FAQs
1. How can I reduce the number of image sizes WordPress generates?
You can adjust the settings in Settings > Media and set the dimensions to zero to prevent WordPress from creating extra sizes.
2. What are the default image sizes created by WordPress?
WordPress creates several default sizes: Thumbnail, Medium, Medium Large, Large, and a few others for specific display needs.
3. Is it safe to disable the Big Image Size Threshold?
It’s generally not recommended to disable it, as it helps with server performance. Consider adjusting it instead if needed. (Google Web.dev)
4. How can I check what image sizes are registered on my site?
You can use code snippets to display registered image sizes either on the front end or in the admin panel.
5. Do plugins also create extra image sizes?
Yes, many plugins register their own image sizes, which can contribute to bloating your server storage.
Similar Articles