{"id":6410,"date":"2022-10-06T15:47:21","date_gmt":"2022-10-06T08:47:21","guid":{"rendered":"https:\/\/www.indowhiz.com\/articles\/?p=6410"},"modified":"2023-04-01T13:02:23","modified_gmt":"2023-04-01T06:02:23","slug":"manage-wordpress-image-sizes","status":"publish","type":"post","link":"https:\/\/www.indowhiz.com\/articles\/en\/manage-wordpress-image-sizes\/","title":{"rendered":"Managing WordPress Image Size Generations"},"content":{"rendered":"\n<p>When a user uploads an image, WordPress will generate several images by default, in the following sizes <span id=\"e5f47ead-2ef5-4dcc-8bf7-a7e567481a2b\" data-items=\"[&quot;1913381209&quot;]\" class=\"abt-citation\" contenteditable=\"false\">\u200b[1]\u200b<\/span>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Thumbnail = <code>150 x 150 px<\/code><\/li>\n\n\n\n<li>Medium = <code>300 x 300 px<\/code><\/li>\n\n\n\n<li>Medium_large = <code>768 x 0 px<\/code><\/li>\n\n\n\n<li>Large = <code>1024 x 1024 px<\/code><\/li>\n\n\n\n<li>2x Medium Large = <code>1536 x 1536 px<\/code><\/li>\n\n\n\n<li>2x Large =  <code>2048 x 2048 px<\/code><\/li>\n\n\n\n<li>Big (*-scaled) = <code>2560 x 2560 px<\/code><\/li>\n<\/ul>\n\n\n\n<p><em>Note: in the Medium_large size (<code>768 x 0 px<\/code>), zero pixels mean height of the image has no limit set. That is, the width of the image will be 768 px, whereas the height is proportionally based on the origin image.<\/em><\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"599\" height=\"320\" src=\"https:\/\/www.indowhiz.com\/articles\/wp-content\/uploads\/2022\/10\/Wordpress-thumbnail-image-files.jpg\" alt=\"\" class=\"wp-image-6426\"\/><figcaption class=\"wp-element-caption\">Fig. 1. Thumbnail files generated by WordPress<\/figcaption><\/figure>\n\n\n\n<p>WordPress doesn&#8217;t necessarily generate all image sizes, but only generates the ones smaller than the original image size. For example, if you upload an image of <code>800 x 600 px<\/code>, then WordPress only generates Thumbnail, Medium, and Medium_large sizes. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Is it necessary?<\/h2>\n\n\n\n<p>Different image sizes offer different functionality. On a web page, it is essential to find a balance between page loading speed and the quality of the shown images. By using the appropriate dimension of an image, it can reduce unnecessary load while maintaining image quality. Let&#8217;s take a look at the following Fig 2.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.indowhiz.com\/articles\/wp-content\/uploads\/2022\/10\/Website-media-size-usage.jpg\" alt=\"Different image size usage\" class=\"wp-image-6432\" width=\"750\" height=\"735\"\/><figcaption class=\"wp-element-caption\">Fig. 2. Different image size usage<\/figcaption><\/figure>\n\n\n\n<p>Sometimes, you may need to display either &#8220;Medium_large &#8221; or &#8220;Large&#8221; image size (i.e., Fig 2 point A). You don&#8217;t want to display a blurry or grainy image to the readers, because its size is not large enough.<\/p>\n\n\n\n<p>On the contrary, placing several &#8220;Thumbnails&#8221; images is sufficient to fill the boxes in Figure 2 point C. Due to the indistinguishable details, there is no point in loading large image sizes. Using the &#8220;Thumbnails&#8221; size effectively suppresses the number of bytes sent from the server to the browser. As a result, it will speed up page loading.<\/p>\n\n\n\n<p>Without this feature, you may need to manage the dimension in each of your images using third-party software, manually. With this feature, WordPress saves you the trouble <span id=\"d8e0b7dd-901f-4521-82be-9d9bcd032de7\" data-items=\"[&quot;1332333604&quot;]\" class=\"abt-citation\" contenteditable=\"false\">\u200b[2]\u200b<\/span>.<\/p>\n\n\n\n<p>However, keep in mind that, having the same images in different sizes takes extra storage space. In a scenario (Figure 1), uploading a <code>502 KB<\/code> (i.e., <code>3000 x 1414 px<\/code>) image, led WordPress to generate 7 images totaling over <code>677 KB<\/code>.That is, you may need over twice as much space as the original image. <\/p>\n\n\n\n<p>To optimize your website, it is important to know the exact dimensions required for each page. You could edit or disable the WordPress default image size generations. However, trying to use fewer image sizes is better.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Managing image generations<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Using a plugin<\/h3>\n\n\n\n<p>Generally, it is highly recommended to use a plugin for this task. Because it is more convenient and practical. The two most commonly used plugins to manage image size generations are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/image-sizes\/\" target=\"_blank\" rel=\"noreferrer noopener\">Stop Generating Unnecessary Thumbnails<\/a> by Codexpert<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails-advanced\/\" target=\"_blank\" rel=\"noreferrer noopener\">reGenerate Thumbnails Advanced<\/a> by ShortPixel<\/li>\n<\/ul>\n\n\n\n<p>Both plugins offer the convenience of enabling or disabling each image size as needed. In addition, they offer a function to remove unused sizes and regenerate the selected sizes in all of your images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Without a plugin<\/h3>\n\n\n\n<p>You can also enable\/disable the WordPress image size generations without a plugin. However, it involves rather complicated steps.<\/p>\n\n\n\n<p>To manage the &#8220;Thumbnail&#8221;, &#8220;Medium&#8221;, and &#8220;Large&#8221; image size generations:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>On the WordPress admin page, go to <code>Settings<\/code> &gt; <code>Media<\/code><\/li>\n\n\n\n<li>In media settings, as in Fig 3:\n<ul class=\"wp-block-list\">\n<li>To disable the generation (e.g. &#8220;Thumbnail&#8221; size), fill the width and height dimensions with <code>0<\/code> (zero).<\/li>\n\n\n\n<li>To enable\/change the image size for future generations, fill the width and height dimensions according to your needs.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"728\" height=\"670\" src=\"https:\/\/www.indowhiz.com\/articles\/wp-content\/uploads\/2022\/10\/Wordpress-enable-disable-default-image-size.jpg\" alt=\"Enable\/disable default image size generations\" class=\"wp-image-6440\"\/><figcaption class=\"wp-element-caption\">Fig. 3. Enable\/disable default image size generations<\/figcaption><\/figure>\n\n\n\n<p><em>Note: changing only Width or Height (not both) with zero, causes WordPress to generate image size proportional based on the non-zero dimension value. <\/em><\/p>\n\n\n\n<p>Meanwhile, you need the following code snippet to disable 4 other hidden image sizes (i.e., &#8220;Medium_large&#8221;, &#8220;2x Medium Large&#8221;, &#8220;2x Large&#8221;, and &#8220;Big&#8221;). However, if you need to enable any of the image sizes, simply remove the unnecessary part of the code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">\/* Run snippet everywhere *\/\n\n\/\/ Disable \"Medium Large\" (768 x 0)\nadd_filter('intermediate_image_sizes', function($sizes) {\n  return array_diff($sizes, ['medium_large']);  \n});\n\n\/\/ Disable \"2x Medium Large\" and \"2x Large\"\nadd_action( 'init', 'remove_1536_n_2048_image_sizes' );\nfunction remove_1536_n_2048_image_sizes() {\n  remove_image_size( '1536x1536' );   \/\/ Disable 2x Medium Large\n  remove_image_size( '2048x2048' );   \/\/ Disable 2x Large \n}\n\n\/\/ Disable generation of big image size\"*-scaled.jpg\"\nadd_filter('big_image_size_threshold', '__return_false' ); <\/code><\/pre>\n\n\n\n<p>You could also add a custom image size, using the following code snippet <span id=\"f2ff6c61-e6ad-4d10-b47f-18b517231ea3\" data-items=\"[&quot;735003803&quot;]\" class=\"abt-citation\" contenteditable=\"false\">\u200b[3]\u200b<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">\/\/ Add custom image size \nadd_image_size( 'custom_size_name', 1600, 1600 ); \/\/max width and height in pixels<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Optimizing the file size<\/h2>\n\n\n\n<p>Unless you work on gallery or multimedia website, you may want to optimize the file size each image. Such optimization means <a href=\"https:\/\/www.indowhiz.com\/articles\/en\/general-guidelines-to-improve-your-website-speed\/#5_Optimize_images\" target=\"_blank\" rel=\"noreferrer noopener\">compress your image file size<\/a>. &nbsp;<\/p>\n\n\n\n<p>You can use any image optimization plugin or online tools. In the end, this optimization may increase your remaining space a lot.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<section aria-label=\"Bibliography\" class=\"wp-block-abt-bibliography abt-bibliography\" role=\"region\"><ol class=\"abt-bibliography__body\" data-maxoffset=\"3\" data-linespacing=\"1\" data-second-field-align=\"flush\"><li id=\"1913381209\">  <div class=\"csl-entry\">\n    <div class=\"csl-left-margin\">[1]<\/div><div class=\"csl-right-inline\">J. Gererstorfer, \u201cDisable WordPress Image Sizes &#8211; How-to,\u201d <i>Bloggerpilot<\/i>, Jul. 28, 2022. <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/bloggerpilot.com\/en\/disable-wordpress-image-sizes\/\">https:\/\/bloggerpilot.com\/en\/disable-wordpress-image-sizes\/<\/a> (accessed Oct. 07, 2022).<\/div>\n  <\/div>\n<\/li><li id=\"1332333604\">  <div class=\"csl-entry\">\n    <div class=\"csl-left-margin\">[2]<\/div><div class=\"csl-right-inline\">S. Ravoof, \u201cEverything You Need to Know About WordPress Image Sizes,\u201d <i>Kinsta<\/i>, Sep. 16, 2022. <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/kinsta.com\/blog\/wordpress-image-sizes\/\">https:\/\/kinsta.com\/blog\/wordpress-image-sizes\/<\/a> (accessed Oct. 07, 2022).<\/div>\n  <\/div>\n<\/li><li id=\"735003803\">  <div class=\"csl-entry\">\n    <div class=\"csl-left-margin\">[3]<\/div><div class=\"csl-right-inline\">T. Antoniou, \u201cWordPress Image Sizes Explained,\u201d <i>Pressidium<\/i>, Dec. 11, 2021. <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/pressidium.com\/blog\/wordpress-image-sizes-explained\/\">https:\/\/pressidium.com\/blog\/wordpress-image-sizes-explained\/<\/a> (accessed Oct. 07, 2022).<\/div>\n  <\/div>\n<\/li><\/ol><\/section>\n","protected":false},"excerpt":{"rendered":"<p>When a user uploads an image, WordPress will generate several images by default, in the following sizes \u200b[1]\u200b: Note: in the Medium_large size (768 x 0 px), zero pixels mean height of the image has no limit set. That is, the width of the image will be 768 px, whereas the height is proportionally based [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6453,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[510],"tags":[1166,1162,1164,1168,389],"class_list":["post-6410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-image-size","tag-plugin","tag-scaled","tag-thumbnail","tag-wordpress"],"modified_by":"Philip F. E. Adipraja","_links":{"self":[{"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/posts\/6410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/comments?post=6410"}],"version-history":[{"count":3,"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/posts\/6410\/revisions"}],"predecessor-version":[{"id":7981,"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/posts\/6410\/revisions\/7981"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/media\/6453"}],"wp:attachment":[{"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/media?parent=6410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/categories?post=6410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.indowhiz.com\/articles\/wp-json\/wp\/v2\/tags?post=6410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}