Fixing or resizing wrong image dimensions in WordPress, and especially if you are running an online store with WooCommerce on your website, has become a common problem for many website and eCommerce store owners.
All over the internet, you find questions by puzzled users looking for a solutions to what appears to have become a common problem. (So rest assured, it is not just you!) We believe we have found the fix that will bring back your desired, original image sizes for most situations, combinations, and WordPress configurations out there.
Do note though, it is most likely not what you believe, or what you may think after having read so many of the fixes suggested for this elsewhere — usually involving the Re-Generate Thumbnails plugin or any variation of Image Resizing plugins, of which there are many available in the WordPress Plugin Repository. (This is not, by any means, to say that the excellent Re-Generate Thumbnails or any of the other available plugins for this task aren’t doing their job. They do! Only they aren’t the appropriate fix for the problem we’re talking about here…)
When our staging website or pre-release installation started spitting out images sized incorrectly and cluttering the layout with monster-sized post images and product images in WooCommerce, we tried all kinds of methods and procedures to get rid of the problem. However, none of the CSS inserts, Apache2 .conf changes or similar measures seemed to work. Nor did changing “original image” sizes in the Media Library: these ugly, blown-up images still covered a good part of the screen on desktop, and the entire display on most mobile devices. Applying these hoped-for changes using any ready-made solutions or plugins did not work either.
So these settings, clearly, were not the root cause of the problem, as altering image sizes back one way or the other did not do a thing.
What Actually Fixed the Problem
After more trial and error, it turned out that temporarily deactivating the WooCommerce plugin altogether finally brought the (other) images as well as some sidebar settings back to normal again. And this started to make total sense, as I seemed to remember that WooCommerce had done some slightly larger update just after WordPress itself did the major update to Version 6.1. This was a few days after WordPress’ 6.1-update, and it was the moment those wrong image sizes started occurring. As a longer-standing warning to update PHP from Ver 7.3.x to 7.4 was also present, it seems that WooCommerce finally turned serious about PHP versions. It seems that it all burns down to some updates in PHP’s GD module (which so happens to do image resizing in the WP Media Library, among other things). Despite their declaration “Requires PHP Version: 7.2 or higher“, either WooCommerce does, in fact, strictly require PHP 7.4 for its Versions 7.0.1 and higher or WP from Version 6.1 on out does some awesome behind-the-scenes stuff using specific functions of fairly new GD module versions.
Regardless, our quick to-do list fixing huge-image problems on your website should enable you to get rid of these ugly effects right away, without much guesswork, and return both your WooCommerce product images and overall website, if affected, back to normal. (And if it doesn’t work, we can fix the huge-image problem for you.)
Save Your Time: We Provide the Shortcut
First of all, deactivate all WordPress plugins you may have in your WP installation. As the culprit here likely is connected to WooCommerce, especially start by making sure to
- deactivate the WooCommerce plugin
- sometimes, you’ll immediately see images back to normal without WC running; regardless…:
- go to your Dashboard and check your WordPress version and your PHP version
- if you’re running WP 6.1 or newer but still, for some reason, have PHP 7.3, you’ll need a newer GD module
- to be on the safe side, make a full backup if you need to proceed with any of the below!
- if you know what you’re doing, you may be able to individually update the PHP GD module yourself
- an easier way would be to altogether update PHP on your machine and modPHP for Apache (depending on your individual Linux install, webserver, and overall setup and whether or not these go together automatically)
- the good part is that this way you also cover that update to PHP 7.4 everyone’s talking about (old Version may or may not cause further problems down the road)
- if you do it on the Command Line, type php -v to check if you’re now running PHP 7.4
- type apachectl restart (or restart NGINX, if that’s what you use) to initialize PHP 7.4 for your webserver
- re-activate WooCommerce and check you product images (and blog-post images, if affected)
With that, your product images should be back to normal. The above step-by-step list should take care of fixing the huge-images WordPress problem. It is possible that other setups than only WooCommerce are affected by huge images. If so, the above steps should be applied accordingly by deactivating other plugins you suspect (I would not be surprised if someone out there had similar problems using EDD (Easy Digital Downloads), some image carousel plugins, PhotoVideoStore or similar.
If you do not want to fix it yourself, we can always solve the huge-images problem or do other WordPress troubleshooting for you. Just check out our Shop section on this website for details.
for you. Just check out our Shop section on this website for details.