{"id":13513,"date":"2018-12-16T17:32:02","date_gmt":"2018-12-16T17:32:02","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=13513"},"modified":"2025-02-27T06:02:08","modified_gmt":"2025-02-27T06:02:08","slug":"wordpress-images-sizes","status":"publish","type":"post","link":"\/ph\/tutorials\/wordpress-images-sizes","title":{"rendered":"WordPress Image Sizes: Understand Default Image Sizes and How to Change Them"},"content":{"rendered":"<p>Handling images in WordPress can be a challenge. If you don&rsquo;t pay enough attention to the requirements and resolutions, you may get a messy website appearance or it can even impact the loading time. <\/p><p>Therefore, you need to learn about the default WordPress image sizes and how to change them. In this article, we will explain all you need to know about WordPress image sizes, how to customize them, and how to use a WordPress plugin to regenerate image custom image sizes.<\/p><p>\n\n\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-what-are-wordpress-default-images-sizes\">What Are WordPress Default Images Sizes<\/h2><p>WordPress creates four different image sizes when you upload an image with the resolution as follows:<\/p><ul class=\"wp-block-list\">\n<li><strong>Thumbnail<\/strong>: 150 x 150 pixels<\/li>\n\n\n\n<li><strong>Medium size<\/strong>: maximum 300 x 300 pixels<\/li>\n\n\n\n<li><strong>Large size<\/strong>: maximum 1024 x 1024 pixels<\/li>\n\n\n\n<li><strong>Full size<\/strong>: original image size uploaded<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-how-does-wordpress-process-images\">How Does WordPress Process Images<\/h3><p>Once you upload an image to your media library, WordPress will automatically generate additional images with three default sizes and store them separately.<\/p><p>Therefore, you will see four image options when you upload an image. The first three options are called default WordPress image sizes, while the full-size option is the original size that you upload.<\/p><p>WordPress creates these options because placing images in different locations will require different image resolutions. For example, the image resolution in the thumbnail may differ from the image resolution used in the slider.<\/p><p>Thus, you don&rsquo;t need to edit and resize 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.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a href=\"\/ph\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2024\/06\/New-WP_in-text-banner-1024x300.png 1024w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2024\/06\/New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2024\/06\/New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2024\/06\/New-WP_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2024\/06\/New-WP_in-text-banner-1536x450.png 1536w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2024\/06\/New-WP_in-text-banner.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-how-to-change-default-wordpress-image-sizes\">How to Change Default WordPress Image Sizes<\/h2><p>Although WordPress already gives you three default sizes if you decide that these choices don&rsquo;t meet your needs, there are alternatives to get the best size for website images. Maybe, you need smaller thumbnails or wider <a href=\"\/ph\/tutorials\/wordpress-featured-images\/\">featured images<\/a>. Therefore, you need to change the default image size in WordPress. To do so, you can follow the steps below:<\/p><ol class=\"wp-block-list\">\n<li>Go to your Admin Dashboard<\/li>\n\n\n\n<li>Hover your cursor to <strong>Setting &rarr; Media<\/strong><\/li>\n\n\n\n<li>In the Media Settings window, you can adjust the desirable pixels for each size<\/li>\n\n\n\n<li>Hit the <strong>Save Changes<\/strong> button to save the setting.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/media-settings.png\"><img decoding=\"async\" width=\"891\" height=\"620\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/06\/media-settings.png\" alt=\"WordPress image sizes media settings\" class=\"wp-image-87733\" srcset=\"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/06\/media-settings.png 891w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/06\/media-settings-300x209.png 300w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/06\/media-settings-150x104.png 150w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/06\/media-settings-768x534.png 768w\" sizes=\"(max-width: 891px) 100vw, 891px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-how-to-add-your-custom-wordpress-image-size\">How to Add Your Custom WordPress Image Size<\/h2><p>So, you have the three default sizes. Let&rsquo;s say you have thumbnail size image for your thumbnail, medium size image for your post&rsquo;s image, and large size image for your featured image.<\/p><p>But, you realize that you need more default image sizes for your pop up banner and <a href=\"\/ph\/tutorials\/wordpress-widgets\">widgets<\/a>. In this case, you can add custom WordPress image sizes to fulfill those needs.<\/p><h3 class=\"wp-block-heading\" id=\"h-step-1-add-custom-wordpress-image-size-by-editing-the-function-php-file\">Step 1. Add Custom WordPress Image Size by Editing the function.php File<\/h3><p>Some themes give you additional size options. But, if you can&rsquo;t find them, you can add your own custom image sizes.<\/p><p>\n\n\n<div><p class=\"important\"><strong>Important!<\/strong> We will be dealing with code. So, make sure to <a href=\"\/ph\/tutorials\/backup-wordpress\">make a backup<\/a> file and <a href=\"\/ph\/tutorials\/how-to-create-wordpress-child-theme\">create WordPress child theme<\/a> before modifying anything.<\/p><\/div>\n\n\n\n<\/p><ol class=\"wp-block-list\">\n<li>Go to your admin dashboard<\/li>\n\n\n\n<li>Hover your pointer to <strong>Appearance &rarr; Editor<\/strong><\/li>\n\n\n\n<li>Edit the <strong>functions.php<\/strong> file<\/li>\n\n\n\n<li>Copy the script below and paste it in the file\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">add_theme_support( 'pop-up-banner' );<\/pre>\n<\/li>\n\n\n\n<li>Hit the <strong>Update File<\/strong> button.<\/li>\n<\/ol><p>The script above will activate the <strong>add_image_size()<\/strong> function. If this function is already active, you can add new WordPress images such as the following:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_image_size( 'pop-up banner size', 1000, 590 );\nadd_image_size( 'widget size', 220, 180 );<\/pre><p>In these examples, you&rsquo;ll to give the additional size name &ldquo;Pop-up banner size&rdquo; and &ldquo;Widget size.&rdquo; The two numbers following the size name stand for the width and height.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"463\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/edit-functions-php-file.jpg\" alt=\"Edit functions.php file and add custom WordPress image sizes\" class=\"wp-image-13534\" srcset=\"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2018\/12\/edit-functions-php-file.jpg 900w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2018\/12\/edit-functions-php-file-150x77.jpg 150w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2018\/12\/edit-functions-php-file-300x154.jpg 300w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2018\/12\/edit-functions-php-file-768x395.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-step-2-display-the-custom-sizes-in-your-theme\">Step 2. Display the Custom Sizes in Your Theme<\/h3><p>You have successfully added the new custom image sizes. But, it has not been displayed in your WordPress theme. Now, you have to enable the new sizes in your theme.<\/p><p>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:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php the_post_thumbnail( 'your-specified-image-size' ); ?&gt;<\/pre><p>You should change <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">your-specified-image-size<\/code> with the name that you set in the previous step. For example, you can change it into <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">pop-up-banner size<\/code>. After following these steps, you can find pop-up-banner size options when you upload images to your media library.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-regenerate-image-sizes-using-a-plugin\">How to Regenerate Image Sizes Using a Plugin<\/h2><p>Setting a new custom image size in WordPress won&rsquo;t affect your previous images. So, you need to regenerate your previous custom image sizes.<\/p><p>Luckily, you don&rsquo;t need to do it one by one manually. There is a plugin named <a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails\/\" target=\"_blank\" rel=\"noopener noreferrer\">Regenerate Thumbnails<\/a> that will help you to update your previous image size. Follow the steps below to do this.<\/p><ol class=\"wp-block-list\">\n<li>Go to your admin dashboard<\/li>\n\n\n\n<li>Click <strong>Plugins &rarr; Add New<\/strong><\/li>\n\n\n\n<li>Type <strong>Regenerate Thumbnails<\/strong> in the search bar.<\/li>\n\n\n\n<li>Install and Activate the plugin<\/li>\n\n\n\n<li>Now, go to <strong>Tools &rarr; Regenerate Thumbnails<\/strong><\/li>\n\n\n\n<li>Click the <strong>Regenerate Thumbnails For X Attachments<\/strong> Button<\/li>\n\n\n\n<li>Now, all your earlier uploaded images will be regenerated to new image settings.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"370\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/12\/regenerate-thumbnails.jpg\" alt=\"WordPress regenerate thumbnails instructions\" class=\"wp-image-13518\" srcset=\"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2018\/12\/regenerate-thumbnails.jpg 900w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2018\/12\/regenerate-thumbnails-150x62.jpg 150w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2018\/12\/regenerate-thumbnails-300x123.jpg 300w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2018\/12\/regenerate-thumbnails-768x316.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>WordPress image sizes look like a trivial thing, but in fact, can give you a headache. Sometimes you will find that the image file you upload doesn&rsquo;t fulfill the desired size that you want. <\/p><p>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 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 site&rsquo;s loading time. <\/p><p>We hope this article helps you to choose the right images, in the right place, with the right sizes.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Learn Other Advanced WordPress Techniques<\/h4>\n                    <p><a href=\"\/ph\/tutorials\/wordpress-database\">All You Need to Know Guide About WordPress Database<\/a><br>\n<a href=\"\/ph\/tutorials\/complete-wordpress-gdpr-guide\/\">WordPress GDPR Guide<\/a><br>\n<a href=\"\/ph\/tutorials\/wordpress-custom-fields\">How to Add WordPress Custom Fields<\/a><br>\n<a href=\"\/ph\/tutorials\/wordpress-pagination\">How to Setup WordPress Pagination<\/a><br>\n<a href=\"\/ph\/tutorials\/create-a-shortcode-in-wordpress\">How to Create a Shortcode in WordPress<\/a><br>\n<a href=\"\/ph\/tutorials\/optimize-images-wordpress\/\">How to Optimize Images in WordPress<\/a><br>\n<a href=\"\/ph\/tutorials\/speed-up-wordpress\">How to Speed Up a WordPress Site<\/a><\/p>\n                <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Handling images in WordPress can be a challenge. If you don&rsquo;t pay enough attention to the requirements and resolutions, you may get a messy website appearance or it can even impact the loading time. Therefore, you need to learn about the default WordPress image sizes and how to change them. In this article, we will [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ph\/tutorials\/wordpress-images-sizes\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":2,"featured_media":87229,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"WordPress Images Sizes: What It Is and How to Change Them","rank_math_description":"Handling images in WordPress can be a challenge. Learn about the default WordPress image sizes and how to change them.","rank_math_focus_keyword":"WordPress image sizes","footnotes":""},"categories":[22637,22632],"tags":[],"class_list":["post-13513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content-creation","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-images-sizes","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/tamanho-imagens-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/tamanos-de-imagenes-en-wordpress","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/rozmiary-obrazow-w-wordpress","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-images-sizes","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/tamanos-de-imagenes-en-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/tamanos-de-imagenes-en-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/tamanos-de-imagenes-en-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/tamanho-imagens-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-images-sizes","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-images-sizes","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/13513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/comments?post=13513"}],"version-history":[{"count":31,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/13513\/revisions"}],"predecessor-version":[{"id":123636,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/13513\/revisions\/123636"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/media\/87229"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/media?parent=13513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/categories?post=13513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/tags?post=13513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}