web-dev-qa-db-fra.com

Ce qui est plus rapide, en ajoutant des coins arrondis aux images ou des coins arrondis en CSS

Lequel des suivants va se charger plus vite,

  1. Créer une image carrée et ajouter des coins arrondis via CSS
  2. Ajout de coins arrondis à l’image par défaut sans utilisation du css supplémentaire.

De plus, si 2 est plus rapide, cela signifie-t-il que la fonctionnalité des coins arrondis n'a été ajoutée que pour aider les programmeurs qui ne sont pas capables de créer leurs propres coins arrondis dans les images?

Merci pour toute aide!
Métropole

htmlimagescss3
3
Metropolis

En supposant que vous essayez uniquement de créer une boîte avec des coins arrondis et rien d'autre, l'utilisation de CSS devrait être plus rapide car aucune image ne doit être téléchargée pour que la bordure avec des coins arrondis soit affichée. Cela signifie au moins une requête HTTP de moins et moins de données à télécharger (et par conséquent moins de latence).

3
John Conde

Il y a quelque temps, j'ai écrit un tutoriel sur comment créer des angles arrondis avec une seule image . Si vous suivez cette voie, je vous recommanderais d'inclure cette image dans le cadre d'un Sprite contenant d'autres parties de votre mise en page.

L'inconvénient de l'utilisation d'une image est que vous devez connaître l'arrière-plan ou utiliser un balisage supplémentaire pour le réaliser. C'est aussi moins flexible pour les mises à jour ou les changements. Les avantages sont qu'il n'a pas besoin de JavaScript et qu'il est multi-navigateur.

L'utilisation de CSS3 présente l'avantage de ne nécessiter aucun code JavaScript ou balisage supplémentaire. Les inconvénients sont que ce n'est pas inter-navigateur, les bords arrondis avec des bordures sont très pixellisés, et vous devez gérer les propriétés CSS spécifiques au navigateur pour que cela fonctionne.

Les deux méthodes devraient être assez rapides pour la plupart des cas, bien que je soupçonne que les bords arrondis de CSS3 seraient légèrement plus rapides que l’utilisation d’une image. Cela dit, il y a des considérations autres que la vitesse. À ce stade, même si j’avais déjà utilisé la méthode image par le passé, je me tournerais probablement vers CSS3.

2
Virtuosi Media

Le (1) est rendu plus rapide, et le plus important est polyvalent.

CSS est plus rapide, car lorsque vous utilisez CSS, vous n'aurez même pas besoin de télécharger image/images. vous pouvez par exemple appliquer des coins arrondis à un bloc div avec un arrière-plan blanc.

Mais la raison la plus importante est d'être polyvalent. si vous changez d'avis à propos du bloc div affichant des coins arrondis, il ne faut rien pour ajuster CSS, supprimer des coins arrondis, modifier leurs couleurs ou réduire leur rayon. Si vous avez créé des angles arrondis avec des images, vous devrez peut-être ouvrir Photoshop, redéfinir les angles arrondis, les couper en tranches et les replacer dans la présentation du site Web.

1
Marco Demaio

S'il y a une différence entre eux, ce sera si petit que cela ne vaut absolument pas la peine d'être considéré.

En ce qui concerne votre deuxième question, l'objectif de CSS est de séparer la présentation du code. Supposons que vous utilisez des images aux coins arrondis sur votre site, vous décidez de les revoir et ces images arrondies ne correspondent pas vraiment à votre nouvelle présentation. Préférez-vous changer une ligne dans votre feuille de style ou régénérer toutes vos images pour supprimer les coins arrondis?

La seule raison pour laquelle border-radius n'est pas largement utilisé est un manque de prise en charge dans Internet Explorer. Espérons que les choses iront mieux quand IE9 sera publié correctement et obtiendra une part de marché.

0
Tim Fountain

En fait, il y a 3 choix.

  1. Utiliser CSS pour créer les bords arrondis
  2. Utilisez CSS pour créer des bords arrondis avec des images de coins arrondis
  3. Utilisez une fonction AJAX pour créer des coins arrondis

Le problème avec 1 est que la plupart des navigateurs ne le prennent pas en charge ou ne prennent pas en charge différents formats. IE6-IE8 a en particulier beaucoup de problèmes. Je crois que cela devrait être résolu une fois que tous les navigateurs supposent CSS3 complètement, mais c'est long.

Le problème avec l'option 2 est que vous perdez un peu de temps de chargement pour télécharger les images. Pour le faire vraiment bien, vous devez connaître la largeur de vos boîtes. Enfin, IE6 le gèrera toujours mal car il ne gère pas très bien les fichiers .PNG, nécessaires pour l’option 2.

Enfin, le problème avec l’option 3 est qu’il peut prendre un certain temps de tout ajuster pour fonctionner comme vous le souhaitez et que cela risque d’être légèrement plus lent. J'ai utilisé l'option 3 à plusieurs reprises et je n'ai pas été en mesure de remarquer la différence de temps de chargement.

0
Ben Hoffman

Vous pouvez arrondir une image avec CSS, mais  (correction par conversation avec @Starx) Vous ne pouvez pas arrondir une image avec CSS et De toute façon, vous ne bénéficierez pas d’un avantage, car vous ne masquerez que des sections de l’image. Les octets masqués sont toujours présents et doivent toujours être transférés vers le navigateur de l'utilisateur. Par conséquent, vous ne bénéficiez pas d'un avantage en bande passante, même s'il s'agit d'un fichier PNG transparent.

De plus, vous vous ferez du mal (même si peu), car dans votre feuille de style, le code que vous devrez écrire pour effectuer l'effet ajoutera un surcoût à votre feuille de style. Ainsi, vous ajouterez plus de données au navigateur et augmenterez votre utilisation de la bande passante.

L'option 2 de votre question est plus appropriée lorsqu'il s'agit d'images. Quant aux raisons pour lesquelles les angles arrondis ont été ajoutés à CSS, cela n’a rien à voir avec les images et les programmeurs [sucer avec PS ...]. Parmi les utilisations possibles, citons une personne qui essaie de reproduire l’arrondi des champs/boutons de saisie Apple sur leur page. Un autre exemple serait celui de div qui doit jouer le rôle de panneaux ou de modaux.

En réalité, il n'y a pas d'utilisation définie, c'est simplement une question de commodité pour tout ce avec quoi vous travaillez.

UPDATE

Le CSS a dû arrondir un objet dans tous les navigateurs prenant en charge l’arrondi:

-moz-border-radius: ?px;
-webkit-border-radius: ?px;
border-radius: ?px;

border-radius doit être le dernier parce que c'est la propriété appropriée par spécification. Pour plus de détails, s'il vous plaît allez ici .

0
Gup3rSuR4c