Support for AVIF image format

Ideas
1

Using to support AVIF/WEBP as sources.

*AVIF support: since Chrome 85 it is enabled and in Firefox 80 can be enabled with a flag.

2

As sharp library seems to support AVIF (sharp - High performance Node.js image processing), would the only missing step to support this format be to add it to the @tryghost/image-transform package? (Utils/transform.js at 8386ba73f371399bca62c822c585c5f589dcdc8b · TryGhost/Utils · GitHub)

and this Merge Request : ✨ Added format option to `img-url` helper by SimonBackx · Pull Request #14962 · TryGhost/Ghost · GitHub ?

3

Firefox has supported AVIF by default since version 93, but it’s not supported in Edge and not supported on Safari on the desktop or iOS. According to “caniuse.com”, AVIF is only supported for 69% of users:

I think it’s reasonable for Ghost to wait until the browser support metric is up to 95% at least.

However, the linked pull request has an interesting idea: What if Ghost had the forward-looking behavior to start storing images in the AVIF now, along with better supported formats? They could be served such that AVIF is delivered if the browser supports to improve performance, while a larger/slower format could be delivered otherwise.

1 Like
4

I think I’ve seen a way of displaying different image types e.g. avif for browsers that support it - can’t remember where or when :frowning:

5

It’s definitely possible to provide different image formats with fallbacks. We have a guide here:

Additionally, our VS Code extension has an automatic snippet that will produce most of this code for you.

1 Like
6

Hi, please is AVIF support coming to version 6? I briefly tried the current version and uploading AVIF did not work.

7

Avif support has been there for a while. :)

8

That is strange :/ I will try it again!

9

Check for console errors when you try to upload. Check for Ghost log errors when you try to upload. And if you find some, please report back with what they are, a copy of the image (in case it’s just your install), and what type of upload (featured image, post body, product card, etc) you were trying to do.

10

Screen Shot 2025-03-01 at 02.39.19
Screen Shot 2025-03-01 at 02.39.19840Ă—536 13 KB

I am trying docker.io/library/ghost:alpine in the “development” mode

podman logs:

[2025-03-01 01:38:31] ERROR "POST /ghost/api/admin/images/upload/" 415 14ms

Please select a valid image.

Error ID:
    e1d55ff0-f63d-11ef-88b0-c52ba433ba8f

----------------------------------------

UnsupportedMediaTypeError: Please select a valid image.
    at uploadValidation (/var/lib/ghost/versions/5.101.2/core/server/web/api/middleware/upload.js:213:25)
    at Layer.handle [as handle_request] (/var/lib/ghost/versions/5.101.2/node_modules/express/lib/router/layer.js:95:5)
    at next (/var/lib/ghost/versions/5.101.2/node_modules/express/lib/router/route.js:149:13)
    at /var/lib/ghost/versions/5.101.2/core/server/web/api/middleware/upload.js:93:9
    at Immediate._onImmediate (/var/lib/ghost/versions/5.101.2/node_modules/multer/lib/make-middleware.js:53:37)
    at process.processImmediate (node:internal/timers:478:21)
11

I stand corrected! I just tried on Ghost Pro, and I also cannot upload AVIF. Which is … weird… because I know it’s possible to write out AVIF with the helper. How to use responsive images in Ghost themes

1 Like
12

With version 6 approaching, is there any chance we will get AVIF support?