Use webp images for posts

Are you working on the possibility of using the new .webp format on Ghost?
It could be a useful future optimization

More info

Any update in that subject? :slight_smile:

Up up up

Waiting for updating this thread :slight_smile:

yes, we need this :slight_smile:

We need webp.

1 Like

I guess something linke +1 is not able here but it would be very useful. I tested some images and i was able to half or 1/3 their disk space which improves the browsing speed a lot!

The issue was posted 2 years ago and nothing happened: No support for webp images · Issue #9448 · TryGhost/Ghost · GitHub

I would appreciate the support of webp or jpeg 2000 a lot! I hope this is added soon. The CMS don’t need to do anything. Just upload the file, set a link to the image and thats it…

Addition to my last post because there is no “edit” button:
You’re able to create your webp-image and just rename it. Eg from img01.webp to image01.jpg and ghost is able to use the image. When you check your browser (developer tools) you can see that a webp-image is returned and the metadata is correct, too. Even if there is a wrong extension the browser is able to display the image. So you can (temporary) bypass the “only extension gif, jpg, png… are supported” error message.

1 Like

The problem with delivering only webp format images, is that they’re not compatible with either Safari or IE. So, as things stand, assuming your site is visited by the usual cross section of browsers, only ~79% of your readers will see your webp images… :frowning:

Hence, it’s not trivial to support webp, because you need to be able to serve both the less-efficient-but-more-compatible images (gif, jpg, png) and webp, using the most efficient format for the visitor’s browser, depending on whether it supports webp. Implementing this can be done - e.g. checking for the presence of the Accept: image/webp request header, but obviously this complicates things compared to just serving the same image for everyone.

When Safari 14 is released (later this year I think), webp should be accepted by a good chunk more of the different browsers in use, but you’re still going to be excluding some of your audience from seeing your images unless you properly integrate webp with a fallback to a traditional image format.

My current solution is to use ngx-pagespeed in front of ghost, which is great and offers loads of optimisation capabilities above just webp images, but it’s a bit technical to set up.

https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source

I agree that there could be issues with Safari-Users but I don’t care of any IE user anymore TBH.
For my understand: You (as the author of your blog) want to publish images. To have a good loading time yout want to use webp which is often a lot (up to 1/3 of original size) smaller than jpg for example.

I agree that users which are not aware of webp “issues” (some browsers are not able to display webp) and you should inform them. As a “power user” i want to use small files to increase my page loading speed. Today (2020-09-11): Only IE is not support webp and it never will be. MS marked IE offical as obsolete and forces users to use edge (chrome based).

Support for OS X will be added soon, so there is no issue either…
And the server does not care what it has to deliver. When i say: Deliver those static files it doesn’t care of it is an jpg, png, pdf of 5 GB zip file. it just serves this to the client.
So why would the server bother to serve “both” files? There is only “one” file. The one file i added in my article. The one file that i uploaded. The one file i linked…

EDIT: As i said above. I change the file extension to jpg (even if the file is webp) and everything works fine and i can use much smaller files. It’s a “dirty hack” but it works. Especially when your landing page has 6-7 images of your blog-posts and each of them has only 80 kb instead of 250 kb.

6 Likes

I’ll second this, would be great to be able to use the webp variants I use elsewhere around the non-Ghost portions of my site.

Hi,

I think .webp support is long overdue. The format is currently supported on ALL of the major browsers and 92% of internet users browsers.

It could also be combined with the picture tag (Supported by all of the major browsers and compatible with 95% of internet users browsers) to enable support for future image formats like AVIF in the future and at the same time serve older formats like jpg and png.

I also changed extension to jpg and it works. Anybody has information about this ? Why is it a dirty hack ? What is impact on image or loading or quality ?

Wow this is a cool workaround. Thanks @mbedded!

This looks implemented in 4.9.0

1 Like

yes it seems like it, now the question is how to convert all the images and make ghost read them … ?

I think i have part of the answer with this commands that convert all the pictures :

for F in *.jpg; do cwebp $F -o basename ${F%.jpg}.webp; done

but then how to make ghost read all the webp instead of jpg or png ?

I also would be interested in converting all existing images to webp with working links without too much manual work.

1 Like

work around might be converting the images but keeping the file extension to the current. The browser usually recognizes that it’s webp and is able to show it.

Another thing would be manual work within the database with something like search and replace of the fileextension. but i’m not into mySQL to much…

Best,
Markus

1 Like

It seems when I upload animated webp files, Ghost automatically converts it into a still image. Is this by design, or is this a bug?

This wold need some investigation. Might be that the image optimization lib picks it up and removes animation (found this issue describing similar behavior). If you find that’s the case would be cool to open an issue on GH ;)

I do know this is the case when using cloudflare’s image optimization. Animated webp are frozen in the first frame.