[RÉGLÉ] Classe de l'image - Image de menu

[thefbi]

Bonjour,

J'aimerais ajouter une image à un menu, en lieu et place du texte.
J'ai pu faire ceci en ajoutant l'image dans l'onglet "Type de lien" de mon menu, puis en désactivant "Afficher le titre du lien de menu".

Problème, si je dimensionne mon image à 40x40px par exemple, la qualité est mauvaise.
J'aimerais donc insérer une image de 200x200px par exemple, puis lui dire de se redimensionner à 40px avec un width: 40px.

Mais je ne comprend pas comment utiliser le paramètre "Classe de l'image". J'imagine que je peu créer une classe dans mon css de template, exemple : menu2 et y ajouter mon code de largeur.
Donc je pense que sur le principe je suis juste, mais je n'ai pas le language...

Comment ajouter la classe et comment l'écrire dans classe de l'image ?

Ce que j'ai fait mais qui ne fonctionne pas :

Dans mon css de template :

.menu2 {
width: 40px;
}

Puis dans le champs Classe de l'image du menu : menu2

Bref, un petit coup de main pour la compréhension.

[tataye]

tu aurais tout interet à dimensionner de manière correcte ton image
mais ton code à l'air d'être bon
donc soit tu le mets dans un mauvais fichier, soit tu ne l'as pas tapé comme tu l'as écrit ici ...
tu peux aussi faire un fichier user.css pour mettre tes css personnalisées

[thefbi]

C'est bon, j'ai trouvé.
En fait j'utilise Maximenu CK et du coup c'est sur lui que je dois régler ça, car il prend le dessus apparemment sur le style de base.

[thefbi]

Bon, je ré-ouvre cette discussion, car j'ai tout de même un souci.

Je pense pas que cela soit lié à Joomla, mais peut-être que certains d'entre vous pourrons m'éclairer.

Tu as raison @tataye j'ai meilleur tant de mettre les images à la bonne taille, car j'ai déjà vu des soucis ou l'image ne se redimensionne pas tout de suite... Donc très moyen.

Mais c'est là tout mon problème. Je travaille mes images avec Photoshop. La dimension 40x40px (par exemple) est plus petite sur Photoshop à l'écran que sur le site web.
Je n'ai toujours pas réussi à comprendre ce problème, mais c'est apparemment du à la résolution de l'écran, bref.

Mon souci est que si je redimensionne mon image à 40x40px, sur mon Photoshop elle est parfaite, alors qu'une fois passé sur le site (ou même en visualisation dans Windows dans mes images) elle est flou ! Ce qui a tendance à me rendre dingue.

Je n'arrive pas à avoir une image nette. On dirait qu'il prend mon image de 40x40 et qu'il fait une sorte de mini zoom dessus, mais qui suffit à la rendre flou.

Donc si il y a des idées là-dessus, je suis preneur.

[abmag]

Vaste sujet, mais pour commencer je pense que tu confonds résolution de l'écran et résolution de l'image. Pour le web choisis 72 dpi comme résolution de l'image, c'est la valeur la plus adaptée aux images pour le web en jpg avec une profondeur de couleur automatique si elle est disponible à l'enregistrement (pour photoshop, je ne sais plus, celà fait bien longtemps que j'ai laissé tomber photoshop. J'utilise paint.net ou gimp suivant le type d'image.

[thefbi]

Hello, oui, je suis en 72 dpi...

[abmag]

un lien peut-être pour voir ton image?

[thefbi]

Mis en pièce en jointe. La 1ère est en 200x200 = parfaite. La seconde, en 40x40, floue.

[woluweb]

Si on uploade par FTP ou via TinyMCE ou via le Gestionnaire de Media (exemples) alors l'image est intacte.
Si on uploade via JCE (ou d'autres éditeurs p ex), il est très probable que cet éditeur retouche les images lors de l'upload

[abmag]

Je n'avais pas tout compris à ton problème. Pour enregistrer une image en 40px par 40px en jpg qui soit tout à fait net celà ne va pas être possible avec du jpg, ni même du png, il faut passer par SVG et cela photoshop ne sait pas faire. Gimp est capable de manipuler le svg mais la qualité restera moyenne et les possibilités limitées. Il faut passer par des logiciels spécialisés (dessin vectoriel) comme Illustrator qui est cher ou Inkskape qui est gratuit mais moins complet. L'utilisation de ces logiciels ne ressemble pas aux logiciels de dessin matriciels (pixélisés) et demande un certain apprentissage, de plus le temps de réalisation d'une image est beaucoup plus long.
40X40, c'est plutôt une icône qu'une illustration.
Tu peux essayer avec des convertisseurs en ligne gratuit comme celui-ci

https://convertir-une-image.com/changer-le-format/en-ico/

ou ici

https://www.img2go.com/fr/convertir-en-svg

[thefbi]

OK merci. J'ai la suite Adobe, donc j'ai Illustrator. Mais je l'avais exportée avec... Et l'image d'origine est du svg. J'ai aussi essayé de passer direct par ftp mais c'est pareil.
Bon je vais refaire des essais avec Illustrator. Mais je le maîtrise moins bien que Photoshop.
J'essaierai aussi les convertisseurs.

Mais si je comprend, il faudrait exporter également en svg ?

[abmag]

Pour la petite en 40x40 il faut mieux garder le svg, elle sera de meilleur qualité, mais la remarque de woluweb est tout à fait valide

[lomart]

Il y a beaucoup d'infos à faire passer dans 40pixels.
Je ne pense pas que l'on puisse beaucoup mieux que l'image du post #8.
Voici mon test avec Zoner Photo Studio qui arrive au même résultat

[thefbi]

Si ! Ça y est !

Bon, avec toutes vos pistes, j'ai creusé et j'ai trouvé. Voir mon sceenshot avec 2 icones identiques mise à part la netteté (et la forme de l'icone dedans mais c'est pas le sujet). Bon j'ai fait une copie d'écran, donc on perd en qualité, mais sur le site c'est parfait.

Donc pour y arriver j'ai fait :

- Ouvrir mon image svg avec Illustrator. Mais elle est trop grande (200x200px) et je ne sais pas comment redimensionner ça.
- Ouvrir un nouveau fichier Illustrator => web => 40x40px / 72 dpi.
- Sélectionner mon image original => copier et coller dans mon second fichier 40x40.
- Enregistrer sous => svg.
- Envoyer mon image dans mon répertoire de mon site via ftp.
- Aller dans le menu et taper le lien de mon image, car on ne peut pas la sélectionner et ni la voir.

Me reste plus qu'à bosser un peu Illustrator.
Mais le truc c'est vraiment de garder le svg, effectivement. Et en lisant quelques articles sur le web, c'est effectivement un format vectoriel qui permet d'être toujours parfait sur n'importe quel support.

[abmag]

tu vas pouvoir passer directement en réglé