Photon is a JetPack module that enables your images to be resized and loaded using WordPress.com’s servers. This can can speed up the loading of images for several reasons:
- Photon utilizes multiple levels of caching, including a globally distributed CDN to make sure images are served as fast as possible.
- Lossless compression. All images are losslessly compressed using either OptiPNG or jpegoptim.
- Photon takes advantage of parallel downloads by using multiple sub-domains to load images.
- Images are resized if they exceed the max $content_width set for theme.
Read more in the Photon Developer Docs.
Adjust Image Quality
However, you might be able to squeeze your image sizes even further by using the Photon filters to adjust the quality. Instead of loading images at full quality, you could try 80%.
Here’s a short little plugin I wrote to do that:
I haven’t worked on this problem yet, but I think the page weight savings could be really significant.
— Brady Vercher (@bradyvercher) January 21, 2015
Brady Vercher already had this idea and implemented it for Super Hero News! He used the
element, which is still an HTML spec proposal, but has already been implemented in Chrome and Opera. For other browsers, there’s an excellent polyfill.
The JetPack team also has a proposal to support the
picture element in GitHub. It would be awesome to see this rolled out as a standalone add-on plugin while all the kinks are worked out.
More Tips on Efficient Images in WordPress
I also wrote this post about loading images efficiently in WordPress.