Jump to content

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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...