Webp format doesn't seem to be found

elijahsgh · September 3, 2024, 9:13pm

On newer themes there is usually a format=webp

I thought the storage adapters would automatically convert uploaded images to webp if, for example, I uploaded a jpeg. I’ve been digging around in storage adapters for quite a while trying to figure out what creates the webp files.

Am I a silly goose that has been uploading jpegs when I should be uploading webp? Where does the format=webp usually come from? Is there something that automatically converts them?

Never mind. I am not a silly goose. There’s something weird going on where formats/webp isn’t created at all even if you upload a webp. :(

Where in here are the webps generated? Or what is supposed to generate them upstream?

github.com

TryGhost/Ghost/blob/v5.92.0/ghost/core/core/server/adapters/storage/LocalStorageBase.js

// # Local File Base Storage module
// The (default) module for storing files using the local file system
const serveStatic = require('../../../shared/express').static;

const fs = require('fs-extra');
const path = require('path');
const tpl = require('@tryghost/tpl');
const errors = require('@tryghost/errors');
const constants = require('@tryghost/constants');
const urlUtils = require('../../../shared/url-utils');
const StorageBase = require('ghost-storage-base');

const messages = {
    notFound: 'File not found',
    notFoundWithRef: 'File not found: {file}',
    cannotRead: 'Could not read file: {file}',
    invalidUrlParameter: `The URL "{url}" is not a valid URL for this site.`
};

class LocalStorageBase extends StorageBase {

This file has been truncated. show original

Cathy_Sarisky · September 3, 2024, 9:29pm

Storage adapters don’t automatically convert formats. Format=webp works for images stored by ghost itself (in the content folder).

I think @jannis did some work on getting formats or sizes working for his setup, but I’m not sure whether he improved the adapter or abandoned it…

elijahsgh · September 3, 2024, 9:40pm

I guess the custom storage adapters are just kind of abandoned?
None of them have been updated in years and I can’t find where the image pipeline makes webp even for localstorage.

Cathy_Sarisky · September 3, 2024, 9:43pm

As I understand it (haven’t looked at that part of the code), the images are actually generated when first requested, not when uploaded. So you might be looking in the wrong place….

elijahsgh · September 3, 2024, 9:57pm

oh hm
Well with a storage adapter it would potentially never hit any sort of read/serve/etc function so I guess that solves why I don’t have a formats/webp

I guess this is the “magic”

github.com

TryGhost/Ghost/blob/fb0f7d284a1a460b3780753bc7ee7aadb8385b49/ghost/core/core/frontend/utils/images.js#L93


      
          
              const {width, height} = imageSizes[requestedSize];
          
              if (!width && !height) {
                  return imagePath;
              }
          
              const [imgBlogUrl, imageName] = imagePath.split(urlUtils.STATIC_IMAGE_URL_PREFIX);
          
              const sizeDirectoryName = prefixIfPresent('w', width) + prefixIfPresent('h', height);
              const formatPrefix = requestedFormat && imageTransform.canTransformToFormat(requestedFormat) ? `/format/${requestedFormat}` : '';
          
              if (!imageName) {
                  return imgBlogUrl;
              }
          
              return [imgBlogUrl, urlUtils.STATIC_IMAGE_URL_PREFIX, `/size/${sizeDirectoryName}`, formatPrefix, imageName].join('');
          };
          
          function prefixIfPresent(prefix, string) {
              return string ? prefix + string : '';

Oh and here:

github.com

TryGhost/Ghost/blob/fb0f7d284a1a460b3780753bc7ee7aadb8385b49/ghost/core/core/frontend/web/middleware/handle-image-sizes.js#L127


      
              }
          
              return imageSize.getOriginalImagePath(imagePath)
                  .then((storagePath) => {
                      return storageInstance.read({path: storagePath});
                  })
                  .then((originalImageBuffer) => {
                      if (originalImageBuffer.length <= 0) {
                          throw new NoContentError();
                      }
                      return imageTransform.resizeFromBuffer(originalImageBuffer, {
                          withoutEnlargement: requestUrlFileExtension !== '.svg',
                          ...imageDimensionConfig,
                          format,
                          timeout: RESIZE_TIMEOUT_SECONDS
                      });
                  })
                  .then((resizedImageBuffer) => {
                      return storageInstance.saveRaw(resizedImageBuffer, req.url);
                  });
          }).then(() => {

jannis · September 4, 2024, 5:37am

I ended up abandoning it in favour of a CDN (which was my use case for using an S3 adapter) – that was less pain than figuring out the sizing issue I faced.

elijahsgh · September 4, 2024, 6:15am

I see.
Yeah I think tomorrow I might hack around in my storage adapter and try to add the webp upload. I’m using GCP.

You’re probably right - would be way easier to just slap a CDN feature on it.

elijahsgh · September 7, 2024, 3:51am

Just FYI this is a horrible rabbit hole.
Even if you convert to webp Ghost still serves everything with a jpeg prefix.

Topic		Replies	Views
How to convert images to webp in the Ghost core? Developer help	4	1035	August 16, 2023
Helper "img_url" is not converting images to WebP or AVIF Bugs	4	650	May 4, 2023
Uploaded images should be in automatic webp format Ideas	4	518	December 17, 2023
Using source theme puts webp links in but there are no webp files in my content directory Themes	2	232	November 20, 2023
File Upload Whitelist Changable? Developer help	1	255	November 28, 2022

Webp format doesn't seem to be found

Related Topics