PNG with transparency breaks when fallback is converted to JPG

Created on 4 May 2025, 29 days ago

Problem/Motivation

When using the WPF module to generate responsive images, the fallback image is always converted to JPG format. While this works well for most cases, when the original image is a PNG with transparency, the JPG fallback image loses its transparency, resulting in broken or visually incorrect images. Transparent areas in the image appear as solid black or corrupted, making the fallback image unusable.

Steps to reproduce

  1. Upload a transparent PNG image to the Drupal site.
  2. Enable the WebP fallback image generation in the WPF module.
  3. View the image in a browser that does not support WebP.
  4. The fallback image (in JPG format) will have broken transparency (black or corrupted transparent areas).

Proposed resolution

The WPF module should be updated to check if the original image is a PNG with transparency. If this is the case, the fallback image should **remain a PNG** instead of being converted to JPG. This would ensure that the transparency of the image is preserved and the image displays correctly on all browsers, even those that do not support WebP.

Remaining tasks

  • Update the WPF module to detect transparent PNG images and prevent conversion to JPG for fallbacks.
  • Test the solution with various transparent PNG images to ensure transparency is preserved in the fallback image.
  • Update the documentation to reflect the change in behavior for transparent PNGs.

User interface changes

There are no UI changes required for this fix, as the issue is related to the backend image processing logic. No changes will be visible to end-users.

API changes

There are no changes needed to the public API of the WPF module. The change will be internal to the image processing logic.

Data model changes

No changes are required to the data model for this issue. It is related to the way images are handled during the WebP fallback process, and does not affect the database schema or data storage.

📌 Task
Status

Active

Version

1.2

Component

Code

Created by

🇪🇸Spain albefer

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024