Transforming and optimizing external images in Craft CMS

We've all been there. You need to pull in images from some external API, Youtube, Vimeo or maybe the company's core product database, and the images are huge! You need to resize and optimise them to get that perfect performance score. But how? 🤷‍♂️

— Published on January 20, 2021

The thing is, Craft on its own simply can't transform external images. Luckily, Imager X can!

In addition to being able to transform Assets, previously transformed images, and local images, Imager can also transform external images. In fact, there's not much to it, you just pass in an external URL in exactly the same way as you would pass in an asset.

{% set myUrl = 'https://www.somedomain.com/pathto/myimage.jpg' %}

{% set transforms = craft.imagerx.transformImage(myUrl, 
        [{ width: 800 }, { width: 1200 }, { width: 1600 }]),
        { ratio: 16/9, effects: { grayscale: true } }); %}

All the features of Imager X are available when transforming external images.

There're a few config settings related to transforming external images.

By default, Imager downloads the external image and caches it to speed up future requests. This can be turned off by setting cacheRemoteFiles to false. Related to this, there's also cacheDurationRemoteFiles that controls the cache duration for the downloaded image.

URL's come in many flavours, and by default Imager will do some URL encoding to fix the most common issues. If you want/need to opt out of this, you can set useRawExternalUrl to true, which will tell Imager to use the URL exactly how it is.

Similar, Imager will by default remove any query strings on the URL to improve caching. This can be turned off by setting useRemoteUrlQueryString to true, if the query string is essential for matching the correct image.

Consider your site optimized!