Are you looking for add custom sized images in WordPress? Some developer trying to edit / resizing the photo before uploading it to website but now I am going to introduce new easy method to define the height and width of the images. In this article, I have explained how to add custom size images in WordPress and modify the default images sizes exist in WordPress.
By default, WordPress has its own default images sizes, so when you upload an image into the website it creates additional files for these default sizes. Having custom sizes images can save significant level of time and can boost seo by serving exact scaling images as per the requirement. This is bit advance cause need to edit functions.php file of theme.
Here are the simple steps to add custom image sizes in WordPress, you’ll need to follow these 4 steps:
Step 1. Login into Your WordPress Dashboard through your domain URL/wp-admin
Step 2. Edit your theme’s function.php file and add image sizes function
Step 3. Regenerate thumbnails for previously uploaded images, use lazy load and Compression
Step 4. Use your custom image sizes in WordPress theme
Now, almost ready to go through details.
Step 1: Edit Your Theme’s Function.php File and Add Image Sizes
First, you’ll need to add some function to the functions.php file of your website. If you’ve newbie, you can check out this beginner’s guide to pasting code snippets to your WordPress site. The theme is very crucial part of WordPress site, so must be caution before changing a single line code in WordPress. If you fail to define the function properly might be your sight will crack. So, never forget to take backup before changing code in WordPress as we know prevention is far better than cures.
An easy way to add the code is by going to Appearance » Editor and edit the functions.php file of your theme. Simply paste this function there:
add_theme_support( 'post-thumbnails' );
Don`t forget to hit save button before leaving editor. The function will enables the add_image_size() function, so we can add new WordPress images sizes
Here are some examples that help you add custom image sizes on your site:
add_image_size( 'slider-image', 1200, 650 ); ( Here, width = 1200px , Height = 650) add_image_size( 'blog-image', 220, 180 ); add_image_size( 'fullpage-thumbnail', 590, 9999 );
In these examples, you can choose your custom name as per required place (like slider-image) of your choice to add the image sizes to your theme.
Step 2: Display Custom Sizes images in theme directory
After adding the new image sizes, the next step you need to do is to display your custom sizes in WordPress theme. Just you need to copy this code, edit as per required image size and use under the loop.
<?php the_post_thumbnail( ‘your-specified-image-size-name’ ); ?>
In this code, you need to change ‘your-specified-image-size-name’ with the image name you set in the previous step (like ‘slider-image’).
Step 3: Regenerate Thumbnails for Previously Uploaded Images
Next you need to regenerate thumbnails in WordPress, so all your previously uploaded images will be updated to the new thumbnail sizes. Regenerate Thumbnails plugins can use to scale previously uploaded images.
I recommend you to use the Smush plugin for lazy load and compression feature. It will update your WordPress images to the custom sizes you added in previous steps, compress the image size and use lazy load. The lazy load significantly decreases your webpage size by using compress and lazy load algorithm. It also helps to significantly boost search engine optimization by reducing the website loading time.