Image floutées à l'impression

Bonjour,

Un truc bizarre peut-être hors-sujet.

J'ai certaines images floutées à l'impression, alors qu'elles sont normales dans le navigateur...

https://upn.actice.net/telecharger-les-videos-youtube-avec-4k-video-downloader-art057

On le voit dans l'aperçu avant impression, sous Firefox et Chrome.

Des pistes sur la raison ?
Le navigateur ? Spip GD2 qui a buggé pour certains redimensionnements ?

Merci

--
Stéphane

Les Voisins Spipeurs : http://www.voisins-spipeurs.net

Le 22/03/2020 à 22:54, Stephane Santon a écrit :

Un truc bizarre peut-être hors-sujet.
J'ai certaines images floutées à l'impression, alors qu'elles sont normales dans le navigateur...
Télécharger les vidéos Youtube avec 4K Video Downloader - UPN Palissy
On le voit dans l'aperçu avant impression, sous Firefox et Chrome.
Des pistes sur la raison ?
Le navigateur ? Spip GD2 qui a buggé pour certains redimensionnements ?

Il ya une classe "blur" qui applique un filter : blur(5)

Le 22/03/2020 à 23:13, JLuc a écrit :

J'ai certaines images floutées à l'impression, alors qu'elles sont normales dans le navigateur...
Télécharger les vidéos Youtube avec 4K Video Downloader - UPN Palissy

On le voit dans l'aperçu avant impression, sous Firefox et Chrome.
Des pistes sur la raison ?
Le navigateur ? Spip GD2 qui a buggé pour certains redimensionnements ?

Il ya une classe "blur" qui applique un filter : blur(5)

??? En effet...
D'où ça sort ça ? ... Quel intérêt ?
Est-ce adaptive_images qui fait ça ? Que sur l'impression ?

Merci

--
Stéphane

Les Voisins Spipeurs : http://www.voisins-spipeurs.net

Le 22/03/2020 à 23:37, Stephane Santon a écrit :

Le 22/03/2020 à 23:13, JLuc a écrit :

J'ai certaines images floutées à l'impression, alors qu'elles sont normales dans le navigateur...
Télécharger les vidéos Youtube avec 4K Video Downloader - UPN Palissy
On le voit dans l'aperçu avant impression, sous Firefox et Chrome.
Des pistes sur la raison ?
Le navigateur ? Spip GD2 qui a buggé pour certains redimensionnements ?

Il ya une classe "blur" qui applique un filter : blur(5)

??? En effet...
D'où ça sort ça ? ... Quel intérêt ?
Est-ce adaptive_images qui fait ça ? Que sur l'impression ?

non pas que sur l'impression.
je suis pas sur mais simplement ça semble mal supporté sur browser

JL

Le 23/03/2020 à 08:43, JLuc a écrit :

Le 22/03/2020 à 23:37, Stephane Santon a écrit :

Le 22/03/2020 à 23:13, JLuc a écrit :

J'ai certaines images floutées à l'impression, alors qu'elles sont normales dans le navigateur...
Télécharger les vidéos Youtube avec 4K Video Downloader - UPN Palissy

On le voit dans l'aperçu avant impression, sous Firefox et Chrome.
Des pistes sur la raison ?
Le navigateur ? Spip GD2 qui a buggé pour certains redimensionnements ?

Il ya une classe "blur" qui applique un filter : blur(5)

??? En effet...
D'où ça sort ça ? ... Quel intérêt ?
Est-ce adaptive_images qui fait ça ? Que sur l'impression ?

non pas que sur l'impression.
je suis pas sur mais simplement ça semble mal supporté sur browser

Est-ce que ça n'est pas le fonctionnement normal d'adaptive_images ?

Les images de bonne qualité sont affichées en image de fond des <picture> et les vignettes de prévisualisation (<img>) sont en basse def pour s'afficher rapidement (avec blur + opacity). Mais à l'impression, les images de fond sont ignorées, non?

                 jean marie

Bonjour,

Le 23/03/2020 à 09:14, Jean Marie Grall a écrit :

Il ya une classe "blur" qui applique un filter : blur(5)

??? En effet...
D'où ça sort ça ? ... Quel intérêt ?
Est-ce adaptive_images qui fait ça ? Que sur l'impression ?

non pas que sur l'impression.
je suis pas sur mais simplement ça semble mal supporté sur browser

Est-ce que ça n'est pas le fonctionnement normal d'adaptive_images ?

Les images de bonne qualité sont affichées en image de fond des <picture> et les vignettes de prévisualisation (<img>) sont en basse def pour s'afficher rapidement (avec blur + opacity). Mais à l'impression, les images de fond sont ignorées, non?

Ce ne sont pas des images de fond à la base, mais les illustrations de mon article, en PNG à l'origine.

--
Stéphane
17 Charente-Maritime

Bonjour,

Le 23/03/2020 à 09:14, Jean Marie Grall a écrit :

J'ai certaines images floutées à l'impression, alors qu'elles sont normales dans le navigateur...
Télécharger les vidéos Youtube avec 4K Video Downloader - UPN Palissy

On le voit dans l'aperçu avant impression, sous Firefox et Chrome.
Des pistes sur la raison ?
Le navigateur ? Spip GD2 qui a buggé pour certains redimensionnements ?

Il ya une classe "blur" qui applique un filter : blur(5)

??? En effet...
D'où ça sort ça ? ... Quel intérêt ?
Est-ce adaptive_images qui fait ça ? Que sur l'impression ?

non pas que sur l'impression.
je suis pas sur mais simplement ça semble mal supporté sur browser

Est-ce que ça n'est pas le fonctionnement normal d'adaptive_images ?

Les images de bonne qualité sont affichées en image de fond des <picture> et les vignettes de prévisualisation (<img>) sont en basse def pour s'afficher rapidement (avec blur + opacity). Mais à l'impression, les images de fond sont ignorées, non?

                 jean marie

Bon ben je n'ai pas encore tout compris.

Chez moi ça ne floute qu'à l'impression (et à l'aperçu), mais dans la fenêtre de navigateur.

Est-ce vraiment un fonctionnement "normal" d'avoir des images floutées ??
Est-ce que ça dépend de la résolution de l'écran (du support) ?

Merci

--
Stéphane
17 Charente-Maritime

Le 24/03/2020 à 14:59, Stephane Santon a écrit :

Chez moi ça ne floute qu'à l'impression (et à l'aperçu), mais dans la fenêtre de navigateur.
Est-ce vraiment un fonctionnement "normal" d'avoir des images floutées ??
Est-ce que ça dépend de la résolution de l'écran (du support) ?

les images floutéees sont basse résolution et légères.
elles s'affichent vite et on est content de voir comme c'est rapide
puis les images haute résolution doivent arriver et on est content d'avoir de belles images.
le problème que tu as c'est que les images haute résolution n'arrivent pas.
faut comprendre pourquoi.
est-ce le code html ou les css qui sont défaillantes ?
il faudrait comparer avec un site où ça marche.
et essayer sans aucun autre plugin au cas où interférence malheureuse.
est-ce une erreur javascript ? as tu regardé dans la console ? (CTRL+SHIFT+I)

JL

Le 24/03/2020 à 15:12, JLuc a écrit :

Le 24/03/2020 à 14:59, Stephane Santon a écrit :

Chez moi ça ne floute qu'à l'impression (et à l'aperçu), mais dans la fenêtre de navigateur.
Est-ce vraiment un fonctionnement "normal" d'avoir des images floutées ??
Est-ce que ça dépend de la résolution de l'écran (du support) ?

les images floutéees sont basse résolution et légères.
elles s'affichent vite et on est content de voir comme c'est rapide
puis les images haute résolution doivent arriver et on est content d'avoir de belles images.
le problème que tu as c'est que les images haute résolution n'arrivent pas.
faut comprendre pourquoi.
est-ce le code html ou les css qui sont défaillantes ?
il faudrait comparer avec un site où ça marche.
et essayer sans aucun autre plugin au cas où interférence malheureuse.
est-ce une erreur javascript ? as tu regardé dans la console ? (CTRL+SHIFT+I)

Non aucune erreur, mais de toutes façons ça n'arrive que sur l'aperçu avant impression, et je ne pense pas que javascript fasse quelque chose à ce moment-là...

C'est bien adaptive_images qui fait ça.
J'ai modifié le paramètre Markup généré :

Méthode des 3 couches (large support)
vers
srcset + <source> (HTML5)

et ça ne le fait plus.

A creuser.

Merci

--
Stéphane
17 Charente-Maritime

Le 24/03/2020 à 15:49, Stephane Santon a écrit :

C'est bien adaptive_images qui fait ça.

Alors pose le provlème sur la liste spip-dev :
c'est là que les devs du plugins te liront.

JL

Le 24/03/2020 à 15:49, Stephane Santon a écrit :

Non aucune erreur, mais de toutes façons ça n'arrive que sur l'aperçu avant impression, et je ne pense pas que javascript fasse quelque chose à ce moment-là...

C'est bien adaptive_images qui fait ça.
J'ai modifié le paramètre Markup généré :

Méthode des 3 couches (large support)
vers
srcset + <source> (HTML5)

et ça ne le fait plus.

A creuser.

Ne creuse pas trop profond quand même :slight_smile:

Est-ce que tu parles de ces images https://pic.infini.fr/4bZxpYo5/Ee9YBahG.png ?

Si oui, comme indiqué dans mon 1er message, les images de bonne qualité sont affichées (_avec la Méthode des 3 couches, mais pas avec srcset + <source>_) en image de fond des <picture> et les vignettes de prévisualisation (<img>) sont en basse def pour s'afficher rapidement (avec blur + opacity).

Mais je crois qu'à l'impression, les navigateurs ignorent les images de fond sont ignorées, non? Donc, tes images de bonne qualité sont ignorées et tu te retrouves avec les images basses def floues...

                 jeanmarie

Bonjour,

Le 24/03/2020 à 17:22, Jean Marie Grall a écrit :

Non aucune erreur, mais de toutes façons ça n'arrive que sur l'aperçu avant impression, et je ne pense pas que javascript fasse quelque chose à ce moment-là...

C'est bien adaptive_images qui fait ça.
J'ai modifié le paramètre Markup généré :

Méthode des 3 couches (large support)
vers
srcset + <source> (HTML5)

et ça ne le fait plus.

A creuser.

Ne creuse pas trop profond quand même :slight_smile:

Est-ce que tu parles de ces images https://pic.infini.fr/4bZxpYo5/Ee9YBahG.png ?

Oui, mais le flou est bien plus fort :
https://www.cjoint.com/c/JCyucW4UQRB

Si oui, comme indiqué dans mon 1er message, les images de bonne qualité sont affichées (_avec la Méthode des 3 couches, mais pas avec srcset + <source>_) en image de fond des <picture> et les vignettes de prévisualisation (<img>) sont en basse def pour s'afficher rapidement (avec blur + opacity).

Mais je crois qu'à l'impression, les navigateurs ignorent les images de fond sont ignorées, non? Donc, tes images de bonne qualité sont ignorées et tu te retrouves avec les images basses def floues...

                 jeanmarie

Il y a une option pour afficher ou non "les images de fond", mais ne change rien...

--
Stéphane
17 Charente-Maritime

Bonjour,

Toujours bizarre pour moi ces flous sur adaptive-images.

Même phénomène mais à l'écran en survolant l'organigramme de la souris ici :

sur Firefox

Le 22/03/2020 à 22:54, Stephane Santon a écrit :

Un truc bizarre peut-être hors-sujet.

J'ai certaines images floutées à l'impression, alors qu'elles sont normales dans le navigateur...

--
Stéphane
17 Charente-Maritime

Salut,

Le 18/06/2020 à 09:32, Stephane Santon a écrit :

Bonjour,

Toujours bizarre pour moi ces flous sur adaptive-images.

Même phénomène mais à l'écran en survolant l'organigramme de la souris ici :
La Délégation générale à l’emploi et à la formation professionnelle (DGEFP) | Travail-emploi.gouv.fr | Ministère du Travail et de l’Emploi

Tu n'as pas activé le mode debug d'adaptive-images ?

                 jean marie

Le 18/06/2020 à 12:19, jeanmarie a écrit :

Même phénomène mais à l'écran en survolant l'organigramme de la souris ici :
La Délégation générale à l’emploi et à la formation professionnelle (DGEFP) | Travail-emploi.gouv.fr | Ministère du Travail et de l’Emploi

Tu n'as pas activé le mode debug d'adaptive-images ?

Je ne connais pas.
Je suis simple visiteur sur ce site gouv.fr ...

Ah ok, ce sont 2 choses différentes alors...

Et sur mon site ? mode debug d'AI par paramètre d'URL ?

Sur ton site, les images sont redimensionnées à une certaine taille mais toujours affichées à 100% du contenu, donc les plus petites sont agrandies et donc floues. Quelle est la taille max dans la config d'adaptive-images (essaie avec la largeur de ton contenu) ? Ou alors si tu l'as fixée dans ton squelette...

Ce n'est pas un problème de petites images agrandies, c'est un problème de classe .blur placées sur ces images et qui fait un blur: 5px;

Et sinon pour mon site (avec blur à l'impression), quelle méthode pour le mode debug d'adaptive-images ?

Merci

--
Stéphane
17 Charente-Maritime

Bonjour,

donc il devrait être possible de corriger ça avec img.adapt-img.blur { filter: blur(0); }

Le 18/06/2020 à 13:41, chankalan@choc0.net a écrit :

Le 18/06/2020 à 13:32, Stephane Santon a écrit :

Ce n'est pas un problème de petites images agrandies, c'est un problème de classe .blur placées sur ces images et qui fait un blur: 5px;

donc il devrait être possible de corriger ça avec
img.adapt-img.blur {
filter: blur(0);
}

On dirait que chez moi, il y a bien une question de taille : https://pic.infini.fr/ExbPDsGT/V82CraxJ.jpg
Et ton image fait 640px https://upn.actice.net/local/adapt-img/640/10x/IMG/png/ecran-youtube-30-4kdl-pageyoutube.png alors que le contenu fait 685px

Tu as quoi comme réglage dans la config du plugin ?
(640 est la taille max par défaut : https://pic.infini.fr/jNPZBZW4/CtrVXcQy.jpg )