Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

#1 Le 30/08/2015, à 10:00

temps

css3 vs jpg du poids et des images

Bonjour,

Si nous prenons une image de jpg web de 108px x 72px le poids tourne autour de 1 ko

Prenons le cas du drapeau français à ce format ouvrant un lien :

<a href="http://www.letime.net/cours/" ><img src="http://www.letime.net/cours/fr.jpg" height=72 width=119 alt="Fr" /></a>

cela demande de télécharger plus d'un ko.

Maintenant reprenons le même cas en construisant nos images en css3

pour le style dans head

<style>

.trait_vertical1{
	position:relative;
  width: 36px;
  height: 72px;
  background-color: #0033CC;
  cursor:pointer;
}
.trait_vertical1:active{
  background-color: #F5FFFA;
}
.trait_vertical2{
	position:relative;
  width: 36px;
  height: 72px;
  background-color: white;
}
.trait_vertical3{
	position:relative;
  width: 36px;
  height: 72px;
  background-color: red;
}
.trait_horizontal1{
	position:absolute;
  width: 108px;
  height: 24px;
  background-color: black;
  cursor:pointer;
}
.trait_horizontal1:active{
  background-color: #F5FFFA;
}
.trait_horizontal2{
	position:relative;
  width: 108px;
  height: 24px;
  top:24px;
  background-color: red;

}
.trait_horizontal3{
	position:relative;
  width: 108px;
  height: 24px;
  top:24px;
  background-color: yellow;

}

</style>

et dans le body

<div>
<div class="trait_vertical1" onclick="location.href='http://www.letime.net/cours/';"  style="margin-top:10px ; margin-left:10px">
<div class="trait_vertical2" style="margin-top:10px ; margin-left:36px">
<div class="trait_vertical3" style="margin-top:10px ; margin-left:36px">

</div>
</div>
</div>

<div class="trait_horizontal1" onclick="location.href='http://www.letime.net/cours/de/';"  style="margin-top:-72px ; margin-left:140px">
<div class="trait_horizontal2">
<div class="trait_horizontal3">

</div>
</div>
</div>

</div>

Nous créons nos images avec quelques octets et en plus nous pouvons même en codant un peu en faire des vidéos en reprenant la technique que j'indique sur un autre fil de discussion.

Cordialement

P.S. En plus pour ceux qui veulent protéger leur logo, l’image en css3 apporte des avantages de protections bien supérieur au jpg

Dernière modification par temps (Le 30/08/2015, à 10:03)


Parce que l'USB bootable est le support des systèmes experts,
Parce que l'USB bootable contient sa propre image au démarrage.
L'USB bootable permet de créer un monde à la dimension de son imagination
https://www.letime.net

Hors ligne

#2 Le 31/08/2015, à 10:06

mrlem

Re : css3 vs jpg du poids et des images

C'est un cas très particulier parceque :

- cette image est très facile à faire en CSS
- l'usage du JPG pour cette image est une grosse erreur

Tu as une image constituée d'à-plats, la stocker en PNG est beaucoup plus efficace. (sans faire d'effort particulier, j'obtiens une image de 171 octets pour le PNG contre 926 octets pour le JPG).

Le CSS, c'est mignon, mais le rendu d'une image va aussi dépendre de l'interprétation du navigateur, et là attention. Bref, ce n'est pas franchement fait pour ça.

Conclusion : choisir le bon format d'image pour la bonne image, c'est essentiel (JPG est généralement mieux pour les photographies, PNG souvent plus pour les images synthétiques)

Hors ligne

#3 Le 31/08/2015, à 17:13

temps

Re : css3 vs jpg du poids et des images

Bonjour,
Merci pour la réponse.
je pense que chaque cas est un cas très particulier.
Je crée actuellement des alphabet en css et un générateur texte css, en même temps que des instruments de musiques en css pour une application audio que j'ai créé.
je trouve que la technique apporte une légèreté inégalée et la possibilité de mini mouvements jusqu'au film inter-actif.
Bien que j'utilise le png depuis de nombreuses années, je n'ai jamais entrevus de telles possibilités.
Il y a quelques années j'avais créé un moteur de recherche qui mappait les images PNG, pour cliquer les choix, c'était bien plus lourd que le css qui en plus peut se compresser.
Il faudrait peut être écrire un module à gimp pour qu'il identifie toutes les formes d'une image de manière à l'exporter en css, pour pouvoir vraiment comparer.
Concernant la compatibilité, sortie de mozilla, je ne cherche même pas si ça marche.

Cordialement

Dernière modification par temps (Le 31/08/2015, à 17:18)


Parce que l'USB bootable est le support des systèmes experts,
Parce que l'USB bootable contient sa propre image au démarrage.
L'USB bootable permet de créer un monde à la dimension de son imagination
https://www.letime.net

Hors ligne