Home » Wordpress » How to Create Predefined Image Sizes in WordPress

How to Create Predefined Image Sizes in WordPress

How to Create Predefined Image Sizes in WordPress
Realizing the fact how images help increase website engagement rate, many website owners are emphasizing on using more and more images on their website. But, remember that using images with larger file-size can increase the page load time. And so, it becomes needful to optimize images on a site. 
Besides, as people are increasingly using different platforms and devices to access a website, it is important that your images not only loads quickly, but should also look great regardless the device it is being accessed.
How to Create Predefined Image Sizes in WordPress
When optimizing images for a WordPress website, you can choose to use compressed images, SVG (scalable vector graphics), and so forth. But, WordPress powered sites often fail to define image sizes, which is a vital component required for optimizing the content-heavy or image-heavy websites.

Wondering How?

Let’s assume you have a 1000px wide original image, the full-size image won’t be used if a 500px image fits the screen size. And a 500px wide space needs to use 500px image rather than scaling it to a larger-size. Simply put, by pre-defining image sizes can help optimize your website images.
In this post, we’ll discuss about ways to define image sizes in a WordPress website. But, prior to that let us first understand How WordPress handles image sizes.

Understanding How Images Are Managed in WordPress

In case, you’ve tried to insert an image in any WordPress blog post or an article, you’ll most likely have come across the image size selector. It helps in inserting different size of images (i.e. small, medium and large). And using the WordPress settings, you can choose to modify the original image size.
So, whenever an image gets uploaded in WordPress, different versions of the images are created, which are then stored separately. Let’s say, for example, you uploaded an image of size 1200×800, then WordPress will create different image versions such as 100×100, 600×400 and 900×600 sizes. So, whenever you’ll choose to display “medium” version of the image, the pre-defined medium version of the image will be used (i.e. 600X400). Thus, you won’t be required to resize the image and make it smaller in size than the original image.
By using pre-defined image sizes prove pretty useful, as it helps save server’s bandwidth and the processing time an image takes on the client computer. It won’t be surprising for you to know that downloading an image of size 600×400 takes less time compared to 1200×800 image.
In case you want to display an image of size 440×380, then simply grab an image of the same size from the server. But, what if you can’t find the image having the exact size as the one you want to be uploaded? Thankfully, WordPress comes with a simple function: add_image_size() that allows you to define many different image sizes for your website.

How to Create Image Sizes?

Let’s now see how the add_image_size() function helps in creating image sizes as per your site needs. For this purpose, simply copy and paste the following code in either your theme’s functions.php file (or a plugin’s file):

< ? php add_image_size( $name, $width, $height, $crop ); ? & gt ; ockquote>

As you can see that the function has passed four parameters. Each of these parameters have a certain meaning to it, as discussed below:
·         $name: this parameter is used assign a name to the new image size
·         $width: it is used to define the width of the post thumbnail in pixels.
·         $height (optional): specifies the height of the post thumbnail in pixels.
·         $crop: the fourth parameter determine the size (i.e. height and width) according to which the image needs to be cropped. By default, this parameter is set to ‘false’, however, in order to create an image of the exact size as you want, set the value of the parameter to ‘true’.

How to Use Custom Image Sizes?

In a WordPress website, images can be uploaded either as Featured images, media library images and within a post. So, once you’ve created custom image sizes, you need to make sure that appropriate images (i.e. the ones having right size) are placed in the right place.

For Featured Images

For using your custom image sizes for WordPress blog post’s featured image, all you need to do is to use the_post_thumbnail() function in the right theme template file, as follows:

if ( has _post_thumbnail() ) {
        the_post_thumbnail( ‘your-custom-size’ );
? & gt ;

Note: In order to enable featured images in your existing theme, you’ll need to include the add_theme_support(‘post-thumbnails’) function in the theme’s functions.php file.

For Media Library Images (Admin)

You can even choose to make your new image sizes placed in the WordPress admin area. For this, you just need to use the “image_size_names_choose” hook as given below:

add_filter( ‘image_size_names_choose’, ‘my_custom_sizes’ ) ; function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
        ‘your-custom-size’ =& gt ; __ ( ‘Your Custom Size Name’ ),    ) ) ; }

For General Media (PHP/Templates)

Lastly, you can display images (based on size) from your WordPress website Media Library using the wp_get_attachment_image() function.

// Let’s assume your Media Library image has a post id of 39…

Note: You can use the wp_get_attachment_image_src() function, if you only need to use the image URL rather than an < img > tag.

Let’s Wrap Up!

That’s it! I hope that going through this post, you will understand how you can optimize your WordPress website images using predefined image size manually. But, if you don’t have much time and need to optimize images quickly, you can find several WordPress plugins that help to improve image performance. 

About the author

Ahfaz Ahmed

Ahfaz Ahmed is a young entrepreneur who loves to write on various topics related to Graphic and Web Design. He has worked on many blogs and also works as a Freelancer. Apart from blogging, he is also a graphic designer and a web developer.

Add Comment

Click here to post a comment

Your email address will not be published. Required fields are marked *


Guide To Infographics

Find Us on Facebook

Pin It on Pinterest