Context

Every image metadata would contain a sources property for every single size available. The property is an associative array where each key on the array represents a mime type and each value on the array would be an associative array with 2 properties on it, the file and filesize of each mime type. For instance, this would like the following data for the medium size

// slice of a metadata from an image  stored in `_wp_attachment_metadata`
array(
  // ...additional image sizes
  'medium'  => array (
    'file' => '7rMFIAVGlVg-240x300.jpeg'
    'width' => 240,
    'height' => 300,
    'mime-type' => 'image/jpeg',
    'sources' => array(
      'image/jpeg' => array(
        'file' => '7rMFIAVGlVg-240x300.jpeg',
        'filesize' => 3831,
      ),
      'image/webp' => array(
        'file' => '7rMFIAVGlVg-240x300.webp',
        'filesize' => 2016
      )
    ),
  )
/// ...additional image sizes
)

The size of each image is expressed in bytes as returned by the filesize function.

Feature Description

Based on the work from:

• When uploading, generate both WebP and jpeg format images by default #142
• Update the_content with the correct image format #149
• Store file size (and other) media metadata #8

And considering the scenario where multiple mime-types coexists for the same image, load the image with the smaller size instead of a specific format. As there might be a case where a specific image compresses better in JPEG than WebP (or if another format is available like AVIF in those cases make sure that the image that is delivered to the client is the image with the smaller file size instead of defined image size.

Logic to deliver an image to the client

• If sources are available
• order sources by filesize
• deliver the first one in the list if is supported otherwise move to the next one on the list until a supported format is found.
• otherwise deliver the former image for the specified size.