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:
https://gist.github.com/8dce79e5c946dd8f76dc.git
Responsive Images?
An even bigger improvement would be to deliver different sized images depending on the screen size. I think this would be possible by filtering the image markup to output multiple urls in data attributes. I.e.: data-small-src, data-medium-src, data-large-src, and then use javascript lazy loading to swap in the appropriate image once screen size had been detected.
I haven’t worked on this problem yet, but I think the page weight savings could be really significant.
Update:
@devinsays I did something like this for using Picturefill/Photon with featured images on http://t.co/hPeNAU4zrX https://t.co/HQMopUehQx
— 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.
This doesn’t work with carousel.
Does anyone know how we can make this work with the carousel lightbox images? My issue is I am running a photography website, and even thou most images look fine, some have very bad and noticeable banding. If I manually add it in it fixes it.