OVH Cloud OVH Cloud

Images, qualité, poids et dilemme

19 réponses
Avatar
romer
Hi,

J'ai une banière aux 2 coins supérieurs arrondis sur un fond foncé :
pour que la découpe de ces 2 coins ne se voit pas et se fonde sur le
fond de la page, deux solutions :
1) Je fais les coins de la même couleur que le fond et évidemment ça
marche.
2) Je fais des coins transparents en gif ou png.
ou alors 3) Je ne fais pas de coins arrrondis ;-)

Inconvénient à 1) : si je change ou si on me fais changer le fond, faut
aussi changer le fond des coins. De plus avec un dégradé horizontal du
fond de la page , c'est presque infaisable.

J'ai donc choisi 2) mais...

- le format gif me donne une image dégradée et pour une banière, c'est
pas top (poids 60 Ko)
- le format png 8 bits : idem gif
- le format png 24 bits (poids 250 ko), c'est top mais l'image est
lourde à charger ! Trop. De plus tous le navigateurs vont-ils la traiter
?

Donc dilemme :
Comment améliorer un gif sans l'alourdir ou comment réduire le poids
d'un png 24 bits sans l'altérer ?

Que feriez-vous ?

Merci.
--
A+

Romer

9 réponses

1 2
Avatar
Sergio
SAM avait soumis l'idée :

Dernière question : en bricolant une image .jpg dans tous les coinsavec
un soft d'image, ne peut-on vraiment pas la rendre transparente bien que
cela soit démenti partout sur le web et ailleurs ?



Je pense qu'en effet c'est peine perdue.

Si le truc de coin arrondi fonctionne avec un fond en couleur, ne peut-on
imaginer avoir l'image (jpg) en image de fond du div à coins arrondis ?

Non ça ne fonctionne pas, le truc-bidule rajoute une bande de hauteur égale
au rayon de l'arrondi.

De ttes façons c'est pour justement se passer d'images :
<http://www.html.it/articoli/niftycube/nifty6.html>



...Ou utiliser les propriétés "-moz-border-radius".
Évidemment ça ne marche qu'avec Firefox...


--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
Pierre Maurette
Bernd, le 22/06/2008 a écrit :
Hi,

J'ai une banière aux 2 coins supérieurs arrondis sur un fond foncé :
pour que la découpe de ces 2 coins ne se voit pas et se fonde sur le
fond de la page, deux solutions :
1) Je fais les coins de la même couleur que le fond et évidemment ça
marche.
2) Je fais des coins transparents en gif ou png.
ou alors 3) Je ne fais pas de coins arrrondis ;-)

Inconvénient à 1) : si je change ou si on me fais changer le fond, faut
aussi changer le fond des coins. De plus avec un dégradé horizontal du
fond de la page , c'est presque infaisable.

J'ai donc choisi 2) mais...

- le format gif me donne une image dégradée et pour une banière, c'est
pas top (poids 60 Ko)
- le format png 8 bits : idem gif
- le format png 24 bits (poids 250 ko), c'est top mais l'image est
lourde à charger ! Trop. De plus tous le navigateurs vont-ils la traiter
?

Donc dilemme :
Comment améliorer un gif sans l'alourdir ou comment réduire le poids
d'un png 24 bits sans l'altérer ?

Que feriez-vous ?



Je commencerais par être grossier un bon coup, parce que j'ai déjà
perdu pas mal de temps avec ces coins arrondis. Ensuite,
éventuellement, je regarderais à optimiser la solution 1: admettre des
contraintes mutuelles entre le fond et la bannière, regarder si un seul
coin arrondi (haut gauche) peut être esthétiquement acceptable, dans le
but de s'affranchir des fonds dégradés, etc. En archivant la bannière
sous la forme de deux images et de un ou deux masques, un modif n'est
pas bien longue.
Mais je serais tenté de cesser de perdre du temps: traiter en CSS
(CSS3, il me semble), et laisser les navigateurs évoluer. Je crois
qu'on couvre aujourd'hui Firefox et Opera au moins. IE7 affichera des
coins normaux, en attendant IE8, ce n'est peut-être pas *très grave*...

--
Pierre Maurette
Avatar
Frederic Bezies
Le 23.06.2008 08:19, Sergio a écrit :

SAM avait soumis l'idée :

Dernière question : en bricolant une image .jpg dans tous les coinsavec
un soft d'image, ne peut-on vraiment pas la rendre transparente bien que
cela soit démenti partout sur le web et ailleurs ?



Je pense qu'en effet c'est peine perdue.

Si le truc de coin arrondi fonctionne avec un fond en couleur, ne
peut-on imaginer avoir l'image (jpg) en image de fond du div à coins
arrondis ?

Non ça ne fonctionne pas, le truc-bidule rajoute une bande de hauteur
égale au rayon de l'arrondi.

De ttes façons c'est pour justement se passer d'images :
<http://www.html.it/articoli/niftycube/nifty6.html>



...Ou utiliser les propriétés "-moz-border-radius".
Évidemment ça ne marche qu'avec Firefox...





Euh, mais border-radius a été accepté pour faire parti des propriétés
CSS3 si mes souvenirs sont bons...

--
Frederic Bezies -
Weblog : http://frederic.bezies.free.fr/blog/
Avatar
romer
Sergio wrote:

Deux problèmes différents peuvent arriver :
- T'as mis une zone transparente. Néanmoins, ton logiciel de dessin
aura "antialiasé" le contour. Du coup, sur les bords il y aura des
pixels qui seront entre ta couleur de bordure et ta couleur de fond
(donc non-transparents). Si ta couleur de fond change par rapport à la
couleur initiale, ça se verra.

- T'as dessiné sur un fond égale à la couleur de fond sans mettre de
transparence. À moins que ce ne soit une couleur primaire, suivant les
réglages colorimétriques de l'ordinateur, il se peut que le rendu de
l'image et de ton fond soient différents (dur !).



C'est en effet ce qui arrive sur certains ordis et certains systèmes
mais pas sur d'autres.

Autre chose : j'ai soumis la page hier soir à 48 navigateurs par le
truchement de "browsershot" (oui 48) !
Le png 24 bits fonctionne partout sauf à s'y attendre évidemment sur qq
browsers texte ... et sur IE 5, 6 et 7 ! Cherchez l'erreur.

<humeur>
Mais pourquoi la communauté web ne s'est-elle jamais mobilisée contre
ces méprisables navigateurs depuis tout ce temps et qui on dû faire
perdre des millions d'heures pour imaginer des patchs et bouffer de la
bande passante à n'en plus finir en recherches et discussions pour les
contourner !
</humeur>
--
A+

Romer
Avatar
romer
SAM wrote:

AMHA il faut une image la plus légère possible
Si la bannière n'est pas belle en gif, la revoir en mode 256 couleurs ?
(au lieu de la traiter en millions pour en baisser le nbre après)



En effet, je n'ai pas pensé à cette éventualité - j'essaye et ai un
petit espoir.
Merci.
--
A+

Romer
Avatar
romer
Pierre Maurette wrote:

Je commencerais par être grossier un bon coup, parce que j'ai déjà
perdu pas mal de temps avec ces coins arrondis. Ensuite,
éventuellement, je regarderais à optimiser la solution 1: admettre des
contraintes mutuelles entre le fond et la bannière, regarder si un seul
coin arrondi (haut gauche) peut être esthétiquement acceptable, dans le
but de s'affranchir des fonds dégradés, etc. En archivant la bannière
sous la forme de deux images et de un ou deux masques, un modif n'est
pas bien longue.
Mais je serais tenté de cesser de perdre du temps: traiter en CSS
(CSS3, il me semble), et laisser les navigateurs évoluer. Je crois
qu'on couvre aujourd'hui Firefox et Opera au moins. IE7 affichera des
coins normaux, en attendant IE8, ce n'est peut-être pas *très grave*...



Si je tiens un peu à ces coins arrondis c'est que je n'ai aucun talent
de graphiste. Mes bannières et mises en pages sont d'une banalité à
pleurer... or, ce ces coins arrondis font un peu passer la pillule en
mettant une touche d'originalité que je n'ai pas.

Je te rejoins en effet. J'ai testé un seul coins à gauche pour le
dégradé - c'est pas mal non plus.

Voilà un résultat que je trouve acceptable mais qui ne passe pas avec
ces m... d'IE tous modèles !
C'est pour des élèves et étudiants... pas pour une grosse boite d'agence
de voyage, donc pas de pression insoutenable d'un patron - seulement
l'envie et le désir de pas faire trop moche.

Voilà ce que ça donne :

http://mjomain.free.fr/Bigfiles/essai.jpg

l'a coipie d'écran est en jpg mais l'image réelle est en png 24 bits
--
A+

Romer
Avatar
SAM
Sergio a écrit :

...Ou utiliser les propriétés "-moz-border-radius".
Évidemment ça ne marche qu'avec Firefox...



Il est certain que là ça fonctionne ;-)
(du moins dans Fx.3 - dans mon Fx.2 ça ne coupe pas l'image de fond)

Tout est essspliqué ici :
<http://developer.mozilla.org/fr/docs/CSS:-moz-border-radius>

--
sm
Avatar
SAM
Bernd a écrit :

Voilà ce que ça donne :

http://mjomain.free.fr/Bigfiles/essai.jpg

la copie d'écran est en jpg mais l'image réelle est en png 24 bits



J'essaierais avec 3 images
- gauche (trouver une image qui se dégrade mieux en 256 couleurs)
- centre (les 2 vues du centre)
- droite (le drapeau n'est quasi pas dégradé si en 256 couleurs)

celles droite et gauche seront en gif transparents
celle du centre en jpg par exemple

--
sm
Avatar
romer
SAM wrote:

J'essaierais avec 3 images
- gauche (trouver une image qui se dégrade mieux en 256 couleurs)
- centre (les 2 vues du centre)
- droite (le drapeau n'est quasi pas dégradé si en 256 couleurs)

celles droite et gauche seront en gif transparents
celle du centre en jpg par exemple



OK - Merci - c'est ce que je viens de faire en essai.

Le résultat est évidemment un peu moins bon qu'en png 24 bits sur les
franges de l'arrondi. On voit là de minuscules points blancs vaguement
perceptibles mais bon ! faut presque une loupe pour les distinguer. Je
vais m'en contacter sachant qu'en gif ou pnb 8 bits :
- tous les navigateurs voient la bannière ;
- elle est 4 fois plus légère.

Merci à tous.
--
A+

Romer
1 2