If you’re a developer building WordPress sites for content creators, this Case Study featuring our WordPress framework, Trellis, is for you! We created Trellis for the publisher who is an …
In its early stages, Mediavine often billed Trellis as a WordPress theme framework, but our vision for this product is so much bigger than that.
- Purchasing a Trellis subscription includes not only the theme itself, but additional FREE plugins like Trellis Images.
- Trellis Images is an image optimization plugin that generates WebP images for your site.
- As all modern web browsers support WebP, once Trellis Images is installed there’s no longer any need to compress your images or run other image optimization services.
- With Trellis Images you’ll score well with Google PageSpeed Insights, save on overall site bandwidth and improve pagespeed and UX for readers, so all Trellis users should install today!
- Trellis Images requires no settings customization. Once installed, the plugin will automatically begin compressing your images.
- 3 important reminders:
- Trellis Images will only generate and serve next-gen image formats if the images are stored and served from your WordPress media library, which is the default set up on most WordPress sites. It will not generate and serve next-gen image formats if your images are served through a CDN or remote URL. That said, we still recommend using a CDN alongside Trellis to serve your site’s other assets.
- Although Trellis Images will automatically begin compressing once installed, it will take time to compress all of your images.
- With Trellis Images, you don’t need any other image compression or optimization plugins or services.
Through a series of plugins meant to replace tools and services publishers would traditionally use in the name of providing a state-of-the-art website, Trellis does much more than a traditional WordPress theme.
With Trellis and all that it provides, websites will be optimized for the new Google Core Web Vitals, plus reader experience and advertising.
Today, we’re discussing one of the first Trellis plugins — free with your purchase of Trellis — that will help fulfill this important mission.
Introducing Trellis Images
Trellis Images is an image optimization plugin.
It produces next generation WebP images designed to be automatically served by Trellis.
What is WebP?
Google Chrome, Firefox, Edge, Opera, and the latest versions of Safari all support a new image format known as WebP.
WebP is the successor to old-school image file formats such as GIF, JPEG and PNG, some of which are over 30 years old.
In human terms, they’re older than some of the bloggers using them. In computer terms, they’re more like dinosaurs.
What makes WebP so innovative? These images are significantly smaller but at the same quality, while supporting all the features you previously needed a combination of GIF, JPEG and PNG to accomplish.
WebP supports transparent backgrounds (what we used PNG for), animation (the dreaded bandwidth-heavy slash awesome GIFs) and serious compression (JPEG) simultaneously.
Yes, it’s the one format to rule them all, and WebP looks fantastic as well. That’s what Trellis Images generates for you.
How Trellis Makes WebP Images
Once a publisher installs Trellis Images, the plugin automatically forms a queue which will go through your images to generate WebP versions of every image requested on your website.
Trellis Images will call home to our Trellis API, which is included — similar to how we generate Critical CSS — in your monthly or yearly Trellis fee.
Our API uses Artificial Intelligence (AI) to analyze your image and pick the perfect amount of compression to use, maintaining the best balance of file size and image quality. This will produce images at a fraction of their original size but look just as good to users.
We then send this image back to your WordPress server which stores it in the file system alongside the original image you uploaded.
Trellis is not touching the original image, only creating new WebP images — and only for images that are actually used on your site.
Does This Mean I Need to Compress the Original Image?
No, and please don’t.
Trellis Images will require additional storage space, but it’s incredibly important not to optimize / shrink your original images.
Why? Think of image compression like old school VCR or cassette tapes. (Really dating myself, I know.) Every copy you make, or each time you compress the material, results in significantly worse quality.
You always want to keep the original image around if you want to make new versions. Think of the re-mastered versions of your favorite songs, movies, etc. They were all created using the originals.
Keep your own “masters” around, in other words. Don’t nix your original images; we encourage you to upgrade your hosting instead.
How Trellis Serves WebP Images
If you’re running a Trellis theme, it will automatically look for WebP versions and serve those to users.
As we mentioned previously, nearly every web browser supports WebP these days, so nearly every visitor to your website will therefore be served this compressed, lightweight version of your image.
On the off-chance that a browser does not support WebP, have no fear. We will serve the original image, whether it’s JPEG, GIF or PNG.
And, while we told you not to compress the originals, WordPress will still shrink them down and serve the appropriate size to readers.
They may be a little larger since they’re uncompressed, but please realize this is only a tiny percentage of readers at this point.
Focus on the vast majority of your audience and upload large, high quality images. Then let Trellis Images do its thing.
How to Install and Configure Trellis Images
As with most of Trellis, Trellis Images is designed to be incredibly easy to install. Our goal is to bring optimal pagespeed and Core Web Vitals to the masses, which means making things work out of the box.
When you purchase Trellis in the Mediavine Marketplace, you’ll receive a download link for Trellis Images. You simply upload it to your plugins directory and activate it. (Check out the full installation guide here!)
That’s it. No configuration needed.
As long as you have a valid Trellis License Key and are running a Trellis theme, you will be soon serving WebP images and passing Google PageSpeed Insights requirements with flying colors.
More importantly, you and your readers will reap the benefits of a huge, real-world speed improvement.
Caveat 1: Trellis Images Takes Time
In order to ensure we don’t overwhelm your server, Trellis Images uses a queuing system to slowly generate your images over time.
We only generate images when they’re requested, making those versions as needed and reducing the storage costs of running Trellis Images.
Real world example: The first time a user requests an image, they may get the original file you uploaded. We’ll then start making a WebP version, which hopefully will be ready by the time the next user comes along.
For older posts, it may take a few days after install for all of them to be generated. But once you’ve been running Trellis Images for awhile, it should be nearly instantaneous.
You can circumvent this by visiting brand new posts in an incognito window after they’re published. This way, you’ll know for a fact that before most actual readers are on that post, the compressed WebP version of your images will be ready to go.
Caveat 2: Trellis Images Doesn’t Serve Your images
Trellis Images is generating the WebP versions for Trellis to serve up. In other words, you need to be running both Trellis and the Trellis Images plugin.
More importantly, Trellis Images isn’t a hosting service, nor is it a CDN. Your web server still does the work of serving your website and its assets (like images) to readers.
That’s why it’s important to make sure your hosting company is well optimized, setting the correct caching headers for images and ideally serving the site (excluding images) from a sitewide CDN.
Trellis Images is the first of many additional plugins we’ll be providing for free with the purchase of Trellis.
As always, we appreciate your patience and support. All of this is geared towards helping you build the most optimized, feature-rich sites on the web, so we promise it will be worth the wait.
Subscribe for Updates
Stay up to date with the latest from Mediavine