Logos en PNG ou JPG

[Bocar]

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.

[Dan]

Bonjour,

 

J'opterais pour le PNG sans hésitation pour les deux raisons suivantes :

• Il permet la transparence
• Sa compression est sans perte

[Bocar]

Merci Dan.

[Pierrick]

Je rejoins Dan, pour un logo, du PNG sera mieux. Tu peux optimiser ton PNG, souvent, il pèse à peine plus qu'un JPG à moins d'être très complexe. Exemple d'outil pour le faire : https://tinypng.com/, si tu utilises Photoshop tu peux le faire directement avec (Enregistrer pour le Web)

 

Mais il existe d'autres options, tu peux ensuite convertir ton PNG au format WebP qui sera bientôt géré par tous les navigateurs, il manque Safari mais la prochaine version devrait l'intégrer. Si tu le mets en place maintenant, ça implique la gestion d'un failback en PNG.

 

Dernière solution que j'ai appliqué sur mon site, le SVG et plus particulièrement l'utilisation d'une fonte mais cela implique d'avoir un logo simple (dans le cas de la fonte). L'avantage d'exploiter une typo d'icône est que tu peux exploiter la ligature. C'est-à-dire qu'un texte est remplacé par le logo après chargement de la fonte. D'un point de vue SEO, ça permet d'être efficace. (ça reste de l'optimisation très fine hein)

[Bocar]

Bonjour.

 

 

Qu'est-ce qu'un failback en PNG stp ? Et une fonte ?

 

 

Merci.

 

 

[Pierrick]

Il y a 4 heures, Bocar a dit :

Bonjour.

 

 

Qu'est-ce qu'un failback en PNG stp ? Et une fonte ?

 

 

Merci.

 

 

Pardon, je voulais dire un fallback.

 

Exemple :

<picture>
	<source type="image/webp" srcset="logo.webp">
	<img src="logo.png" alt="Mon logo">
</picture>

En HTML, ça se gère comme ça. Les navigateurs qui savent afficher le webp prendront ma "source" tandis que les autres se tourneront vers mon "img". De cette façon, tu peux aussi gérer les images responsives et les légendes :

<figure>
  <picture>
    <source type="image/webp" srcset="flower-medium.webp" media="(max-width: 480px)">
    <source srcset="flower-medium.jpg" media="(max-width: 480px)">
    <source type="image/webp" srcset="flower-large.webp" media="(max-width: 1280px)">
    <source srcset="flower-large.jpg" media="(max-width: 1280px)">
    <source type="image/webp" srcset="flower.webp" media="(min-width: 1281px)">
    <img src="flower.jpg" alt="Une fleur">
  </picture>
  <figcaption>La légende d’une fleur</figcaption>
</figure>

 

[Bocar]

Il y a 23 heures, Pierrick a dit :

Les navigateurs qui savent afficher le webp prendront ma "source" tandis que les autres se tourneront vers mon "img".

Pourquoi faire ça si tous les navigateurs peuvent afficher le webp (dont Safari aussi à venir).

 

 

Merci.

Edited November 25, 2020 by Bocar

[Pierrick]

Le 25/11/2020 at 21:54, Bocar a dit :

Pourquoi faire ça si tous les navigateurs peuvent afficher le webp (dont Safari aussi à venir).

 

 

Merci.

Dans l'instant présent ce n'est pas le cas, tu ne peux pas mettre tous les utilisateurs d'iphone et de mac de côté pendant plusieurs mois sous prétexte que ça va finir par être fonctionnel. Et tu dois gérer les quelques utilisateurs qui sont sur de vieux navigateurs.

[Bocar]

Tu as raison @Pierrick.

 

 

Tu me suggères donc de faire un

<figure>
  <picture>
    <source ...>

 

Edited November 27, 2020 by Bocar

[poulpe-bleu]

Bonjour,

Je croyais que le PNG était certes un petit format mais de moins bonne qualité que le format JPG. Après c'est beaucoup plus pratique, il est passible d'être compressé à souhait, mais je pensais que la qualité n'était pas au rdv.

[Bocar]

Le 27/11/2020 at 11:29, Bocar a dit :

Tu as raison Pierrick

 

Tu me suggères donc de faire un

<figure>
  <picture>
    <source ...>

 

@Pierrick ?