An integral part of optimizing the speed of your site is ensuring images on your site have a small filesize while still maintaining quality.
Websites with a lot of graphics or photos can really struggle with load times, regardless of how well WordPress manages them. In many cases, the speed savings you gain from optimizing images are marginal and not necessary, but if you see images on your test results taking a long time or have an image-driven site with many high-definition photos or graphics, you will need to ensure they are optimized for web.
To avoid images causing any problems:
- Optimize images to reduce their file size
- Get WordPress to help carry the load
When preparing images for your website, use software that can optimize for web. In Photoshop, you can find this under the Save for Web option.
In most cases, saving as a .jpg at 80 quality will give you enough compression without causing visible quality loss. Keep an eye on the image dimensions too – large images really don’t need to exceed 2000px wide for the average desktop view.
Avoid using .png images unless needed for transparency.
Google has an excellent guide on image optimization to check out for more in-depth information.
Use a CDN
Content delivery networks or CDNs are file hosts that connect to WordPress to serve high-load content such as images and videos.
The free Jetpack plugin created by WordPress includes an image CDN called Photon which uses WordPress.com resources to process your images rather than your server resources and is a recommended solution for sites with a lot of HD image content.
Installing JetPack and enabling Photon:
Install Jetpack by going to Plugins > Add New on your WordPress Dashboard, then Install and activate the plugin. You’ll need to connect to WordPress.com, so if you don’t have an account, you can create one for free and enjoy the other perks, like free web stats. Activate this option under Jetpack > Settings in the Media section.
Photon will host your images from WordPress.com’s content delivery network at a fast speed. It will also compress your images on the fly and ensure an appropriately scaled image is displayed on small screens – leading to an immediate improvement on your mobile speed score.
JetPack is helpful when you have a large number of high-quality photos or graphics being displayed at large sizes, where image compression is a concern or not an option.
In cases where you have a ton of existing images and don’t necessarily need them to be crisp at high resolutions, the following options can be used instead of Jetpack:
Optimize with a Plugin
The Imsanity plugin can help you re-process your media library, cutting your image file sizes down considerably, and will limit files you upload to the max dimensions you set (typically 2000px for large images is good). You may find this plugin available for free under Plugins > Add New by searching for Imsanity. Learn more about this plugin here.
If you just need to regenerate your images to use a new theme's specifications for image sizes, you may install the Regenerate Thumbnails plugin from Plugins > Add New, then run it from Tools > Regen Thumbs. Learn more here.