Logos en PNG ou JPG ?

Discussion dans 'Débuter en référencement' créé par Bocar, 7 Novembre 2020.

  1. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Bonjour.


    Le jpg est en général un format plus léger, donc j'ai pensé que c'est mieux d'avoir des logos en JPG plutôt qu'en PNG.


    Est-ce que je me trompe ?
    Quelle sont les différences entre ces deux formats ?


    Merci.
     
  2. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 908
    J'aime reçus:
    178
    Oui, privilégie le JPG.
    Le PNG conserve les calques, c'est pourquoi il est plus lourd.
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 160
    J'aime reçus:
    326
    En SVG plutôt.
     
  4. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 740
    J'aime reçus:
    262
    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.
     
  5. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    592
    J'aime reçus:
    79
    Non, le PNG ne conserve pas les calques.
     
  6. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    20 395
    J'aime reçus:
    590
    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.
     
    MaPiCs et Gafraartisan aiment ça.
  7. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Merci pour vos réponses.


    Je veux privilégier le SVG mais je ne sais pas les créer.
    Pouvez-vous me dire quel est le meilleur moyen pour créer des logos de petite taille en SVG svp ?


    Merci beaucoup pour votre aide.
     
  8. Patrick Huet
    Patrick Huet WRInaute occasionnel
    Inscrit:
    1 Octobre 2009
    Messages:
    403
    J'aime reçus:
    54
    Des logiciels comme "Page plus" permettent d'exporter une image au format SVG (et dans les autres formats aussi d'ailleurs).
     
  9. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    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.
     
  10. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    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:eek::D il y a l'art de cuisiner ou la facilité de la bouffe industrielle au micro ondes...
     
    #10 yule, 16 Novembre 2020
    Dernière édition: 16 Novembre 2020
  11. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Merci pour ton article @yule, je l'avais lu.

    Ma question est : puis-je convertir mes images .png en .webp sans perte de qualité ?

    Je n'ai pas trouvé de convertisseur en ligne capable de le faire. Les images en .webp sont de moins bonnes qualité avec.
     
  12. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    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
     
    #12 yule, 17 Novembre 2020
    Dernière édition: 17 Novembre 2020
  13. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
  14. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    Tu as vu la qualité PLUS QUE MEDIOCRE de ton png ????? Comment veux tu que le WEBP améliore ça...
     
  15. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Ce sont des logos qui à la taille de 30x30px se voient assez.

    Je dois mettre quoi pour avoir des logos 30x30px en webp de bonne qualité ?
    Des img full écran ?
     
  16. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    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..
     
    #16 yule, 17 Novembre 2020
    Dernière édition: 17 Novembre 2020
  17. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Pour toi, on doit pouvoir lire ce qui est écrit ?
     
  18. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    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
     
  19. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Bravo @yule , je trouve le rendu .webp très bon, sans perte de qualité.

    Oui, avec le même logo dans le profil du membre.

    Donc :
    Faire ça ?
     
  20. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    Pour un beau rendu oui, courage !
     
  21. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    592
    J'aime reçus:
    79
    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 :
    fortuna 2 2.png
    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. o_O
     
  22. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Merci.
     
  23. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Je cherche à avoir des webp.
    Merci.
     
  24. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    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 .
     
  25. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    Exactement !

    Tu l'affiches à un pourcentage de x % ou directement en 48x48 ça dépend comment est ton responsive.. mais de mémoire, en responsive, seul le logo du membre s'affiche
    A+
    Yule
     
  26. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Une fois les 100x100px convertis en webp, je redimensionne ces webp en 48x48px ?


    Merci.
     
  27. marie 75
    marie 75 Nouveau WRInaute
    Inscrit:
    14 Novembre 2020
    Messages:
    10
    J'aime reçus:
    2
    Pour un meilleur référencement, je mets toutes mes images en Jpg
    plus c'est léger, mieux c'est
     
  28. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    Mes logos ont le même poids en jpg ou png.
     
  29. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    @yule ,
    Ou je créer des 48x48 px en PNG ?


    Merci.
     
  30. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    20 395
    J'aime reçus:
    590
    Aïe aïe aïe
     
  31. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    415
    J'aime reçus:
    41
    Tu les gardes en 100x100 mais tu les affiches en 48x48 , C'est tellement léger. En plus ,tu peux les utiliser pour ailleurs en 80x80 par exemple. le 100x100 est un bon compromis pour d'autres utilisation à future
     
  32. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    OK @yule.
    Merci.
    On va s'y mettre .
     
  33. Duranseau
    Duranseau Nouveau WRInaute
    Inscrit:
    12 Novembre 2020
    Messages:
    2
    J'aime reçus:
    0
    Je pense plutôt que c'est l'inverse : le png plus léger que le jpg.
    Pour un logo , mieux vaut le convertir en png que en jpg.
     
  34. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    En effet.

    Les petits logos (30x30px dans mon cas) sont moins lourds en png qu'en jpg.
     
  35. Bocar
    Bocar WRInaute discret
    Inscrit:
    28 Mars 2005
    Messages:
    145
    J'aime reçus:
    0
    "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.
     
  36. Digit
    Digit WRInaute occasionnel
    Inscrit:
    18 Avril 2003
    Messages:
    463
    J'aime reçus:
    3
    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.
    Je viens de faire le test rapide, on descend à 3755 octets, là où l'image d'origine fait 69k... sans être pro, c'est quand même très facile d'alléger les images, sans perte, améliorant la performance du site (et réduisant la consommation du forfait lors des consultations mobiles).
    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
     
  37. Furtif
    Furtif WRInaute accro
    Inscrit:
    9 Août 2005
    Messages:
    2 865
    J'aime reçus:
    247
    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
     
  38. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 740
    J'aime reçus:
    262
    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.
     
Chargement...
Similar Threads - Logos PNG Forum Date
Logos des partenaires: Peut-on les modifier pour que cela soit moins moche? Administration d'un site Web 5 Décembre 2019
Comment faire partie du carrousel de logos dans Google ? Référencement Google 7 Novembre 2019
Création de LOGOS Noms de domaine et référencement 18 Juin 2015
Logos similaires Droit du web (juridique, fiscalité...) 11 Août 2014
Annuaires web exigants de placer leurs logos ou liens textes en revanche Netlinking, backlinks, liens et redirections 13 Mars 2014
a-t-on le droit de mettre les logos de nos clients - sans leur demander leur autorisation Droit du web (juridique, fiscalité...) 7 Octobre 2013
Pourquoi les logos de site sont 99% du temps en haut à gauche? Développement d'un site Web ou d'une appli mobile 17 Février 2012
Droits pour photos/logos/vidéos dans un cas précis Droit du web (juridique, fiscalité...) 2 Décembre 2011
recherche de logos football Développement d'un site Web ou d'une appli mobile 18 Août 2011
Récupération de logos d'entreprises pour les afficher dans un annuaire Droit du web (juridique, fiscalité...) 4 Avril 2011