WP “optimizing” uploaded PNGs to over 5X original size – FIX

  • swapot

    (@swapot)


    10 months ago

    As I am about to add over 50,000 product photos to a site in development, I am more than concerned about the thumbnails being generated and “optimized” by WordPress. Between WordPress, Woocommerce, and my theme, 11 additional thumbnail images were being created from each original. I am figuring out with ones are necessary, but have not figured out how to adjust the “optimization”.

    My image files are fairly simple, line art 8-bit PNG (<256 colors) files that are already optimized from Adobe Illustrator. The screen shot below shows two images, “AAA.png” and “AAAE.png” that are both 1200 x 1200 px. You can see that the closest thumbnails (in size) created are over 4X and 5X the size of the original.

    I have tried adjusting the “optimization” with these two code snippets added to my functions.php file:

    add_filter(‘jpeg_quality’, function($arg){return 100;});
    add_filter(‘wp_editor_set_quality’, function($arg){return 100;} );

    I tried the above, and I also tried:

    add_filter(‘jpeg_quality’, function($arg){return 60;});
    add_filter(‘wp_editor_set_quality’, function($arg){return 60;} );

    and:

    add_filter(‘jpeg_quality’, function($arg){return 40;});
    add_filter(‘wp_editor_set_quality’, function($arg){return 40;} );

    These made little to no difference in the file sizes. I’m guessing the WordPress optimization settings, which uses ImageMagick to resize and optimize images, are targeting JPG and 24-bit PNG (those usually guilty of large file size), but how can I tweak it for my already optimized 8-bit PNGs? Perhaps the WordPress Imagemagick code is converting my 8-bit PNGs to 24-bit PNGs (or JPGs) before optimizing and resizing them?

    My 50,000 1200 x 1200 px PNG files add up to about 2.5 GB of images. (I do plan to serve those as even smaller Webps, with the PNGs as fallbacks). With WordPress automatic thumbnails and “optimizations”, those files would jump to 53.75 GB!

    Solutions welcome.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    AFAIK the filters only affect JPEG and WEBP images, not PNG.

    Sadly, the image editors available on webservers do a terrible job of optimally compressing images. If this is important to you, I suggest finding an offline utility that does a better job, especially one that can bulk process images. Such a utility will not reduce pixel dimensions to the ones specified by WP. All you can hope for is better compression of existing image files.

    You might consider converting your PNGs to WEBP. That alone should give you much better compression, even more so if you are willing to reduce image quality some.

    Thread Starter swapot

    (@swapot)

    Thanks for the reply bcworkz. I wish I knew for sure if there was a way to play with the PNG optimization settings, if there is one.

    To clarify, I am not relying on WP to optimize my images – I am doing so with Adobe Creative Suite, and Exiftool and ImageMagick on the command line. That’s why I don’t want WP adding the size back on!

    I do plan to convert all of the PNGs to Webp, while keeping the PNGs as a fallback. But what WordPress is doing to Webp is similar:

    The image at the bottom, at 31.5 KB, is the 1200×1200 px original. So even the 768 or 800 px thumbnails (used by Woocommerce for main product images) WP “optimizes” and resizes from a webp are 2X larger than the original photo (and 25% larger on a 2/3 size one!).

    I could just stop WP from making these thumbnails, but I’m not sure if it will mess up the theme and/or Woocommerce. Also, Google Page Insights/Lighthouse will penalize for there not being a resized/responsive image used when the code specifies the image size.

    Not sure of the solution.

    Moderator bcworkz

    (@bcworkz)

    I’m not sure if it will mess up the theme and/or Woocommerce.

    I’m not 100% sure, but I’m fairly confident that would mess things up. All I really know is web server image editors do a very poor job with compression. What I typically do is let WP do its thing for the most part. But I do review the resulting files. For very important images or particularly bad compression ratios I’ll re-process the images offline for best optimization and upload the results back, replacing the images that WP generated.

    It’s too much effort to do this for all images, but I find it worth doing in certain cases.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WP “optimizing” uploaded PNGs to over 5X original size – FIX’ is closed to new replies.