Logos en PNG ou JPG ?
- Auteur de la discussion Bocar
- Date de début
WRInaute passionné
Le JPG ne garde pas la qualité (en fonction du % de compression) donc c'est souvent flou ou baveux, pour les petites images on utilise en général les PNG qui permettent la transparence en plus (et autrefois GIF).
Passer un coup de optipng.exe pour réduire un peu la taille des PNG aussi.
Mais bien sûr le SVG c'est le mieux, quand on sait le faire.
Passer un coup de optipng.exe pour réduire un peu la taille des PNG aussi.
Mais bien sûr le SVG c'est le mieux, quand on sait le faire.
WRInaute impliqué
Non, le PNG ne conserve pas les calques.
JPEG est prévu pour les PHOTOS, pas les logos. D'ailleurs, JPEG est complètement dépassé au niveau technologique (c'était déjà le cas il y a 20 ans, croyez-moi).
Pour un logo, SVG me semble vraiment le mieux.
Pour un logo, SVG me semble vraiment le mieux.
WRInaute occasionnel
Des logiciels comme "Page plus" permettent d'exporter une image au format SVG (et dans les autres formats aussi d'ailleurs).
Que pensez-vous du format ".webp" ?
Google dit que c'est meilleur pour référencer dessus.
Mais je ne trouve pas de façon de mettre mes .png en .webp sans perte de qualité.
Que pouvez-vous me dire sur le ".webp" ?
C'est intéressant ? Possible de convertir un ".png" en ".webp" sans perte ?
Merci.
Google dit que c'est meilleur pour référencer dessus.
Mais je ne trouve pas de façon de mettre mes .png en .webp sans perte de qualité.
Que pouvez-vous me dire sur le ".webp" ?
C'est intéressant ? Possible de convertir un ".png" en ".webp" sans perte ?
Merci.
WRInaute occasionnel
Hello,
Moi j'ai opté pour ce format sur l'ensemble de mon site :
.webp
J'en suis pleinement satisfait
Bon article ici
Bonne bonne
Yule
Nb: De mon côté, aucun souci sur safari
Nb2: s'agissant de wordpress, ben faut virer ce truc
il y a l'art de cuisiner ou la facilité de la bouffe industrielle au micro ondes...
Moi j'ai opté pour ce format sur l'ensemble de mon site :
.webp
J'en suis pleinement satisfait
Bon article ici
Bonne bonne
Yule
Nb: De mon côté, aucun souci sur safari
Nb2: s'agissant de wordpress, ben faut virer ce truc
il y a l'art de cuisiner ou la facilité de la bouffe industrielle au micro ondes...
Dernière édition:
WRInaute occasionnel
Hello,
Ecoute et comme toujours, ça dépend de la qualité souhaitée, j'utilise celui-ci (en modulant les paramètres facultatifs si nécessaire ) qui me satisfait pleinement, dans l'utilisation des images de mon site. Mais il y aura toujours une petite perte.. A moins d'avoir des img full écran, je ne vois pas de grande perte depuis des img png en webp.
Sinon faut bricoler avec ceci https://developers.google.com/speed/webp (jamais essayé pour ma part..)
A+
Yule
Ecoute et comme toujours, ça dépend de la qualité souhaitée, j'utilise celui-ci (en modulant les paramètres facultatifs si nécessaire ) qui me satisfait pleinement, dans l'utilisation des images de mon site. Mais il y aura toujours une petite perte.. A moins d'avoir des img full écran, je ne vois pas de grande perte depuis des img png en webp.
Sinon faut bricoler avec ceci https://developers.google.com/speed/webp (jamais essayé pour ma part..)
A+
Yule
Dernière édition:
Il y a trop de pertes dans les webp convertis.
PNG : https://1fichier.com/?qeacbq77zrrsgfo69lz8
WEBP : https://1fichier.com/?535g6vls6fc3a7dfcuqb
WEBP : https://1fichier.com/?mj608gjnmai7xuah7g2n
Avez-vous un convertisseur sans perte s'il vous plaît.
PNG : https://1fichier.com/?qeacbq77zrrsgfo69lz8
WEBP : https://1fichier.com/?535g6vls6fc3a7dfcuqb
WEBP : https://1fichier.com/?mj608gjnmai7xuah7g2n
Avez-vous un convertisseur sans perte s'il vous plaît.
WRInaute occasionnel
En fait, tu parles pas du logo de ton site mais le "logo" d'un club sportif.. au format png de 30x30 qui est hyper petit... A ce tarif, inutile de compresser, c'est beaucoup trop petit pour avoir de la qualité même en png..
Regarde celui de Chelsea au même format que le tien, enfin presque avec du 32 pixel, il est non plus pas net.. POur avoir de la qualité, je pense qu'il faut du 48 minimum..
Regarde celui de Chelsea au même format que le tien, enfin presque avec du 32 pixel, il est non plus pas net.. POur avoir de la qualité, je pense qu'il faut du 48 minimum..
Dernière édition:
WRInaute occasionnel
Comment dire... je dois être un peu maniaque comme toi Disons que l'écriture pas forcement mais ça me gênerais tout de même à titre personnel, je chercherai un autre logo/fanion du club sans écriture.. et essayer de garder plus de clarté dans sa lecture.
Est-ce le logo qui se situe sous la photo du membre ? ==> Mon équipe type ? Si tel est le cas , tu as largement la place de le faire un peu plus gros et lisible. Mais après , c'est du boulot de refaire l'ensemble des clubs, j'en conviens...
Cependant, tu peux les faire dans une taille de 100x100 en PNG puis les convertir en Webp et pour les afficher, tu joues avec la taille et/ou le un pourcentage du genre "width=70%" pour du responsive selon tes besoins. Jai essayé avec un logo de 100x100 = ~68ko en png et 4ko en webp avec une très bonne qualité
webp : https://ibb.co/T1q6sxh
png : https://ibb.co/HG3fjpr
Disons que l'écriture pas forcement mais ça me gênerais tout de même à titre personnel, je chercherai un autre logo/fanion du club sans écriture.. et essayer de garder plus de clarté dans sa lecture.Est-ce le logo qui se situe sous la photo du membre ? ==> Mon équipe type ? Si tel est le cas , tu as largement la place de le faire un peu plus gros et lisible. Mais après , c'est du boulot de refaire l'ensemble des clubs, j'en conviens...
Cependant, tu peux les faire dans une taille de 100x100 en PNG puis les convertir en Webp et pour les afficher, tu joues avec la taille et/ou le un pourcentage du genre "width=70%" pour du responsive selon tes besoins. Jai essayé avec un logo de 100x100 = ~68ko en png et 4ko en webp avec une très bonne qualité
webp : https://ibb.co/T1q6sxh
png : https://ibb.co/HG3fjpr
Bravo @yule , je trouve le rendu .webp très bon, sans perte de qualité.
Donc :
Faire ça ?
Oui, avec le même logo dans le profil du membre.
Donc :
Faire ça ?
WRInaute impliqué
Je me permets de donner un conseil : lisez un vrai bon article complet sur les formats d'image et leur utilisation sur le web.
Si vous connaissiez de manière plus approfondie le sujet et les outils, vous pourriez obtenir ceci :
4301 octets en PNG
Meilleure qualité que la version WebP ci-dessus.
Compatible tout navigateur.
Edit : tiens, en plus après post, je me rend compte que l'image que j'ai reprise sans me poser de question n'a pas de transparence mais a bien un damier opaque en fond.
Si vous connaissiez de manière plus approfondie le sujet et les outils, vous pourriez obtenir ceci :
4301 octets en PNG
Meilleure qualité que la version WebP ci-dessus.
Compatible tout navigateur.
Edit : tiens, en plus après post, je me rend compte que l'image que j'ai reprise sans me poser de question n'a pas de transparence mais a bien un damier opaque en fond.
Merci.
Je cherche à avoir des webp.Je me permets de donner un conseil : lisez un vrai bon article complet sur les formats d'image et leur utilisation sur le web.
Si vous connaissiez de manière plus approfondie le sujet et les outils, vous pourriez obtenir ceci :
Voir la pièce jointe 1035
4301 octets en PNG
Meilleure qualité que la version WebP ci-dessus.
Compatible tout navigateur.
Edit : tiens, en plus après post, je me rend compte que l'image que j'ai reprise sans me poser de question n'a pas de transparence mais a bien un damier opaque en fond.
Merci.
D'abord faire des logos en 100x100 px.
Les convertir en webp.
Pour finir, je joue sur la taille du logo avec le pourcentage.
C'est ça ?
Je les redimensionne en 48x48 px comme dans ton exemple avec Chelsea ou pas ?
Merci @yule .
Aïe aïe aïe
En effet.
Les petits logos (30x30px dans mon cas) sont moins lourds en png qu'en jpg.
"Ideally, your page should never serve images that are larger than the version that's rendered on the user's screen. Anything larger than that just results in wasted bytes and slows down page load time." web.dev
L'idée de redimensionner les images 100x100 px en 48x48 px n'est pas suggérée en raison d'une perte de temps dans le chargement des pages.
WRInaute occasionnel
Et pour ceux qui ne connaissent pas grand chose, quelques règles simples :
- Quand vous sauvez une image en png depuis Paint ou Powerpoint, vous aurez des fichiers monstrueux en taille
- Passez-les sur tinypng (outil gratuit en ligne) et vous aurez une compression très efficace
- Passez le résultat de tinypng en compression zopfli et vous gagnerez encore un peu.
Pour les pros, il est possible d'ajouter en première étape un traitement avec perte, qui pré-optimise l'image par rapport au format, sans que l'oeil nu n'arrive à faire la distinction. On peut alors encore réduire le poids significativement.
En conclusion, ça vaut la peine de faire cet effort d'optimisation des images, c'est bon pour les utilisateurs et le SEO
WRInaute accro
Deja en format 30x30 ou 48x48, on ne parle pas de logo, mais de pictogramme. Ca n'a pas la meme utilité...
Dans ton cas ton pictogramme de 30x30 est illisible et ne sers donc a rien...
Pictogrammes en SVG
LOGOS en SVG
regarde le logo de WRI il est en .svg et pese 5 ko
WRInaute passionné
Il y a encore quelques temps seul Chrome le supportait (format inventé par Google).
Apparemment Safari ne le supporte que partiellement : https://caniuse.com/webp (et IE évidemment). Trop récent, j'attendrai, notamment pour ceux sous des anciennes versions.
Discussions similaires
