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

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. :thinking: But then why does the URL display .jpg?

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.)

3 Likes

I’ve updated our docs to note this behavior.

3 Likes

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. :sweat_smile:

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

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.