This Directus extension modifies big images on upload to a preset maximum (width, height & quality).
This extension is based on Christian Fuss example with some minor tweaks to it:
- Make it work with current Directus version (^10.8.3)
- Fix the return value of
getTransformation
function to make it compatible with currentgetAsset
implementation.
- There are now several ways to install this extension on your Directus instance (local or managed).
- Install via Directus Marketplace (if available).
- Clone (and build) this repo inside your
extensions
Directus directory. - Install into your project via npm.
- If desired, edit the .env file of your Directus installation to set the environment variables:
# These are the default values if the env variables are not specified EXTENSIONS_SANE_IMAGE_SIZE_UPLOAD_QUALITY=90 EXTENSIONS_SANE_IMAGE_SIZE_MAXSIZE=1920
- Reload your directus process. The Following message should appear:
[12:39:24.309] INFO: Loaded extensions: directus-extension-sane-image-size
Since the files.upload
event is async, you will not see the new image size right away on the content edition interface. If you save the content and reload, you will see the image with the updated file size and dimensions.
Check your image is not bigger than the default value specified at ASSETS_TRANSFORM_IMAGE_MAX_DIMENSION
(See https://docs.directus.io/self-hosted/config-options.html#assets). If you need to handle files bigger than that value, please update your .env file accordingly.
Sharp library (the one used by Directus to handle the images) does not support that feature. The only way could be trying several optimization configurations until the desired size is reached but that is time-consuming and this extension might not be the best place to do so.