{"id":18432,"date":"2021-01-09T15:00:06","date_gmt":"2021-01-09T14:00:06","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=18432"},"modified":"2022-10-31T13:25:28","modified_gmt":"2022-10-31T12:25:28","slug":"wordpress-add-image-size","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-add-image-size\/","title":{"rendered":"How to Create Additional Image Sizes in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Every time you upload an image to your website\u2019s media folder, WordPress generates various versions of that image for you to use. This lets you focus less on resizing those images yourself, and more on creating your website content. WordPress supports default, as well as custom, image size variations.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Currently, the default variations include thumbnail, medium, medium-large, large and full (the original image size). Depending on the theme and plugins you have installed, you could also use some so-called built-in image sizes. Alternatively, you can create your additional image sizes in WordPress, the process of which we\u2019ll be explaining in this article. Please note, some parts of this article contain code, so if you find something unclear we suggest doing additional research.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, let\u2019s proceed to dig deeper into the subject of using WordPress to add image sizes. During the course of this article, we\u2019ll also be answering the following questions:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#registering-the-additional-image-size\">Registering the additional image size<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#make-additional-image-size-selectable-in-wordpress-editor\">Making the additional image size selectable in the WordPress editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-additional-image-size\">Using the additional image size<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#regenerating-image-sizes\">Regenerating image sizes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to create additional image sizes in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]In this section, we will cover all the required steps for creating and using an additional image size in WordPress. As some of the steps require you to add code via FTP, brushing up on your knowledge on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">the use of FTP<\/a> might be needed. We also advise <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-backup-wordpress-files\/\">making a backup of your WordPress files<\/a>, just in case.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"registering-the-additional-image-size\"><\/a>How to register the additional image size<\/h3>\n<p>[\/vc_column_text][vc_column_text]With WordPress, we differentiate default, built-in, and additional image sizes. Defaults include thumbnail (150&#215;150 pixels), medium (300&#215;300 pixels), large (1024&#215;1024 pixels), and full (original image size). There\u2019s also a medium-large (768px in width) that was added in WordPress version 4.4. Built-in images are enabled by your theme, some of your plugins (e.g. WooCommerce), and even WordPress itself. For example, the following image sizes &#8211; 1536&#215;1536 and 2048&#215;2048 were added in <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/_wp_add_additional_image_sizes\/\" target=\"_blank\" rel=\"noopener\">WordPress 5.3<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, when you upload an image to your Media Library, WordPress will automatically generate several versions of that image in all the available sizes\/dimensions. Provided, of course, that the original image size and orientation provide a suitable basis for the resizing. All these new versions will be kept on your server, under wp-content\/uploads; they aren\u2019t kept in your Media Library. So, when you\u2019re adding an image to your page or post and you pick a registered image size for it, WordPress will call on the prepared version from your server.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This also means that your site can get slowed down, especially if you create multiple additional image sizes that will result in even more image versions on your server. This is why it\u2019s particularly important to approach creating additional image sizes with three things on your mind. The first\u2014try to upload optimally sized images in dimensions that you\u2019ll actually be using so you avoid weighing down your server space. The second\u2014occasionally enter your wp-content\/uploads folder to delete the image versions of sizes you don\u2019t need or use the Regenerate Thumbnails plugin to help you. And the third\u2014limit creating custom image sizes to those you specifically plan to use.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want a size beyond the default options, you can register your additional image sizes using the WordPress <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_image_size\/\" target=\"_blank\" rel=\"noopener\">add_image_size()<\/a> function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The add_image_size() function has four parameters: image size ID, image width in pixels, image height in pixels, and the cropping behavior.<\/strong> While the first three are quite straightforward, the fourth parameter this function accepts requires a bit more explanation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you put <em>false<\/em> as the cropping behavior (which is the default value of the parameter), you will enable soft image cropping. Soft cropping scales the image down until it fits the specified dimensions (or at least one of the dimensions) while maintaining the original aspect ratio. As such, the term resizing downwards is probably the more appropriate even though soft cropping is still used.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the other hand, if you specifically put <em>true<\/em> as the cropping behavior, then you will enable hard image cropping. This will crop the image to the specified dimensions using the center of the original image for positioning. You can specify the cropping position by inserting an array with the x and y-axis cropping position. The accepted x-axis values are \u2018left\u2019, \u2018center\u2019 or \u2018right\u2019, while the accepted y-axis values are \u2018top\u2019, \u2018center\u2019 or \u2018bottom\u2019.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s an example of how you can use the add_image_size function for hard cropping:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">add_image_size( 'your-custom-size', 700, 500, array( 'left', 'top' ) );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this example, the image size identifier is called <em>your-custom-size<\/em>, the image size is 700&#215;500 and the image is hard-cropped in the top-left position. Simply put, your new image will take up 700\u00d7500 pixels of the original image&#8217;s top left section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But, before we show the example we made for this article, we need to add two important notices.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Both types of cropping are only possible if the uploaded image is greater in size than the specified image dimensions. Meaning, if the original image is too small, it is not possible to crop or rescale it into a smaller image. This is true for any image size except full, as it retains the original image size. As such, make sure to upload the image in dimensions greater than those you wish to create from that image.\n<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">A prerequisite to adding additional image sizes is to enable support for post thumbnails on the theme you are using. This is done by adding the following bit of code in the functions.php file of your theme before calling the add_image_size() function:\n<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">add_theme_support( 'post-thumbnails' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Knowing that, we can proceed to our actual example. The proper places for adding any code are the functions.php file of your theme or inside <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">a site-specific plugin<\/a>. When creating this article, we have opted for the former. However, we won\u2019t be going into detail on how to insert this code to either of the suggested places as the location is a matter of individual preference. Instead, we will focus on explaining the code in detail. Needless to say, <strong>you can change any of the arguments of the add_image_size() function, as the ones we used were only examples.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Our code represents a custom-made <strong>function called register_custom_image_sizes that is hooked onto the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/after_setup_theme\/\" target=\"_blank\" rel=\"noopener\">after_setup_theme<\/a> hook using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener\">add_action()<\/a> function. The register_custom_image_sizes function contains two parts. One conditional part is for adding theme support for thumbnails and the other part is for registering the two new image sizes. The conditional part adds the support for post thumbnails only if it wasn\u2019t previously added to your theme. The two image sizes we will register have <em>custom-small-square<\/em> and <em>custom-landscape<\/em> as their IDs. The dimensions of the former are 450&#215;450 and it is hard-cropped in the central position, while the latter has the dimensions 1000&#215;600 and it is soft-cropped.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function register_custom_image_sizes() {\r\nif ( ! current_theme_supports( 'post-thumbnails' ) ) {\r\nadd_theme_support( 'post-thumbnails' );\r\n}\r\nadd_image_size( 'custom-small-square', 450, 450, true );\r\nadd_image_size( 'custom-landscape', 1000, 600 );\r\n}\r\nadd_action( 'after_setup_theme', 'register_custom_image_sizes' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Register-Custom-Image-Sizes.jpg\" class=\"attachment-full size-full\" alt=\"Register Custom Image Sizes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Register-Custom-Image-Sizes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Register-Custom-Image-Sizes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Register-Custom-Image-Sizes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Register-Custom-Image-Sizes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Following this example code, you can register any image sizes you like. But, make sure to replace the arguments of the add_image_size() functions with ones that best suit your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"make-additional-image-size-selectable-in-wordpress-editor\"><\/a>How to make the additional image size selectable in the WordPress editor<\/h3>\n<p>[\/vc_column_text][vc_column_text]After registering the new image sizes, you are ready to use them inside your theme. To do so, you would need to edit the corresponding template file with a piece of code that calls one of the added custom image sizes. While that approach is more suited for advanced WordPress users, there is a way to enable a more user-friendly approach. It involves the option to choose the added custom image size for any image added with a WordPress page builder on your page or post. Even though there are WordPress plugins specifically made for this purpose, we have opted to show how to enable this functionality with a simple code snippet as it\u2019s more reliable. As we mentioned earlier, you can either add this snippet to the functions.php file of your theme or inside a site-specific plugin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The code is very simple \u2013 <strong>the add_custom_image_sizes() function that we created is hooked onto an image_size_names_choose filter. The function adds the two newly created image sizes to the array of existing image sizes. The names of those two image sizes are set to <em>Custom Square<\/em> and <em>Custom Landscape<\/em><\/strong>, respectively.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function add_custom_image_sizes( $sizes ) {\r\nreturn array_merge( $sizes, array(\r\n'custom-small-square' =&gt; __( 'Custom Square' ),\r\n'custom-landscape' =&gt; __( 'Custom Landscape' )\r\n) );\r\n}\r\nadd_filter( 'image_size_names_choose', 'add_custom_image_sizes' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Function-Add-Custom-Image-Sizes.jpg\" class=\"attachment-full size-full\" alt=\"Function Add Custom Image Sizes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Function-Add-Custom-Image-Sizes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Function-Add-Custom-Image-Sizes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Function-Add-Custom-Image-Sizes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Function-Add-Custom-Image-Sizes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After adding this code, in the next part of the text, we will explore how to use the added image sizes.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"using-additional-image-size\"><\/a>Using the additional image size<\/h3>\n<p>[\/vc_column_text][vc_column_text]One way of using the additional image sizes is to add code inside the appropriate theme file. The question of which file you need to use depends on two things\u2014the theme\u2019s file structure and where exactly (in which part of the website) you wish to display the image. There are also a couple of different functions you can consider using for adding your additional image size. One of them is <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_post_thumbnail\/\" target=\"_blank\" rel=\"noopener\">the_post_thumbnail()<\/a> function.<strong> It accepts up to two parameters\u2014image size and additional attributes.<\/strong> The image size could be represented using a valid image size identifier or as an array of dimensions, meaning width and height, in pixels. The additional attributes could be a query string or an array of attributes that you wish to add to the image. When displaying images of custom image sizes using this function you should have something that looks like this:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">the_post_thumbnail( 'your-custom-size' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Please note, the part with <em>your-custom-size<\/em> should be replaced with a registered image size identifier. In our example, those would be <em>custom-small-square<\/em> or <em>custom-landscape<\/em>. Also, this function should be used inside a <a href=\"https:\/\/codex.wordpress.org\/The_Loop\" target=\"_blank\" rel=\"noopener\">WordPress Loop<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another function that is very similar to the one above and that you can consider using is the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_the_post_thumbnail\/\" target=\"_blank\" rel=\"noopener\">get_the_post_thumbnail()<\/a> function. <strong>Besides image size and additional attributes, it accepts one more parameter\u2014post ID or <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_post\/\" target=\"_blank\" rel=\"noopener\">WP_Post<\/a> object.<\/strong> You\u2019d add it the same way you would the_post_thumbnail() function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But, as not all WordPress users are comfortable with code, we will show one more way of using additional image sizes on your site. This is managed by choosing them for the appropriate image elements within your chosen editor\/page builder plugin. In the following section, we will show you how to do this for Elementor, WPBakery, and Gutenberg.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are using Elementor as your page builder, you can add an <em>Image<\/em> widget and choose its image size from the appropriately named option within the <em>Content<\/em> tab. The list will contain all the image sizes, including the two we added. Additionally, Elementor has a custom option that allows you to specify the exact dimensions in which you want the image to appear.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Edit-Image-Custom-Landscape.jpg\" class=\"attachment-full size-full\" alt=\"Edit Image Custom Landscape\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Edit-Image-Custom-Landscape.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Edit-Image-Custom-Landscape-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Edit-Image-Custom-Landscape-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Edit-Image-Custom-Landscape-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The procedure is very similar if you are using WPBakery as your page builder. You can add a <em>Single Image<\/em> shortcode, which has an option for inputting image sizes. That option accepts image size IDs, which can be default, built-in, or ones you added yourself. At the same time, it retains the possibility to specify the exact dimensions of the image in pixels.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"624\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Single-Image-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Single Image Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Single-Image-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Single-Image-Settings-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Single-Image-Settings-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Single-Image-Settings-620x399.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the other hand, if you are using Gutenberg as your page builder, the appropriate element is called an <em>image block<\/em>. Then, while having it selected, you can choose an image size from the dropdown on the right side of the screen. The available image sizes are the default ones (though they don\u2019t include <em>medium-large<\/em>) and the custom sizes that we added. Gutenberg also has separate options for specifying the exact dimensions of the image, including the four resizing options: 25%, 50%, 75%, and 100%.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Block.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Image-Size.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Image Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Image-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Image-Size-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Image-Size-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Gutenberg-Image-Size-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This concludes the main part of our guide on how you can create and use additional image sizes in WordPress. In the following section, we will cover a very important last step that ensures the custom image size functionality\u2014image size regeneration.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"regenerating-image-sizes\"><\/a>Regenerating image sizes<\/h3>\n<p>[\/vc_column_text][vc_column_text]It is important to know that the <strong>code for adding custom image sizes works only on images that are uploaded after the code is added<\/strong>. This is because when you upload an image, all registered image size versions of that image are created. That\u2019s possible as long as the original image has sufficient dimensions. However, the process doesn\u2019t work retroactively. Meaning, <strong>after you create an additional image size, the existing images won\u2019t automatically get a new version in the added size<\/strong>. Neither the code nor the page builder options will directly change the image size of an existing image in your content to a newly created size. Therefore, for the whole process to work on your old images, you would need to create new image versions for them, i.e. to <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-regenerate-thumbnails\/\">regenerate your existing images<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If you ever decide to remove an existing image size, you should remove all the image versions corresponding to that image size to save server space.<\/strong> It\u2019s important to do this when switching themes, or when changing the dimensions of the existing image size inside your admin panel using <em>Settings &gt; Media<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Luckily, there are a few WordPress plugins that fulfill all the requirements given above. The most popular of them is the <a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails\/\" target=\"_blank\" rel=\"noopener\">Regenerate Thumbnails<\/a> plugin. It is a very straightforward plugin made specifically for image regeneration.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After you <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install the plugin<\/a>, <strong>navigate to the <em>Tools &gt; Regenerate Thumbnails<\/em> section<\/strong>. On that page, you will see a list of your currently available thumbnail sizes, as well as two buttons. <strong>Press the <em>Regenerate Thumbnails For All X Attachments<\/em> button<\/strong>, where the X will be replaced with the number of attachments you have.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails.jpg\" class=\"attachment-full size-full\" alt=\"Regenerate Thumbnails\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Depending on the number of attachments, the process of regeneration could take quite a while. It is worth noting that there are two additional checkboxes you can select before pressing the <em>Regenerate Thumbnails<\/em> button. Those options are for not regenerating images that are already correctly sized and for deleting image versions of unregistered image sizes. For now, we have opted to leave them set to their default values.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, <strong>if you don\u2019t want to regenerate all your images in bulk, you can access a single image in your Media library and regenerate it by pressing the<em> Regenerate Thumbnails<\/em> button found in the bottom right corner.<\/strong> To regenerate only specific images you want, repeat this process for them one by one.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Media-Image.jpg\" class=\"attachment-full size-full\" alt=\"Regenerate Thumbnails Media Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Media-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Media-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Media-Image-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Media-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, if you opted for bulk regeneration, you will be able to see the progress bar and a list of regenerated images in the top section of the screen. <strong>Wait for the process to complete<\/strong>, after which you will get a success message that will look like the one shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Complete.jpg\" class=\"attachment-full size-full\" alt=\"Regenerate Thumbnails Complete\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Complete.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Complete-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Complete-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Regenerate-Thumbnails-Complete-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Creating custom image sizes in WordPress ensures the optimal display of images across your website while having a positive impact on your website speed. As such, knowing how to use WordPress to add an image size is an important asset for any webmaster. Luckily, the process can be broken down into easy-to-understand steps, which we have covered in detail in this article. And some of the advice we provided could optimize the use of images across your website. Therefore, we highly advise bookmarking this article, as it could keep proving useful for a variety of reasons.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>You have a WordPress site and want to add an image size to expand the existing options? We&#8217;ll show you how in this step-by-step guide.<\/p>\n","protected":false},"author":11229,"featured_media":18643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-18432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/18432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=18432"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/18432\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/18643"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=18432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=18432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=18432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}