Créer pour un bouton une image entière ou qui se répète via CSS

Bonjour,

dans mon ancien site quand je créait des boutons, j'utilisais une image de 1 pixel de large et j'effectuais un repeat-x dans ma feuille de style.
Je faisais ça pour ne pas alourdir ma page HTML afin qu'elle s'affiche plus vite.

Je me demande maintenant (avec l'arrivée du Haut débit) si c'est toujours d'actualité.

Faut-il procéder toujours de cette façon, ou bien peut-on mettre un bouton "entier" sans jouer avec le CSS ?

Sachant que pour moi il est beaucoup plus simple de coller un image dans un DIV...

Merci d'avance pour vos conseils.

Il n'y a pas de petites optimisations. Ca restera toujours d'actualités.
Dans le même esprit mais en plus poussé, tu as la technique des sprites CSS, qui pousse l'optimisation à un niveau supérieur (évidement, attention à ne pas pousser le bouchon trop loin maurice ).
Après aujourd'hui avec l'arrivé des CSS 3, on va enfin pouvoir se passer des images.

Biensûr que c'est toujours d'actualité.

Les grilles d'images sont utiles voir indispensables. Elle réduisent la charge du serveur, car pour chaque image affichée sur ton site, le navigateur fait une requête GET.

Sur un sprites CSS, préalablement optimisés via un compresseur PNG (pngout pour ne citer que lui), tu cales tout tes pictogrammes et autres éléments graphiques.

Ou la la mais ma question était toute simple à la base...

Je vois que vous me parlez de sprite css, pictogramme, compresseur png

Je ne sais ce que c'est que tout ça ....

En gros pour faire plus simple, j'ai un bouton arrondi :

Je dois donc le décomposer en trois partie :

1) La forme arrondie gauche

2) la forme arrondie droite

3) une image de 1 pixel de large (avec un repeat x et y)

C'est bien ça ?

Mais quand je vois les boutons d'alsacréation (le bouton Envoyer que j'ai en dessous de mon message)

Je vois que c'est un bouton entier et non décomposer....

Salut,

Il ne faut pas oublier une petite chose, l'internaute peut faire le choix d'agrandir ou de réduire la taille du texte, et peut choisir de n'utiliser que le zoom texte.
S'assurer que le texte n'en déborde pas (au risque de le rendre illisible) nécessite effectivement de décomposer le bouton en deux images (partie gauche arrondie, et partie droite arrondi qui a une grande largeur du fond central).
Dans le cas d'Alsacréations, le choix a été d'avoir des boutons tout en image en html avec attribut alt renseigné. Aucun risque de débordement de texte du bouton, donc la seule image suffit donc.

Pour expliquer les termes que tu ne comprends pas :
- un sprite css correspond à une planche qui regroupe différentes images du design d'un site, pour ne faire qu'une seule requete au serveur lors de l'affichage de la page. C'est par CSS qu'on va choisir le positionnement de chaque image pour toutes les afficher comme il se doit.
- un pictogramme est un petit élément visuel simple représentatif d'un environnement, par exemple une petite enveloppe pour un lien vers le formulaire d'envoi de courrier.
- un compresseur png est un petit logiciel qui te permet de diminuer le poids des fichiers utilisé par ton site tout en permettant de conserver une qualité d'image correcte pour le plaisir du visiteur.

Salut,

Ha d'accord.

Merci pour l'explication des termes.

Je vais peut-être me tourner vers la technique qu'utilise Alsacreations (des bouton tout en image). C'est plus simple.