{"id":4334,"date":"2024-03-10T11:19:30","date_gmt":"2024-03-10T05:19:30","guid":{"rendered":"https:\/\/codexpert.io\/?p=4334"},"modified":"2024-10-01T15:34:25","modified_gmt":"2024-10-01T09:34:25","slug":"wordpress-image-sizes-impact-on-server-and-solution","status":"publish","type":"post","link":"https:\/\/codexpert.io\/blog\/wordpress-image-sizes-impact-on-server-and-solution\/","title":{"rendered":"How WordPress image sizes are eating up your server space"},"content":{"rendered":"<div class='cx-content-before'><\/div><p style=\"text-align: center;\"><span style=\"font-weight: 400;\">WordPress image sizes are one of the main reasons your server space is getting filled up quickly. That\u2019s why you need to save server space with the proper strategy. When you upload an image on your <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> site it generates several copies of an image with various image sizes. This affects your website very badly when you have an image-rich website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">All these images on your website can easily eat up your server space without your acknowledgment. The worst part is <a href=\"https:\/\/wordpress.com\/support\/media\/\" target=\"_blank\" rel=\"noopener\">WordPress media library<\/a> will generate image sizes that you won\u2019t even use anytime soon! This means every kilobyte that unnecessary image copies are occupying is a total waste.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">WordPress generates almost 7 additional image sizes for every image you upload. The WordPress image sizes include &#8211;\u00a0<\/span><\/p>\n<table style=\"height: 485px;\" width=\"998\">\n<tbody>\n<tr>\n<td><b>WordPress Image Sizes<\/b><\/td>\n<td><b>Dimensions<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Thumbnail<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Size based on Media settings<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Medium<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Size based on Media settings<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Large<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Size based on Media settings<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Medium Large<\/span><\/td>\n<td><span style=\"font-weight: 400;\">768 px<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">2x Medium Large<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1536 px<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">2x Large<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2048 px<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Scaled<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2560 px<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>More extra thumbnails can be generated depending on the theme for WordPress core functions.<\/p>\n<ul>\n<li><strong>set_post_thumbnail_size()<\/strong> \u2014 Generates a custom size which is used for Featured Images<\/li>\n<li><strong>add_image_size()<\/strong> \u2014 Generates extra images for any specified size(s)<\/li>\n<\/ul>\n<figure id=\"attachment_4337\" aria-describedby=\"caption-attachment-4337\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4337 size-large\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2020\/12\/how-WordPress-Is-Eating-Your-Server-Space-how-to-solve-it-1024x429.png\" alt=\"Different Image Sizes generated in WordPress\" width=\"1024\" height=\"429\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2020\/12\/how-WordPress-Is-Eating-Your-Server-Space-how-to-solve-it-1024x429.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2020\/12\/how-WordPress-Is-Eating-Your-Server-Space-how-to-solve-it-300x126.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2020\/12\/how-WordPress-Is-Eating-Your-Server-Space-how-to-solve-it-768x321.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2020\/12\/how-WordPress-Is-Eating-Your-Server-Space-how-to-solve-it.png 1209w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-4337\" class=\"wp-caption-text\">Different WordPress image sizes are generated on the media library<\/figcaption><\/figure>\n<p>In the picture, we see that <strong>hiking-v1.jpg<\/strong> is the main image, and the rest of them are additional images that have been stored on the server.<\/p>\n<p>In this post, I will show you how to overcome this and save a lot of space on your server. There are 3 strategies to achieve this &#8211;<\/p>\n<ol>\n<li>From the WordPress settings<\/li>\n<li>Applying Code Snippets<\/li>\n<li>Using a plugin<\/li>\n<\/ol>\n<p>You will find more details on these techniques below.<\/p>\n<h3 style=\"text-align: center;\" id=\"cx-heading-1\"><strong>1. From the WordPress settings<\/strong><\/h3>\n<p>WordPress settings have a simple option to set custom image sizes on your site. To do this you need to go to the site\u2019s Admin dashboard. Then follow these steps &#8211;<\/p>\n<p style=\"text-align: center;\"><strong>Click on the Settings tab &gt; Select Media &gt; Image Sizes in the Media settings<\/strong><\/p>\n<figure id=\"attachment_4339\" aria-describedby=\"caption-attachment-4339\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4339\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2020\/12\/How-WordPress-Is-Killing-Your-Server-Space-1024x545.png\" alt=\"Change image sizes in WordPress Media Settings \" width=\"600\" height=\"319\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2020\/12\/How-WordPress-Is-Killing-Your-Server-Space-1024x545.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2020\/12\/How-WordPress-Is-Killing-Your-Server-Space-300x160.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2020\/12\/How-WordPress-Is-Killing-Your-Server-Space-768x409.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2020\/12\/How-WordPress-Is-Killing-Your-Server-Space.png 1257w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-4339\" class=\"wp-caption-text\">Change WordPress image sizes in the Media Settings<\/figcaption><\/figure>\n<p>You need to set the <strong>Thumbnail Size<\/strong>, <strong>Medium Size<\/strong>, and <strong>Large Size<\/strong> to <strong>\u201d0\u201d<\/strong>. This will stop generating these additional WordPress image sizes.<\/p>\n<h3 style=\"text-align: center;\" id=\"cx-heading-2\"><strong>2. Applying Code Snippets<\/strong><\/h3>\n<p>You can also apply a few lines of code to disable the WordPress <strong>image sizes<\/strong>. The following code snippets need to be added to your <strong>theme\u2019s<\/strong> <strong>functions.php<\/strong> file. To do this you need to<\/p>\n<p><strong>Go to Admin dashboard &gt; Click on Theme Editor &gt; Edit the functions.php file<\/strong><\/p>\n<p><strong>Now add this snippet &#8211;<\/strong><\/p>\n<pre>function cx_disable_thumbnail_images( $sizes ) {\n\tunset( $sizes['thumbnail'] ); \/\/ disable thumbnail size\n\treturn $sizes;\n}\nadd_action( 'intermediate_image_sizes_advanced', 'cx_disable_thumbnail_images' );\n\n\n<\/pre>\n<p>For removing <strong>Medium images<\/strong>, add the following code snippet to your theme\u2019s functions.php file.<\/p>\n<pre>function cx_disable_medium_images( $sizes ) {\n\tunset( $sizes['medium'] ); \/\/ disable medium size\n\treturn $sizes;\n}\nadd_action( 'intermediate_image_sizes_advanced', 'cx_disable_medium_images' );\n<\/pre>\n<p>You can disable <strong>Large images<\/strong> with this code snippet &#8211;<\/p>\n<pre>function cx_disable_large_images( $sizes ) {\n\tunset( $sizes['large'] ); \/\/ disable large size\n\treturn $sizes;\n}\nadd_action( 'intermediate_image_sizes_advanced', 'cx_disable_large_images' );\n<\/pre>\n<p>For removing <strong>Medium images<\/strong>, add the following code snippet to your theme\u2019s functions.php file.<\/p>\n<pre>function cx_disable_medium_large_images( $sizes ) {\n\tunset( $sizes['medium_large'] ); \/\/ disable medium_large size\n\treturn $sizes;\n}\nadd_action( 'intermediate_image_sizes_advanced', 'cx_disable_medium_large_images' );\n<\/pre>\n<p><strong>2x Medium Large images<\/strong> can be disabled with this code snippet to our theme\u2019s functions.php file.<\/p>\n<pre>function cx_disable_2x_medium_large_images( $sizes ) {\n\tunset( $sizes['1536x1536'] ); \/\/ disable 2x_medium_large size\n\treturn $sizes;\n}\nadd_action( 'intermediate_image_sizes_advanced', 'cx_disable_2x_medium_large_images' );\n<\/pre>\n<p>You can also disable <strong>2x Large images<\/strong> by adding this one &#8211;<\/p>\n<pre>function cx_disable_2x_large_images( $sizes ) {\n\tunset( $sizes['2048x2048'] ); \/\/ disable 2x_large size\n\treturn $sizes;\n}\nadd_action( 'intermediate_image_sizes_advanced', 'cx_disable_2x_large_images' );\n<\/pre>\n<p><strong>Scaled images<\/strong> can be disabled by using this code snippet &#8211;<\/p>\n<pre>add_filter( 'big_image_size_threshold', '__return_false' );<\/pre>\n<p>If you want to disable <strong>all the additional WordPress image sizes<\/strong> at a time then add this code snippet to the theme\u2019s functions.php file.<\/p>\n<pre>\/\/ disable generated image sizes\nfunction cx_disable_image_sizes( $sizes ) {\n\tunset( $sizes['thumbnail'] ); \/\/ disable thumbnail size\n\tunset( $sizes['medium'] ); \/\/ disable medium size\n\tunset( $sizes['large'] ); \/\/ disable large size\n\tunset( $sizes['medium_large'] ); \/\/ disable medium-large size\n\tunset( $sizes['1536x1536'] ); \/\/ disable 2x medium-large size\n\tunset( $sizes['2048x2048'] ); \/\/ disable 2x large size\n\n\treturn $sizes;\n}\nadd_action('intermediate_image_sizes_advanced', 'cx_disable_image_sizes');\n<\/pre>\n<pre>\/\/ disable scaled image size\nadd_filter( 'big_image_size_threshold', '__return_false' );<\/pre>\n<pre>\/\/ disable other image sizes\nfunction cx_disable_other_image_sizes() {\n\tremove_image_size('post-thumbnail'); \/\/ disable images added via set_post_thumbnail_size()\n\tremove_image_size('another-size'); \/\/ disable any other added image sizes \n}\nadd_action( 'init', 'cx_disable_other_image_sizes' );\n<\/pre>\n<h3 style=\"text-align: center;\" id=\"cx-heading-3\"><strong>3. Using a plugin<\/strong><\/h3>\n<p>If you are not comfortable with using code snippets then using a plugin is the best solution for you. You can easily disable unwanted images with a few clicks by installing a free WordPress Plugin. <a href=\"https:\/\/wordpress.org\/plugins\/image-sizes\/\" target=\"_blank\" rel=\"noopener\">Stop Generating Unnecessary Thumbnails (Formerly Stop Generating Image Sizes)<\/a> is the best plugin to do this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26017 size-full aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2024\/03\/image.webp\" alt=\"ThumbPress Dashboard\" width=\"1219\" height=\"578\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2024\/03\/image.webp 1219w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2024\/03\/image-768x364.webp 768w\" sizes=\"auto, (max-width: 1219px) 100vw, 1219px\" \/><\/p>\n<p>This plugin is compatible with any WordPress environment. So, you don\u2019t need to worry about any conflicts. Also, it is fully compatible with WooCommerce and multi-sites. The most important thing is you can stop generating unnecessary WordPress image sizes without paying a single penny.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26018 size-full aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2024\/03\/disable-thumbnails.webp\" alt=\"Disable Thumbnails\" width=\"1919\" height=\"877\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2024\/03\/disable-thumbnails.webp 1919w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2024\/03\/disable-thumbnails-768x351.webp 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2024\/03\/disable-thumbnails-1536x702.webp 1536w\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" \/><\/p>\n<p>Stop Generating Unnecessary Thumbnails has another amazing feature. You can regenerate thumbnails and delete your previous unwanted images with it. For this, you just need to go to the <strong>Regenerate Thumbnails<\/strong> tab and click on the Regenerate Thumbnails button. That\u2019s it! Hundreds of additional images will be deleted within a few seconds.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-26019 size-full\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2024\/03\/regenrate-thumbnails.webp\" alt=\"Regenerate Thumbnails\" width=\"2048\" height=\"1114\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2024\/03\/regenrate-thumbnails.webp 2048w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2024\/03\/regenrate-thumbnails-768x418.webp 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2024\/03\/regenrate-thumbnails-1536x836.webp 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/p>\n<p>From now you won\u2019t need to have headaches cleaning up and saving your server space again. These methods will do the work for you to keep your websites light and fast.<\/p>\n<div class='cx-content-after'><\/div>","protected":false},"excerpt":{"rendered":"<p>WordPress image sizes are one of the main reasons your server space is getting filled up quickly. That\u2019s why you need to save server space with the proper strategy. When you upload an image on your WordPress site it generates several copies of an image with various image sizes. This affects your website very badly [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":11165,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"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":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","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":[16],"tags":[362],"class_list":["post-4334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-thumbpress"],"_links":{"self":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/4334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/comments?post=4334"}],"version-history":[{"count":1,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/4334\/revisions"}],"predecessor-version":[{"id":28605,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/4334\/revisions\/28605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media\/11165"}],"wp:attachment":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media?parent=4334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/categories?post=4334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/tags?post=4334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}