Helper "img_url" is not converting images to WebP or AVIF

[bourgadotin]

Hi,

I have just tested the functionality of converting images into WebP and AVIF format using the img_url helper on a local configuration and it does not work. Ghost does create a subfolder for WebP and AVIF formats but the file extension is still JPG.

You can see this bug live on this blog made by @RyanF: Ryan Feigenbaum

Here’s an example from this blog of an image that should be converted to WebP format:
https://ryanfeigenbaum.com/content/images/size/w528/format/webp/2022/08/norbert-kowalczyk-dfhjgp-5woo-unsplash_2000_1333.jpg

As you can see a WebP subfolder has been created but it’s still a .jpg image.

Edit: I just tried to download the image and the file format is indeed WebP so the conversion works. But then why does the URL display .jpg?

[RyanF]

As you figured out, the image is converted but its filename stays the same. Because the file extension .jpg isn’t necessary for the image compression/encoding, it isn’t changed. (It helps to keep the image identifiable across its versions.)

[RyanF]

I’ve updated our docs to note this behavior.

[BenjaminRancourt]

Hi Ryan,

To correctly reflect the format of the image, wouldn’t it be better if its extension also reflected it?

Personnaly, I’m always disappointed to download an image that I’m expecting as a JPEG file, but it turns out that was an AVIF or WEBP image. Many applications/websites unfortunately don’t allow to upload one of those new formats. In his case, I need to get back to the image and see if I’m able to find a way to download the original image in JPEG.

For my personnal website, I made some modifications on the img_url helper to have the correct extension in the image filename. I’ve copied them below in case anyone is interessed in them. Note that I’ve also have a tool that pregenerates all the images itself, instead of letting Ghost/Node.js create them. I’m still not sure if it’s a good idea or not, but it’s the setup that I currently have on my personal website for months.

Thus, instead of
https://www.benjaminrancourt.ca/content/images/size/w2000/format/webp/2022/10/pexels-pixabay-45863.jpg,
I have
https://www.benjaminrancourt.ca/content/images/size/w2000/2022/10/pexels-pixabay-45863.webp

BEFORE

  const sizeDirectoryName = prefixIfPresent('w', width) + prefixIfPresent('h', height);
  const formatPrefix = requestedFormat && imageTransform.canTransformToFormat(requestedFormat) ? `/format/${requestedFormat}` : '';

  return [imgBlogUrl, STATIC_IMAGE_URL_PREFIX, `/size/${sizeDirectoryName}`, formatPrefix, imageName].join('');

AFTER

  const sizeDirectoryName = prefixIfPresent('w', width) + prefixIfPresent('h', height);
  const extension = imageName.split('.').pop()
  const imageWithNewExtension = requestedFormat ? imageName.substring(0, imageName.lastIndexOf(extension)) + requestedFormat : imageName;

  return [imgBlogUrl, STATIC_IMAGE_URL_PREFIX, `/size/${sizeDirectoryName}`, imageWithNewExtension].join('');

Reference: ghost/core/core/frontend/helpers/img_url.js