WordPress is the best CMS when it comes to customizing images. Because it’s very flexible and very easy to use. Each theme has its own image sizes and WordPress modifies your images to fit into different portions of the site (large, small, thumbnail).
However, if you are not happy with the default image size, you can always change them to your liking.
Imagine webmasters having to edit thousands of images in Photoshop and then upload them. Obviously, it will take them a lot of time. Thus, WordPress does it for you and lets you choose the size. Here is how to add image size to WordPress.
What is a Custom Image Size? Why Use It?
Visitors love to see beautiful images on your website. Images small or large can completely change the appearance of a site. Although, if an image is too large or of low quality, it can have a negative effect on your website’s speed, functionality, etc.
Keep in mind, having quality images and the right image sizes can attract more audience to your website. Below we will explain how you can add image size to WordPress.
How to Add Image Size to WordPress?
To add image sizes or modify the old ones, you need to add a few lines of code to your function.php file. As always, make sure you backup your website in case anything goes wrong. The fastest way to add code is by clicking on the editor, in the appearance section.
Once you are in function.php file, copy and paste the code below:
add_theme_support('post-thumbnails' );
Once you have copied it, click on save. This code will enable the add_image_size() function and you can choose new image sizes in WordPress. Here is an example of what you can add:
// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );
// Add featured image sizes
add_image_size( 'featured-large', 640, 294, true ); // width, height, crop
add_image_size( 'featured-small', 320, 147, true );
// Add other useful image sizes for use through Add Media modal
add_image_size( 'medium-width', 480 );
add_image_size( 'medium-height', 9999, 480 );
add_image_size( 'medium-something', 480, 480 );
// Register the three useful image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
function wpshout_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'medium-width' => __( 'Medium Width' ),
'medium-height' => __( 'Medium Height' ),
'medium-something' => __( 'Medium Something' ),
) );
}
You easily can see what this code does. There are four main parameters in add_image_size():
- $name – a string (required)
- $width – an integer (optional)
- $height – an integer (optional)
- $crop – a boolean (optional)
How to Define the Image Size for the Theme?
After adding image sizes, you must then add them to your theme. To do so, copy the code below to your post loop file in your theme folder:
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
Make sure you change “your-specified-image-size” to the name you have chosen above.
How to Regenerate thumbnails and featured images?
After all of this, you need to regenerate your thumbnails so that the new images appear in their new size. (add_image_size()) can only change the images you upload to your library. After the coding part, old pictures in your library need to be regenerated.
One of the best plugins you can use to regenerate your images is, Regenerate Thumbnails. We have extensively talked about this plugin and regenerating images in our How to regenerate thumbnails in WordPress article.
How to Use New Image Sizes in Posts?
To use your new image sizes in WordPress posts, you will have to install and activate the “Simple Image Sizes” plugin.
After activating simple image sizes, head over to your media and select all the images you want to use in your posts. After installing simple image sizes on your WordPress, you see the “Media page” option in your settings.
In this section, you will be able to see all the image sizes you’ve defined. You will only need to review “show in post insertion” and add your desired images to your post(s). By using simple image sizes in your WordPress dashboard, you can add customized image sizes to your theme as well.