It’s actually a lot like working with images on your computer. If you were to open that 200kb original in Photoshop (for example), size it down to 1500×1193, but set the quality at 100%, you’d likely wind up with a smaller image at a larger file size.
WordPress uses your server’s image library, preferably ImageMagick or GD Graphics Library if that’s not available. Both have settings established at the server level, and if either are set to about 90% or higher quality, it’s entirely possible to wind up with a larger file size, just like you would with Photoshop.
Unfortunately, this is all entirely out of WordPress’s hands, it’s up to the server’s configuration.
With regards to what WordPress *can* do though, that 1500×1193 is really just the largest responsive/re-sized version. The 1920×1080 original still exists and can be used if desired.
There are two plugin-based options that may help you avoid this.
1. Jetpack includes a free image CDN called Photon. Whenever an image is viewed, Photon uses the original and dynamically re-sizes and optimizes it based on the actual size of the image desired. So, if you insert a 1920×1080 original into a 300×169 space, Photon will take care of serving an optimized 300×169 version of the original. This saves your server some bandwidth and CPU cycles, and may serve a more optimized image than what your server’s ImageMagick or GD Graphics Library configuration would. https://wordpress.org/plugins/jetpack/
2. For a more locally controlled solution, EWWW Image Optimizer runs its own optimization routines before your server’s ImageMagick or GD Graphics Library and for most people produces generally better results at the compromise of a bit more complexity. https://wordpress.org/plugins/ewww-image-optimizer/
Thank you. For me, if I take the time to refine a large image and compress it down to an acceptable compromise of weight and good looks, a second re-compression through the WordPress process (for the reasons above) has not been a helpful behavior.
In my case, it seems to makes the most sense to use the original image, at least for desktop display. What’s the best way to achieve this? Do I need to input some additional code into the (child) functions.php?
I did just find a smart plugin to reduce the extra image files created when uploading to the library. Very cool! It also doesn’t allow the creation of extra image files unless they’re actually called for. If check-marked, the clean up function will eliminate a mass of unneeded files: “Optimize Images Resizing” by OriginalEXE
So, along with the need to use my original large image, I need to get a handle on how to smartly create only the 2 or 3 extra files for the smaller responsive needs. Is custom css, using media queries, the best way? Anybody?
In my case, it seems to makes the most sense to use the original image, at least for desktop display. What’s the best way to achieve this?
When you insert the image, choose the original size, not any of the other size option.
Also, disable the resizing system entirely by setting each dimension at Settings -> Media to 0.
For each original I had several file sizes showing in the uploads folder but I had only one corresponding image choice showing in the library. Thanks for the advice on the resizing system, I had found that the 0’s worked well.
Now just need to sort out the media queries. Thanks again.
Should mention, with the “Optimize Images Resizing” plugin and the zero WP resizing, only the original image file (e.g. fullsize.jpg) ends up in the uploads folder. Only when the smaller image is needed, for instance when I select a featured image, does the file get uploaded. Now it’s a sensible size. For instance the original was 215kb and the featured shows up as 78kb. All told, 2 files. The plugin works like a charm so far.
Excellent, thanks for letting us know!
