June 17, 2020
June 17, 2020
Handling images in WordPress can be a challenge. If you don’t pay enough to the requirements, you may get a messy website appearance wise or it could even impact the loading time. Therefore, you need to learn about the default WordPress image sizes and how to change them. Relax, grab your coffee, and let’s get this done!
Take your WordPress site to the next level and get a secure WordPress hosting solution with Hostinger today!
Once you upload an image to your media library, WordPress will automatically generate additional images with 3 default image sizes and store them separately. Therefore, you will see 4 image options when you are uploading an image. These are the thumbnail, medium, large and full-size options. The first three options are called default WordPress images sizes, while the full-size option is the original image size that you upload.
WordPress creates these options because using different locations for placing images will require different image resolution. For example, the image resolution in the thumbnail may be different than the image resolution used in the slider. Therefore, you don’t need to edit and resize your images manually if you want to use the same images in different places with different resolutions. Only one image is needed and WordPress will do the rest.
By default, WordPress comes with three pre-packaged image sizes. They are:
Although WordPress already gives you 3 default image sizes if you decide that these choices don’t meet your needs, there are alternatives. Maybe, you need smaller thumbnails or wider featured images. Therefore, you need to change the default WordPress image sizes. To do so, you can follow the steps below:
So, you have the 3 default image sizes. Let’s say you have thumbnail size image for your thumbnail, medium size image for your post’s image, and large size image for your slider. But, you realize that you need more default image sizes for your pop up banner and widgets. Can you add custom WordPress image sizes? Yes, you can.
Actually, some themes give you additional image size options. But, if you can’t find them, let’s add our own custom WordPress image size.
add_theme_support( 'pop-up-banner' );
The script above will activate the add_image_size() function. If this function is already active, you can add new WordPress images such as the following:
add_image_size( 'pop-up banner size', 1000, 590 ); add_image_size( 'widget size', 220, 180 );
In these examples, you’ll to give the additional size name “Pop-up banner size” and “Widget size.” The two numbers following the size name stand for the width and height.
You have successfully added the new image sizes. But, it has not been displayed in your theme. Now, you have to enable the new sizes in your theme.
First, make a backup of your site before you make any changes. Access your theme file inside the post loop and edit it. Then, paste this code;
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
You should change ‘your-specified-image-size` with the name that you set in the previous step. For example, you can change it into ‘pop-up-banner size’. After following these steps, you can find pop-up-banner image size options when you upload images to your media library.
You have set a new custom image size in WordPress. But, this change won’t affect your previous images. So, you need to regenerate your previous image sizes.
Luckily, you don’t need to do it one by one manually. There is a plugin named Regenerate Thumbnails that will help you to update your previous image size. Follow the steps below to do this.
WordPress image sizes look like a trivial thing, but in fact, can give you a headache. Sometimes you will find that the image you upload doesn’t fulfill the desired image size that you want. To solve this, you can try two methods. You can change the default WordPress image sizes or add custom image sizes. Before you set up the new image size, remember that uploading big images with a high resolution is not a good idea. Large size images will take up a lot of space and slow down your sites loading time. We hope this article helps you to choose the right images, in the right place, with the right sizes. See you!
June 24 2020
How much should be the largest image size is recommended to achieve high quality at the lowest size? We are optimizing images on our blog for quite some time now and now we need to improve the website speed.
Replied on July 07 2020
Hey there! :) It's hard to tell a "one size fits all" file size, but in general, compressing a JPEG and testing out with the size/quality seems to be the best way to go. Keep in mind that there are many image optimizing plugins to help you with this. Two small tips would be to not install more than 1 image optimizer, as they'd conflict with each other, and use JPEG for the best size/quality ratio by default, and go from there! :)