There are no affiliate links on PagePipe.
When you optimize images on a website, how do you check how good is good enough? Is it speed performance gains? What’s a healthy media library? What is a sick one? When is an image too big? And when is it right? Here’s what you can do to prevent future problems while fixing image problems.
Many people don’t realize how WordPress creates images. When you upload an image, the media library listing shows only one image. But WordPress creates many different size images from it and stores them on the host server. At least 4 sizes. How many more depends upon the nature of your WordPress theme. We’ve seen as many as 16 various copies of originals plus the big-fat original.
Why does WordPress need so many images?
WordPress swaps the-right-sized image depending upon the view-area of the user’s screens. This helps create a better speedier mobile user experience. Images then aren’t resized with browser math. Math manipulation changes the dimensions onscreen. But the image file size is as heavy and slow as the huge original. Inefficient themes resize a 100-pixel-square thumbnail but it still may weigh 500k. Get 20 thumbnails on a page at 500k each – and you’re in serious trouble for speed. Making images in advance and closer to the actual size needed speeds up mobile page loads.
Because of unlimited server space, few worry about how much extra images take upon the server. Sloppy! There’s a hidden liability for not doing good media-library housekeeping. Most aren’t even aware there’s a problem. There are no indicators – until the fateful day you restore your media library from a backup. You may find the library is too big for your server to restore. Bad news.
UpdraftPlus – Backup/Restore
We backup our sites with automatic schedules to a free Dropbox cloud storage account. We can restore anytime needed. We keep our last two backups and get rid of the oldest. The free backup plugin does backups in packets. This strategy prevents too much server load and consumption of server resources.
We’ve seen the client’s site’s backup – but they cannot restore it. The number of images on the server makes it too much of a burden on the server. The host usually starts throttling the backup. Then the lagging server times out and things freeze.
To reduce the size of backups we use two plugins:
Exclude Image Thumbnails From UpdraftPlus Backups
This free plugin conserves space on our cloud backup space. The original, full-sized image is in backups excluding thumbnails. To restore from backup, we use a regenerate thumbnails plugin.
Regenerate Thumbnails Automatically plugin
Using RTA you can regenerate the thumbnails for all your existing images.
It removes not-used-anymore thumbnails.
So the strategy is: don’t back up all those thumbnails just the originals. If you need to restore, afterward regenerate thumbnails with a utility plugin. Leave the plugin deactivated except when needed during site maintenance.
It’s best to try a restore from backup and see if your media library cooperates. Some plugins like Updraft plus give a warning when the media library is too big. Safety first.
Repairing the media library.
What do you do if you polluted your media library? It’s dangerous work. Especially since you can’t restore backups. You can remove images from your server or use a plugin like the free Media Cleaner plugin.
Proper image compression.
WordPress compresses all JPEG images when uploaded to the media library. Not the original but all copies for smaller sizes and thumbnails. Unless it is a PNG image then it gets a different treatment. The original WordPress JPEG compression level was 90. That was changed to 82. That passes the WebPageTest.org standard of image goodness for speed. It’s a compression level of 50 in Photoshop.
To not compress images, the free Disable JPEG Compression plugin prevents any alterations.
Before we begin retroactive bulk optimizing the media library, we check two things. We find out the total size of the media library on the server — not what is in the media library dashboard.
The Export Media Library plugin exports the media files as a downloaded zip archive.
This plugin helps determine what the decompressed total folder size is after download. We do the same optimizing process afterward. The difference is how much we reduced the media library size. This is an improvement metric. Failing to download your media library is a potential sign you also can’t restore from a backup.
By default now, WordPress lazy loads images. They added it for improving perceived mobile speed.
Use Media File Sizes plugin next to sort by file size to identify the worst offending images. You often don’t need to improve the entire media library. Focus on the 20-percent that cause 80-percent of the speed problem. This plugin adds a column to the Media Library page. It displays the total space used by each media item. For images, this includes the original image as well as any other generated sizes.
We don’t use this plugin as much. But it comes in handy. The Media Library LIST VIEW will include a sortable “Dimensions” column.
One of the worst image culprits for destroying speed is using the wrong image format. Don’t upload PNG photographs from cameras or open-source image libraries like Pixabay.
These harmful images need conversion to lossy-format JPEGs. The best plugin we’ve found for this bulk process is the PNG to JPG plugin. This can make a significant difference on some sites. The site owner may assume lossless PNG images produce ultra-fine quality. They produce ultra-heavy slow-loading images. Lossy images are often called virtually lossless. The human eye can’t tell the difference after optimization to lossy JPEGs. When in doubt, lossy JPEGs are the format of choice.
The last step is resizing JPEGs that are too large. We do not recommend plugins that use APIs or compression on third-party servers. This is overkill and usually costs money based on the volume of images processed. Our preference is to use Imsanity plugin. An unfortunate name for such a good plugin.
Instead of band-aid approaches, we drill down to the root cause of your slow site. This is origin optimization. Also known as site tuning. To do this, we analyze site components:
- Scripts and third-party services.
- Images and media library.
- We minimize globally loading plugin effects.
Find out more details about Site Tuning – Get Speed!