Ibexa, Platform.sh and Fastly Image Optimizations

5 min readDec 1, 2020

Context

I love Ibexa DXP (former eZ Platform) because it is based on top of Symfony 5 and it brings everything you need to build a great Digital eXperience Platform and even more for our clients. You’ve got the full Symfony power, a GraphQL API, a cool Admin UI, it’s by definition headless, multilingual, multi-channel, no design in the database, good separation of concerns, great PHP API, you get a Content Repository (a tree/graph and not just a list of Content Items), and, HTTP Cache is well managed. And to me, HTTP Cache is key to scalability, reliability and, performance. And I do like performances.

That’s also why I like Fastly! How could we not, Fastly is a CDN based on Varnish. So if you know HTTP Cache and Varnish you must love Fastly. The best thing about Fastly is the capability of clearing caches based on keys.

There are only two hard things in Computer Science: cache invalidation and naming things — Phil Karlton

When I set up our projects I have long TTLs and a good cache clearing mechanism thanks to Edge Side Includes(ESI), Symfony and, Ibexa DXP. We usually achieve about 98% hit ratio on projects.

But components between the software and the Content Delivery Network (CDN) are as important as the rest of the architecture. My choice is the Platform a as Service (PaaS): Platform.sh.

They provide that glue between the software and the edges (Fastly). With Platform.sh you select the services you want and you use it, you don’t waste time to set them up, optimize them, and patch them, they do that for you (and more: backups, monitoring etc.).

My standard stack is:

PHP 7.4+ (8 is available already) for performances
MySQL 8 for performances and JSON functions. (starting to move to Postgresql on few projects)
Rabbit MQ for asynchronous
Redis for application cache
And Varnish (and/or Fastly) for HTTP cache

Platform.sh is git-driven, for each branch you have on your repository, you get a new environment that is cloned and available right away to test your features. Project managers and clients really appreciate it.

We don’t have Fastly for each of them so we have Varnish (which is the same) on which we fallback.

Fastly Image Optimizer

Fastly as a CDN has cool features like Web Application Firewall but the one of interest here, is the Image Optimizer.

Fastly is already between the world and your architecture (called the origin), it acts as a shield and it optimizes the Time To First Byte (TTFB) because pages your visitors download are closer to them.

So as they are in the middle already, why not acting like an Image Optimizer so your application does not have to handle this?

Well, that is exactly what is Fastly Image Optimizer, it optimizes your images on the fly!

Ibexa DXP default image handling

Let’s step back a bit and review the default Ibexa mechanism regarding images.

By default, Ibexa DXP provides a concept of “variation” (previously known as “aliases”). This is a feature that many CMS still lack. It enables developers to make sure images are rendered in an optimized way in the various places they need to appear, for example: on a homepage at a certain size and on a detailed article page at a different size. This already helps prevents editors from loading super-heavy images directly into pages.

By default, these image variations are generated with LiipImagineBundle, using the underlying Imagine library. It supports GD, Imagick, or Gmagick PHP extensions, and allows you to define a flexible filter to convert your original images into multiple “variations” as well as post processor like PNGQuant, JpegOptim etc.

Ibexa DXP also abstracts the file system using FlySystem. By default, variations are stored on the local file system, but you can configure it to store those images in an AWS S3 bucket if you wish. Obviously, they are generated only once and cleared on demand (e.g. content removal or publication).

Here is an example of a variation definition:

simple:
    reference: ~
    filters:
        — { name: auto_rotate }
        — { name: geometry/scaledownonly, params: [128,128] }
        — { name: strip }

A more complex one:

complex:
    reference: ~
        filters:
            — { name: auto_rotate }
            — { name: geometry/scaledownonly, params: [326,280] }
            — { name: geometry/crop, params: [326, 280, 0, 0] }
            — { name: background, params: { size: [230, 144], color: ‘#FFFFFF’ } }
            — { name: strip }

But with no CDN your architecture still needs to manage the conversion, storage, delivery, and caching. You are also limited to the PHP extension capabilities and the delivery capabilities of your servers/tools/CPUs and memory.

Introducing Nova eZ Fastly Image Optimizer

That is so simple to use that I could not resist releasing an open-source bundle to leverage it for Ibexa DXP, the same way we did for Cloudinary.

Cloudinary is definitely similar and even more powerful but it requires more to setup as well. It could also act as a full Digital Asset Management, this is also an amazing service that you should check out.

The bundle will give you the ability to create variations based on Fastly Image Optimization features. In other words, every manipulation feature available in Fastly will be yours as soon as you finish the installation.

There is no code to change, just the variations to define, and if you don’t define them, the plugin will fallback to the standard handling.

Example of a Fastly variation:

fastlyio_variations:
    bright:
        filters:
            width: 200
            height: 100
            brightness: -50
            blur: 50
            fit: bounds

The “filters” key enables you to use all possibilities and combinations provided by Fastly.

How Does it Work?

The first time the image is requested, Fastly automatically fetches the original image from your architecture(origin) and performs the requested manipulations, caches it, and serves it.

Behind the scene, the bundle adds the correct parameter to indicate to Fastly what are the manipulations to do.

So an image with this URL: https://yoursite.com/var/novactive/storage/images/_aliases/myvariation/2/6/2/5/5262-1-fre-FR/header.png will turn into

https://yoursite.com/var/novactive/storage/images/2/6/2/5/5262–1-fre-FR/header.png?width=800&height=350&fit=bounds

Notice that when using Fastly we do the manipulations on the original images the quality is even better!

That’s it!

Conclusion

There are a lot of reasons that recently your website’s traffic might have increased…(I hope you are all safe wherever you are). Fastly helps to reduce bottleneck on your architecture. Bandwidth, cost, performances, and ultimately user experience are key for your business.

Milliseconds matter!

All the services and software mentioned in this article help you to optimize your value chain and therefore help you to increase your business efficiency.

If you’ve never tried Platform.sh I would really recommend it. No more necessary DevOps tasks, focus on what matters for your business.

The same goes for Ibexa DXP, don’t hesitate to reach out. Don’t select a trendy CMS that needs a complete revamp every 2 years, select a product supported by an editor with a strong ecosystem of partners!

For both, I can do a demo for/with you ;-)

Enjoy!

The package is open-source and available on our Github here: https://github.com/Novactive/NovaeZFastlyImageOptimizerBundle

You can find all the bundles that we proudly maintain here: https://github.com/Novactive/Nova-eZPlatform-Bundles

Novactive by Nextedia supports the Symfony, Ibexa, and Platform.sh communities!