Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

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

10 réponses

1 2
Avatar
METIS
Bernd wrote:
...
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 ?



==> Les coin arrondis, c'est toujours un peu galère.
Il faut les réaliser sur un arrière plan de la couleur
définitive du fond, comme ça, la frange de bord est raccord.
Si tu les fais sans fond, avec transparence, en fonction de
la teinte des fond qui peuvent se changer, ça n'ira que sur
des fonds clairs ou des fonds foncés, selon les cas.
- Les transparences de PNG ne marche avec IE6 au moins.
Si ta cible de clientèle n'utilise pas du tout IE, ok, ça
peut le faire...(;o))))))))

--
<|[;o)) METIS
Avatar
Rakotomandimby (R12y) Mihamina
Bernd wrote:
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 ;-)


[...]
Que feriez-vous ?



Je suggererais une méthode supplémentaire purement javascript:
http://www.html.it/articoli/niftycube/index.html
Désolé c'est en anglais...

--
Serveurs infogérés:
http://www.infogerance.us/infogerance/packs-serveurs-infogeres
Avatar
Patrick 'Zener' Brunet
Bonsoir.

"Rakotomandimby (R12y) Mihamina" a écrit dans le
message de news: g3m2av$280q$
Bernd wrote:
> 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 ;-)
[...]
> Que feriez-vous ?

Je suggererais une méthode supplémentaire purement
javascript:
http://www.html.it/articoli/niftycube/index.html
Désolé c'est en anglais...




Bon, en gros ça consiste à rajouter des lignes de 1px d'épaisseur et avec
une suite de longueurs en sinus pour dessiner l'arrondi.
Ca peut se faire en CSS et sans Javascript.
Au besoin avec un bout de PHP pour insérer automatiquement les minilayers
supplémentaires.

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe
Avatar
romer
METIS wrote:

==> Les coin arrondis, c'est toujours un peu galère.
Il faut les réaliser sur un arrière plan de la couleur
définitive du fond, comme ça, la frange de bord est raccord.
Si tu les fais sans fond, avec transparence, en fonction de
la teinte des fond qui peuvent se changer, ça n'ira que sur
des fonds clairs ou des fonds foncés, selon les cas.



Là je ne comprends pas très bien - je les ai fait sans fond - c'était le
but - et ça marche sur tous les arrière-plans quels qu'ils soient. Tu
veux dire que le contraste est meilleur sur du clair si la photo/image
est foncée et vice-versa ? C'est vrai mais c'est valable pour toute
surface sur une autre - Faut un certain contraste de ton entre elles.

- Les transparences de PNG ne marche avec IE6 au moins.
Si ta cible de clientèle n'utilise pas du tout IE, ok, ça
peut le faire...(;o))))))))



Ça le fait effectivement mais le point de départ est que du png 24 bits,
c'est lourd à charger. Faut donc une clientèle avec ADSL et sans IE !
Je sens que ça limite grave les choses...
--
A+

Romer
Avatar
romer
Patrick 'Zener' Brunet wrote:

Bon, en gros ça consiste à rajouter des lignes de 1px d'épaisseur et avec
une suite de longueurs en sinus pour dessiner l'arrondi.



Ça je connais et en ai fait pour des cadres arrondis avec fond de
couleur ou pas mais sans photo à l'intérieur.
Vous pensez que ça marche aussi avec une photo ?
Faudra essayer mais je ne sais pourquoi, j'ai un doute.
--
A+

Romer
Avatar
Denis Beauregard
Le Sun, 22 Jun 2008 21:01:41 +0200, (Bernd)
écrivait dans fr.comp.infosystemes.www.auteurs:

METIS wrote:

==> Les coin arrondis, c'est toujours un peu galère.
Il faut les réaliser sur un arrière plan de la couleur
définitive du fond, comme ça, la frange de bord est raccord.
Si tu les fais sans fond, avec transparence, en fonction de
la teinte des fond qui peuvent se changer, ça n'ira que sur
des fonds clairs ou des fonds foncés, selon les cas.



Là je ne comprends pas très bien - je les ai fait sans fond - c'était le
but - et ça marche sur tous les arrière-plans quels qu'ils soient. Tu
veux dire que le contraste est meilleur sur du clair si la photo/image
est foncée et vice-versa ? C'est vrai mais c'est valable pour toute
surface sur une autre - Faut un certain contraste de ton entre elles.



Agrandis de beaucoup ces images. Tu verras que le bord n'est pas
uni s'il a été fait en créant une image plus grande et en la
réduisant. D'où le commentaire sur le clair et le foncé.

Par contre, si c'est fait immédiatement à l'échelle finale, la
couleur sera unie et cela ne fera pas de différence selon le fond.

- Les transparences de PNG ne marche avec IE6 au moins.
Si ta cible de clientèle n'utilise pas du tout IE, ok, ça
peut le faire...(;o))))))))



Ça le fait effectivement mais le point de départ est que du png 24 bits,
c'est lourd à charger. Faut donc une clientèle avec ADSL et sans IE !
Je sens que ça limite grave les choses...



Moi je regarderais ce que font les sites à grand volume dans ce
cas, ainsi que les blogs de série.


Denis
Avatar
romer
Denis Beauregard
wrote:

>> ==> Les coin arrondis, c'est toujours un peu galère.

Moi je regarderais ce que font les sites à grand volume dans ce
cas, ainsi que les blogs de série.



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 ?
--
A+

Romer
Avatar
Denis Beauregard
Le Sun, 22 Jun 2008 22:42:39 +0200, (Bernd)
écrivait dans fr.comp.infosystemes.www.auteurs:

Denis Beauregard
wrote:

>> ==> Les coin arrondis, c'est toujours un peu galère.



Moi je regarderais ce que font les sites à grand volume dans ce
cas, ainsi que les blogs de série.



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 ?



Les formats GIF et PNG permettent la transparence, mais pas JPEG.


Denis
Avatar
SAM
Bernd a écrit :

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>

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)

--
sm
Avatar
Sergio
Bernd a utilisé son clavier pour écrire :

==> Les coin arrondis, c'est toujours un peu galère.
Il faut les réaliser sur un arrière plan de la couleur
définitive du fond, comme ça, la frange de bord est raccord.
Si tu les fais sans fond, avec transparence, en fonction de
la teinte des fond qui peuvent se changer, ça n'ira que sur
des fonds clairs ou des fonds foncés, selon les cas.



Là je ne comprends pas très bien - je les ai fait sans fond - c'était le
but - et ça marche sur tous les arrière-plans quels qu'ils soient. Tu
veux dire que le contraste est meilleur sur du clair si la photo/image
est foncée et vice-versa ? C'est vrai mais c'est valable pour toute
surface sur une autre - Faut un certain contraste de ton entre elles.



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 !).

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
1 2