What are WordPress Image Sizes and How to Change Them?
WordPress image sizes are a major factor in the performance of any site. Marketing professional Jeff Bullas found out that web pages with images get about 94% more total views.
But despite the benefits of images, using the wrong image size can affect the look and feel of your website. Large images can affect your loading speed and search engine ranking, while images that are too small can make your website look messy.
As such, it’s important to learn about WordPress image sizes, and how to apply them properly. This article explains everything you need to control your image sizes and improve their overall performance.
Table of Content:
- What is an Image Size?
- How to Change Default Image Sizes
- How to Change Image Size Using WordPress Image Editor
- How to Change Image Size on your Posts or Pages
- How to Add Custom WordPress Image Sizes
- How To Optimize Your Image
- Conclusion
- Frequently Asked Questions
What is an Image Size?
The term “image size” refers to the dimensions (width and height) of the WordPress image sizes in pixels. The image size is an important attribute that determines the visual resolution and overall quality of the image.
The size of an image can also refer to its file size. An image with dimensions of 8000×8000 pixels may be too large for a webpage. Similarly, an image with a file size of 9 MB is also too large for a webpage.
When working on WordPress image size, you need to create a balance between the dimensions and file size.
Why are WordPress Image Sizes Important?
Improperly sized images can hurt your site in a lot of ways. Here are the roles WordPress image sizes play on WordPress websites.
- Page Load Speed: large images can significantly slow down the loading speed of your website. Large images can result in longer loading times on your site.
- User Experience: The chances of a visitor leaving your WordPress site increase with every second it takes to load. Optimizing the size of your images ensures a faster browsing experience for your visitors.
- Mobile Responsiveness: Mobile users often have limited data plans and slower connections. When you optimize image sizes for smaller screens and lower bandwidth, it helps deliver a better experience for mobile visitors.
- Search Engine Optimization (SEO): Page speed is a major ranking factor on Google and other search engines. Faster-loading pages have a higher chance of ranking in search results. Using the right image sizes increases your site speed and the likelihood of ranking highly on search engines.
How Does WordPress Process Images?
When you upload an image to the WordPress image library, WordPress generates three additional default image sizes; thumbnail, medium, large, and full-size.
As such, you will end up with 4 images. The first three are the generated images, while the ‘full-size’ is the original you uploaded. The default resolution of the generated image sizes may be as follows:
- Thumbnail: 150px square
- Medium size: 300px maximum width and height
- Large size: 1024px maximum width and height
- Full size: the original size you uploaded
WordPress uses various image sizes for different areas. Thumbnail images are typically used for blog previews, while the large WordPress image sizes are used for WordPress header images.
The default image sizes on your website may, however, slightly differ from what we have here, depending on the theme you use.
Fortunately, you can change the image sizes as you want.
How to Change Default Image Sizes
You can adjust the default WordPress image size set to whatever you want.
To do this, go to Settings >> Media from your WordPress dashboard.
This will take you to the “Media Settings” page, where you can change the default image sizes.
For instance, if you want to change the Thumbnail size, you will just type in the new height and width.
Once you are done, scroll down and click on Save Changes to save the modified sizes.
How to Change Image Size Using WordPress Image Editor
The WordPress image editor provides one of the easiest ways to set the sizes for featured images, blog images, and other image applications on your site. The editor allows you to manually edit the size of each image you upload to the WordPress Media library.
To edit an image using the editor, go to Media>>Library.
Then click on the image you want to edit.
Next, click on Edit Image.
This will open the image editor. Now, you can set custom width and height.
For example, the original size of the image below is 2560 x 2048. Let’s say we want to change the image size to 1380 x 1024. We will enter the size and then click Scale to process the image editing.
Then click Save.
Now, the full size of the image will change to 1380 x 1024.
How to Change Image Size on your Posts or Pages
WordPress allows you to edit the size of images when you add them to posts or pages. Typically, you will see the edit icon when you select the image you want to edit.
Click on the icon.
This will take you to the image editor.
Click on the “size” section to reveal a drop-down list.
Choose Custom Size from the drop-down.
Now, enter the new width and height you want for the image.
Click Save.
And that is it. The new image size will be applied to the blog or page.
How to Add Custom WordPress Image Sizes
Most often, the three default image sizes may not be sufficient to meet all your needs. Fortunately, you can add custom image sizes to your site.
You can do this either with a WordPress image sizes plugin or by editing your theme’s code.
How to Add Custom WordPress Image Sizes With the Perfect Images Plugin
Perfect Images is an exceptional plugin that gives you control over your image sizes. The plugin allows you to easily create custom image sizes, regenerate existing images, and optimize your images.
To get started, you need to first install the Perfect Images plugin.
Go to Plugins >> Add New Plugin.
Type in ‘’Perfect images” in the search bar. Then look for Perfect Images (Manage Image Sizes, Thumbnails, Replace, Retina) and click Install Now.
Next, click Activate.
Once you activate it, the plugin will appear as “Meow Apps” on the WordPress dashboard.
To create a new WordPress image size, go to Meow Apps >> Perfect Images.
On the “Perfect Images” page, scroll down and click on Add New.
This will bring up a form to fill out. Enter the name for the new custom image size, as well as the weight and height.
Next, decide whether you want to crop images for that size. Cropped images are good for featured images and profile pictures. Selecting Yes crops the image. Choose No if you don’t want cropping.
Click OK once you’ve filled out everything.
The plugin will create the new WordPress image size for your WordPress site.
And that’s it. You’ve successfully added a new image size to your website. You can follow the same steps to add additional image sizes.
Most WordPress plugins have no way to check the image sizes. As such, you can use a plugin like Regenerate Thumbnails for this. The plugin lists all the image sizes on the website.
How to Add Custom WordPress Image Sizes Manually
Now let’s look at the steps to adding custom images by editing your theme’s code. While it is simple, this process requires some technical knowledge. So it’s best to leave it to a professional if you have no coding experience.
To get started, you first have to create a backup for your website. It’s important to do this to protect your data in case anything goes wrong during the process. This article explains how to perform a regular WordPress backup for your website.
Once you have completed the backup process, navigate to the WordPress dashboard.
Then go to Appearance >> Editor or Theme File Editor.
You will likely get a warning about editing the code.
Just click I understand to proceed.
Activate Custom Images Support
The first step to adding custom images to your website is to activate support for post thumbnails. To do this, you need to add the add_theme_support string below into the WordPress image sizes php file of your website:
add_theme_support( 'post-thumbnails' );
Click on the functions.php file.
Next, search to see whether the add_theme_support string is already there.
If the code is not there, paste it in. Then click Update File.
This will activate the function that allows you to add custom images to your site.
Add Custom Image Code
The next step is to add the code for the custom image size you want to create.
To do this, you have to locate and edit the “add_image_size” code in the functions.php file.
First, check whether the code is already there using the search function to find it. If it’s not there, then you can add it. Here’s the “add_image_size” code:
add_image_size( 'name', width, height, true/false );
Now let’s look at the parameters in the code. The first argument is the ‘name,’ which represents the name you want for the image size. It is important to choose a descriptive image sizes name.
The second and third arguments are the width and height in pixels. You can choose any specific image size you want. The last parameter is the cropping. This allows you to define the cropping type or its positioning (we will discuss this subsequently).
How to Add a Custom Image Using Code
For example, let’s say you want to add a new image size for blog posts with a height and weight of 1200 x 630 px.
In that case, the code will look like this with no cropping applied:
add_image_size( 'blog-image-size', 1200, 630 );
Once you have pasted the code, click Update File.
Cropping Your Image
Cropping is the last argument of the add_image_size code. This allows you to set the cropping status of the image size by choosing either true or false.
add_image_size( 'name', width, height, true/false );
When you don’t apply cropping to your code, the image just gets shrunken to the new size. However, when you crop an image, a part of it is cut off while the remaining part will adjust to the new size.
If your goal is to reduce the size of the image, then cropping may not be for you since it involves removing elements of the image. Cropping makes sense if cutting out part of the image wouldn’t affect the overall output.
How to Add Cropping for Your Size
To add cropping to an image you have to add “true” to the end of the image size code.
If you don’t want the images to be cropped, then add ‘false’ at the end of it or remove the whole argument. WordPress will not apply cropping if you leave it out entirely.
For example, let’s say we are still considering cropping the 1200 x 630 px blog post image size. In that case, the cropping side of the code will be ‘true,’ like this:
add_image_size( 'blog-image-size', 1200, 630, true );
Your code will look like any of this if you don’t want cropping for the image size.
add_image_size( 'blog-image-size', 1200, 630, false );
add_image_size( 'blog-image-size', 1200, 630, );
Add New Custom Image Sizes to Your Theme
Once you’ve added the custom image size, the next thing is to make your theme display it. To do this, you need to edit the index.php theme file, which contains the posts loop, and add this code to it:
the_post_thumbnail( 'image-size-name' );
Go to Appearance >> Editor or Theme File Editor.
Then click on the index.php file.
Now add the code above to display the new image size for your theme.
Replace the image-size-name with the name of the image size you used in the earlier steps. In our case, the name of the image size was blog-image-size. So our code will look like this:
the_post_thumbnail( 'blog-image-size' );
And that’s it. You will now see the new image size as an option when you upload a new image to your website.
Apply New Image Size to Old Images
The problem with this manual configuration is that it only applies to new images. Older images will retain their current sizes, and you need to update them to apply the new image size.
Fortunately, some plugins allow you to do this. One of those is Regenerate Thumbnails, a free plugin that allows you to update your image sizes.
Update Image Sizes with Regenerate Thumbnails
The Regenerate Thumbnails plugin, as the name suggests, regenerates the WordPress thumbnail sizes for the images in your Media Library. Since we’ve added a new image size, Regenerate Thumbnails will ‘regenerate’ this new size for older images.
To get started, you need to first install the plugin. Go to Plugins>> Add New Plugin.
Now type in “Regenerate Thumbnails” into the search box. Find the Regenerate Thumbnails plugin and click Install Now.
Once installed, click Activate.
The Regenerate Thumbnails Plugin will appear under the Tool menu on your WordPress dashboard.
To regenerate your images, go to Tools >> Regenerate Thumbnails.
Once on the plugin page, you just have to click on Regenerate Thumbnails for all Attachments.
The plugin will take a few seconds/ minutes to regenerate the images to the new WordPress image sizes. And that’s it.
How To Optimize Your Image
WordPress image sizes also entail the image file size. While changing the image dimensions allows you to control the size, you may need to optimize the image without changing the dimensions.
Here are two ways you can optimize your WordPress images size:
Choose The Best Image File Format
The file format you choose, whether it’s PNG, JPEG, or WebP, can affect your image size. For instance, webP images have smaller file sizes compared to PNG files.
As such, you can convert your PNG images to the WebP format to reduce their size. This article explains more about WordPress WebP Images.
Converting your images can, however, potentially lower the image quality. You must compare the quality of the original image to that of the converted one to ensure there’s no noticeable drop in quality.
Plugins like EWWW Image Optimizer, Optimole, and ShortPixel Image Optimizer allow you to control your website image file format.
Compress Your WordPress Images
Another way to reduce the size of an image is to compress it. Image compression involves minimizing the size of an image without degrading its quality.
Compressed images are far lighter than images that aren’t optimized.
Several plugins allow you to quickly compress your images, including Optimole. Once you set up the plugin, it can automatically compress any image you upload.
Conclusion
WordPress image sizes are an important issue that can affect the look, speed, and ranking of WordPress websites.
This guide to WordPress image sizes has explained what image sizes are and how you can change your website’s image sizes. So you can follow the steps outlined above to edit your WordPress default image sizes and add custom sizes.
If you also want to learn more about WordPress images, you should check out this article on how to fix image upload issues in WordPress. A well optimised WordPress image can improve website speed. However, there certain issues that can arise with your site’s image. The article, therefore, explains how to fix these issues.
Remember, the team at FixRunner is ready to meet all your WordPress website needs. We offer custom development, WordPress maintenance, and more. Fill out this form to get a free website review.
Frequently Asked Questions
What are the Image Size Functions in WordPress?
The image size function in WordPress is add_image_size(), which allows you to add custom-size images. The full function is add_image_size( ‘name’, width, height, true/false );. You can also change your default WordPress image sizes by going to Settings >> Media.
How do I get Custom Image size in WordPress?
You can add custom image sizes on WordPress using a plugin like Perfect Images, or you can do it manually with code. The add_image_size() allows you to add custom image sizes by editing your theme’s code.
How do I get the full size Image in WordPress?
When you upload an image to WordPress, it automatically generates three default images in addition to the full-size image. So you will typically have four image options and can just choose the full-size image option when creating a post or page.
Does WordPress Reduce Image Size?
No. WordPress doesn’t reduce your image sizes. However, there are options to reduce your image size after it’s uploaded. You can also use various plugins to reduce the image size.
