Jump to content

Logos en PNG ou JPG


Bocar

Recommended Posts

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.

Link to comment
Share on other sites

Bonjour,

 

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

  • Il permet la transparence
  • Sa compression est sans perte
Link to comment
Share on other sites

  • 3 weeks later...

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)

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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 by Bocar
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...