Certaines images passant par Adaptive Images disparaissent #13

Closed
opened 7 months ago by bricebou · 10 comments
Collaborator

On commence avec l'URL qui pose problème:
https://reclic.dev/-realisations (et même chose en page 2 ou en page d'accueil).

Sous Firefox, autant sur Desktop, l'affichage se fait sans problème, autant lorsque l'on bascule en mode Tablet ou Smartphone, les images après le deuxième bloc n'apparaissent plus.

SPIP en 4.0.6 ou 4.1.1 avec Adaptive Images en 3.0.7 ou up-to-date avec Git.

Si je désactive le plugin Adaptive Images, les miniatures apparaissent correctement. Donc peut-être cela vient de ma configuration ? Qui, je dois l'avouer m'est toujours délicate malgré plusieurs lectures de la documentation... Donc en pièce-jointe une capture de la configuration du plugin.

Le lazy-loading ne semble pas être en cause, si je le désactive, le problème persiste après vidage du cache.

Je ne parviens pas à identifier la différence entre les deux premiers blocs (pour lesquels les images sont correctement affichées) et les deux blocs suivants...

J'affiche grâce au code suivant des vignettes au sein d'un slider:

<BOUCLE_real(ARTICLES){id_article}>
    <article class="flex flex-col gap-12 md:flex-row md:items-start">
        <div class="flex flex-col md:w-3/5">
            <h2>
                [(#URL_SITE|?{
                    <a href="#URL_SITE">#TITRE</a>,
                    #TITRE
                })]
            </h2>
            #TEXTE
        </div>
		<div class="md:w-2/5">
			<INCLURE{fond=inclure/slider, env, id_article}>
		</div>
    </article>
</BOUCLE_real>

puis `inclure/slider.html:

<B_vignettes>
[(#TOTAL_BOUCLE|>{1}|oui)
<div id="image-slider_#ID_ARTICLE" class="splide">
	<div class="splide__track">
		<ul class="splide__list galerie galerie-#ENV{type-page}">
]
[(#TOTAL_BOUCLE|>{1}|non)
<div class="galerie">
]
			<BOUCLE_vignettes(DOCUMENTS){id_article}{extension IN jpg,png}{par rang_lien}>
				[(#TOTAL_BOUCLE|>{1}|oui)<li class="splide__slide">]
					[(#MODELE{doc})]
				[(#TOTAL_BOUCLE|>{1}|oui)</li>]
			</BOUCLE_vignettes>
[(#TOTAL_BOUCLE|>{1}|oui)
		</ul>
	</div>
</div>
]
[(#TOTAL_BOUCLE|>{1}|non)
</div>
]
</B_vignettes>

En vous remerciant par avance d'un indice, d'une solution...

On commence avec l'URL qui pose problème: https://reclic.dev/-realisations (et même chose en page 2 ou en page d'accueil). Sous Firefox, autant sur Desktop, l'affichage se fait sans problème, autant lorsque l'on bascule en mode Tablet ou Smartphone, les images après le deuxième bloc n'apparaissent plus. SPIP en 4.0.6 ou 4.1.1 avec Adaptive Images en 3.0.7 ou up-to-date avec Git. Si je désactive le plugin Adaptive Images, les miniatures apparaissent correctement. Donc peut-être cela vient de ma configuration ? Qui, je dois l'avouer m'est toujours délicate malgré plusieurs lectures de la documentation... Donc en pièce-jointe une capture de la configuration du plugin. Le lazy-loading ne semble pas être en cause, si je le désactive, le problème persiste après vidage du cache. Je ne parviens pas à identifier la différence entre les deux premiers blocs (pour lesquels les images sont correctement affichées) et les deux blocs suivants... J'affiche grâce au code suivant des vignettes au sein d'un slider: ``` <BOUCLE_real(ARTICLES){id_article}> <article class="flex flex-col gap-12 md:flex-row md:items-start"> <div class="flex flex-col md:w-3/5"> <h2> [(#URL_SITE|?{ <a href="#URL_SITE">#TITRE</a>, #TITRE })] </h2> #TEXTE </div> <div class="md:w-2/5"> <INCLURE{fond=inclure/slider, env, id_article}> </div> </article> </BOUCLE_real> ``` puis `inclure/slider.html: ``` <B_vignettes> [(#TOTAL_BOUCLE|>{1}|oui) <div id="image-slider_#ID_ARTICLE" class="splide"> <div class="splide__track"> <ul class="splide__list galerie galerie-#ENV{type-page}"> ] [(#TOTAL_BOUCLE|>{1}|non) <div class="galerie"> ] <BOUCLE_vignettes(DOCUMENTS){id_article}{extension IN jpg,png}{par rang_lien}> [(#TOTAL_BOUCLE|>{1}|oui)<li class="splide__slide">] [(#MODELE{doc})] [(#TOTAL_BOUCLE|>{1}|oui)</li>] </BOUCLE_vignettes> [(#TOTAL_BOUCLE|>{1}|oui) </ul> </div> </div> ] [(#TOTAL_BOUCLE|>{1}|non) </div> ] </B_vignettes> ``` En vous remerciant par avance d'un indice, d'une solution...
Poster
Collaborator

Un élément supplémentaire : je viens juste de constater que le fait de redimensionner à la volée la Vue adaptive dans Firefox déclenchait correctement la génération de l'image.

Un élément supplémentaire : je viens juste de constater que le fait de redimensionner à la volée la Vue adaptive dans Firefox déclenchait correctement la génération de l'image.
Owner

Il semblerait que c'est un problème de format d'image, qui semblent être en PNG8, ce qui semble foirer quand le plugin adaptive image veut générer une version webp:

cf https://reclic.dev/local/adapt-img/640/20x/IMG/png/momh_fr__article.png@.webp
qui affiche une erreur fatale

Fatal error: Paletter image not supported by webp in /home/reclic/reclic.dev/plugins/adaptive_images/lib/AdaptiveImages/AdaptiveImages.php on line 2025
Il semblerait que c'est un problème de format d'image, qui semblent être en PNG8, ce qui semble foirer quand le plugin adaptive image veut générer une version webp: cf https://reclic.dev/local/adapt-img/640/20x/IMG/png/momh_fr__article.png@.webp qui affiche une erreur fatale ``` Fatal error: Paletter image not supported by webp in /home/reclic/reclic.dev/plugins/adaptive_images/lib/AdaptiveImages/AdaptiveImages.php on line 2025 ```
Poster
Collaborator

Ok, je vais mieux regarder de ce côté-là.

Mais plusieurs interrogations:

  • pourquoi le problème n'apparaît pas sous Chromium ?
  • pourquoi sous Firefox les images sont correctement générées si je redimensionne la "fenêtre adaptée" : si la taille de la fenêtre n'augmente que d'un pixel, une image est bien générée par le plugin et affichée ?
Ok, je vais mieux regarder de ce côté-là. Mais plusieurs interrogations: - pourquoi le problème n'apparaît pas sous Chromium ? - pourquoi sous Firefox les images sont correctement générées si je redimensionne la "fenêtre adaptée" : si la taille de la fenêtre n'augmente que d'un pixel, une image est bien générée par le plugin et affichée ?
Owner

pourquoi le problème n'apparaît pas sous Chromium ?

Sans doute que Chromium ne supporte pas webp et utilise uniquement les images d'origine en png

pourquoi sous Firefox les images sont correctement générées si je redimensionne la "fenêtre adaptée" : si la taille de la fenêtre n'augmente que d'un pixel, une image est bien générée par le plugin et affichée ?

J'ai pas regardé, mais sans doute qu'au delà d'une taille d'écran donné tu retombes sur l'image d'origine en png et pas sur une variante webp générée par le plugin

> pourquoi le problème n'apparaît pas sous Chromium ? Sans doute que Chromium ne supporte pas webp et utilise uniquement les images d'origine en png > pourquoi sous Firefox les images sont correctement générées si je redimensionne la "fenêtre adaptée" : si la taille de la fenêtre n'augmente que d'un pixel, une image est bien générée par le plugin et affichée ? J'ai pas regardé, mais sans doute qu'au delà d'une taille d'écran donné tu retombes sur l'image d'origine en png et pas sur une variante webp générée par le plugin
Poster
Collaborator

Merci beaucoup pour ces précisions mais après quelques détours, me revoilà...

Par exemple, cette URL renvoie éffectivement l'erreur fatale

 Fatal error: Paletter image not supported by webp in /home/reclic/reclic.dev/plugins/adaptive_images/lib/AdaptiveImages/AdaptiveImages.php on line 2025

Par contre, pour la même image, sont bien générées les versions en 160, en 320, en 480...

Tout cela, à partir de la même image de base...

Je parviens à générer jusqu'en 511 mais ça coince en 512.

Est-ce que à tout hasard, ce ne serait pas dû aux dimensions plus que conséquentes de ces images ?

En te remerciant encore et par avance @cerdic !

Merci beaucoup pour ces précisions mais après quelques détours, me revoilà... Par exemple, [cette URL](https://reclic.dev/local/adapt-img/640/20x/IMG/png/numerique-culturel_fr__accueil.png@.webp) renvoie éffectivement l'erreur fatale ``` Fatal error: Paletter image not supported by webp in /home/reclic/reclic.dev/plugins/adaptive_images/lib/AdaptiveImages/AdaptiveImages.php on line 2025 ``` Par contre, pour la même image, sont bien générées les versions [en 160](https://reclic.dev/local/adapt-img/160/20x/IMG/png/numerique-culturel_fr__accueil.png@.webp), [en 320](https://reclic.dev/local/adapt-img/320/20x/IMG/png/numerique-culturel_fr__accueil.png@.webp), [en 480](https://reclic.dev/local/adapt-img/480/20x/IMG/png/numerique-culturel_fr__accueil.png@.webp)... Tout cela, à partir de la même image de base... Je parviens à générer jusqu'[en 511](https://reclic.dev/local/adapt-img/511/20x/IMG/png/numerique-culturel_fr__accueil.png@.webp) mais ça coince [en 512](https://reclic.dev/local/adapt-img/512/20x/IMG/png/numerique-culturel_fr__accueil.png@.webp). Est-ce que à tout hasard, ce ne serait pas dû aux dimensions plus que conséquentes de ces images ? En te remerciant encore et par avance @cerdic !
Owner
Donc pour être précis * https://reclic.dev/local/adapt-img/511/20x/IMG/png/numerique-culturel_fr__accueil.png@.webp passe bien mais * https://reclic.dev/local/adapt-img/512/20x/IMG/png/numerique-culturel_fr__accueil.png@.webp fait une fatale je note aussi que ça pourrait être lié à #12 mais pas certain
Owner

Je reproduis en local, avec exactement le même seuil à 512px. A noter que la production des png se passe sans soucis. Et ce n'est pas lié à #12 donc que j'ai corrigé par ailleurs

Je reproduis en local, avec exactement le même seuil à 512px. A noter que la production des png se passe sans soucis. Et ce n'est pas lié à #12 donc que j'ai corrigé par ailleurs
Owner

Ah ok, compris, plus ou moins
l'image source est un PNG en 1024px de large, en 8bit

file IMG/png/numerique-culturel_fr__accueil.png
.../IMG/png/numerique-culturel_fr__accueil.png: PNG image data, 1024 x 2683, 8-bit colormap, non-interlaced

du coup dès qu'on veut générer une image 1024px en webp on n'a plus de redimensionnement, mais manque de chance l'image source étant en couleur indexée, la fonction imagewebp() fait une fatale.

Il faut donc convertir l'image en vraie couleur quelque part en amont avant de l'exporter en webp

Ah ok, compris, plus ou moins l'image source est un PNG en 1024px de large, en 8bit ``` file IMG/png/numerique-culturel_fr__accueil.png .../IMG/png/numerique-culturel_fr__accueil.png: PNG image data, 1024 x 2683, 8-bit colormap, non-interlaced ``` du coup dès qu'on veut générer une image 1024px en webp on n'a plus de redimensionnement, mais manque de chance l'image source étant en couleur indexée, la fonction `imagewebp()` fait une fatale. Il faut donc convertir l'image en vraie couleur quelque part en amont avant de l'exporter en webp
cerdic closed this issue 7 months ago
Owner

la version 3.0.9 corrige donc via 3f871e8

la version 3.0.9 corrige donc via 3f871e8
Poster
Collaborator

Merci beaucoup @cerdic, pour tout et pour ta réactivité :-)

Merci beaucoup @cerdic, pour tout et pour ta réactivité :-)
Sign in to join this conversation.
No Label
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.