Aller au contenu

Logos en PNG ou JPG


Bocar

Sujets conseillés

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.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

 

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

  • Il permet la transparence
  • Sa compression est sans perte
Lien vers le commentaire
Partager sur d’autres sites

  • 3 semaines plus tard...

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)

Lien vers le commentaire
Partager sur d’autres 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>

 

Lien vers le commentaire
Partager sur d’autres 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.

Modifié par Bocar
Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines plus tard...

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...