Enabling picture element after having uploaded images while JPEG fallbacks were disabled results in invalid markup

[westonruter]

Originally posted in #1439 (comment)

When images are uploaded while "Also output JPEG" is turned off, when that setting and the picture element are later enabled, the result is incorrectly that both the PICTURE > SOURCE and PICTURE > IMG are serving JPEG. When JPEG is not available, a PICTURE should not be served at all since our purpose for PICTURE is exclusively to serve a modern image format with a JPEG fallback.

Steps to reproduce this issue:

1. Activate the plugin
2. Leave the "Also output JPEG" option disabled
3. Upload a few JPEG images
4. Insert these images as a large size in Image blocks
5. Enable "Also output JPEG" and the "Picture element" options

Bug: Go to the frontend and see that it is generating the wrong markup with the IMG being the modern format, not the JPEG fallback:

<picture class="not-transparent wp-picture-99" style="--dominant-color: #828ca3; display: contents;">
    <source type="image/webp" srcset="http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-828x1024.webp 828w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-242x300.webp 242w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-768x950.webp 768w" sizes="(max-width: 650px) 100vw, 650px">
    <img data-has-transparency="false" decoding="async" width="828" height="1024" src="http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-828x1024.webp" alt="" class="not-transparent wp-image-99" srcset="http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-828x1024.webp 828w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-242x300.webp 242w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-768x950.webp 768w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-1241x1536.webp 1241w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-1655x2048.webp 1655w" sizes="(max-width: 650px) 100vw, 650px">
</picture>

The problem here is that there was no JPEG fallback available for this image, so it should be ineligible for the picture element. It should instead be generating:

<img data-has-transparency="false" decoding="async" width="828" height="1024" src="http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-828x1024.webp" alt="" class="not-transparent wp-image-99" srcset="http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-828x1024.webp 828w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-242x300.webp 242w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-768x950.webp 768w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-1241x1536.webp 1241w, http://localhost:8888/wp-content/uploads/2024/08/Spectacled_weaver_Ploceus_ocularis_ocularis_male_Mbombela-1655x2048.webp 1655w" sizes="(max-width: 650px) 100vw, 650px">

In contrast, if I upload another image after I have the "Also output JPEG" and the "Picture element" settings enabled, then I see what is expected:

<picture class="not-transparent wp-picture-102" style="--dominant-color: #62759f; display: contents;">
    <source type="image/webp" srcset="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441-jpg.webp 768w" sizes="(max-width: 650px) 100vw, 650px">
    <source type="image/jpeg" srcset="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588.jpg 1024w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172.jpg 300w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441.jpg 768w" sizes="(max-width: 650px) 100vw, 650px">
    <img data-dominant-color="62759f" data-has-transparency="false" decoding="async" width="1024" height="588" src="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp" alt="" class="not-transparent wp-image-102" srcset="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441-jpg.webp 768w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1536x882.jpg 1536w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-2048x1176.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px">
</picture>

There should be some message shown with the Picture element setting to say something like:

Picture elements will only be used when JPEG fallback images are available. So any images you have uploaded while the "Also generate JPEG" setting was disabled won't get served in any picture elements.

[sagarnasit]

Hi @westonruter Can I take this one?

[mukeshpanchal27]

@sagarnasit Yes you can.

@westonruter What about adding a info message after Picture element description?

[westonruter]

@mukeshpanchal27 yeah, that looks right.

[sagarnasit]

With the latest pull from the trunk, JPEG source and srcset are missing.

This could be related to #1417

With both settings enabled "Output JPEG" and the "Picture element"
Expected output:

<picture class="not-transparent wp-picture-102" style="--dominant-color: #62759f; display: contents;">
    <source type="image/webp" srcset="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441-jpg.webp 768w" sizes="(max-width: 650px) 100vw, 650px">
    <source type="image/jpeg" srcset="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588.jpg 1024w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172.jpg 300w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441.jpg 768w" sizes="(max-width: 650px) 100vw, 650px">
    <img data-dominant-color="62759f" data-has-transparency="false" decoding="async" width="1024" height="588" src="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp" alt="" class="not-transparent wp-image-102" srcset="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441-jpg.webp 768w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1536x882.jpg 1536w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-2048x1176.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px">
</picture>

Actual output:

<picture class="not-transparent wp-picture-102" style="--dominant-color: #62759f; display: contents;">
    <source type="image/webp" srcset="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441-jpg.webp 768w" sizes="(max-width: 650px) 100vw, 650px">
    <img data-dominant-color="62759f" data-has-transparency="false" decoding="async" width="1024" height="588" src="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp" alt="" class="not-transparent wp-image-102" srcset="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441-jpg.webp 768w" sizes="(max-width: 650px) 100vw, 650px">
</picture>

[westonruter]

@sagarnasit Hummm. Right. So while this SOURCE tag is correctly removed:

<source
  type="image/jpeg"
  srcset="
    http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588.jpg 1024w,
    http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172.jpg   300w,
    http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441.jpg   768w
  "
  sizes="(max-width: 650px) 100vw, 650px"
>

The problem is that the IMG tag is pointing to a WebP and not to the JPEG which was present in the removed SOURCE:

<img
  data-dominant-color="62759f"
  data-has-transparency="false"
  decoding="async"
  width="1024"
  height="588"
  src="http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp"
  alt=""
  class="not-transparent wp-image-102"
  srcset="
    http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-1024x588-jpg.webp 1024w,
    http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-300x172-jpg.webp   300w,
    http://localhost:8888/wp-content/uploads/2024/08/Samango_monkey_Cercopithecus_mitis_erythrarchus_Mount_Sheba-768x441-jpg.webp   768w
  "
  sizes="(max-width: 650px) 100vw, 650px"
>

The PICTURE > IMG should always be the JPEG (or PNG, as in #954).

[sagarnasit]

The problem is that the IMG tag is pointing to a WebP and not to the JPEG which was present in the removed SOURCE:

You are right @westonruter . I verified the markup. IMG tag is correctly pointing to JPEG.

If JPEG fallback is not available expected output should be

<img data-dominant-color="908178" data-has-transparency="false" style="--dominant-color: #908178;" decoding="async" width="768" height="1024" src="http://localhost:8888/wp-content/uploads/2024/08/IMG_7152-768x1024.webp" alt="" class="not-transparent wp-image-46" srcset="http://localhost:8888/wp-content/uploads/2024/08/IMG_7152-768x1024.webp 768w, http://localhost:8888/wp-content/uploads/2024/08/IMG_7152-225x300.webp 225w, http://localhost:8888/wp-content/uploads/2024/08/IMG_7152-1152x1536.webp 1152w, http://localhost:8888/wp-content/uploads/2024/08/IMG_7152-1536x2048.webp 1536w, http://localhost:8888/wp-content/uploads/2024/08/IMG_7152-scaled.webp 1920w" sizes="(max-width: 620px) 100vw, 620px">

If JPEG fallback is available expected output should be

<picture class="not-transparent wp-picture-38" style="--dominant-color: #432e43; display: contents;">
	<source type="image/webp" srcset="http://localhost:8888/wp-content/uploads/2024/08/4K-Ghosts-II-1024x576-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/08/4K-Ghosts-II-300x169-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/08/4K-Ghosts-II-768x432-jpg.webp 768w" sizes="(max-width: 620px) 100vw, 620px">
	<img data-dominant-color="432e43" data-has-transparency="false" decoding="async" width="1024" height="576" src="http://localhost:8888/wp-content/uploads/2024/08/4K-Ghosts-II-1024x576.jpg" alt="" class="not-transparent wp-image-38" srcset="http://localhost:8888/wp-content/uploads/2024/08/4K-Ghosts-II-1024x576.jpg 1024w, http://localhost:8888/wp-content/uploads/2024/08/4K-Ghosts-II-300x169.jpg 300w, http://localhost:8888/wp-content/uploads/2024/08/4K-Ghosts-II-768x432.jpg 768w, http://localhost:8888/wp-content/uploads/2024/08/4K-Ghosts-II-1536x864.jpg 1536w, http://localhost:8888/wp-content/uploads/2024/08/4K-Ghosts-II-2048x1152.jpg 2048w" sizes="(max-width: 620px) 100vw, 620px">
</picture>