it-swarm.com.de

Was schneller ist, Bilder mit abgerundeten Ecken zu versehen oder abgerundete Ecken in CSS hinzuzufügen

Welche der folgenden wird schneller geladen,

  1. Erstellen eines quadratischen Bildes und Hinzufügen abgerundeter Ecken über CSS
  2. Standardmäßig werden dem Bild abgerundete Ecken hinzugefügt, ohne das zusätzliche CSS zu verwenden.

Wenn 2 schneller ist, bedeutet dies, dass die Funktion für abgerundete Ecken nur hinzugefügt wurde, um Programmierern zu helfen, die nicht in der Lage waren, ihre eigenen abgerundeten Ecken in Bildern zu erstellen?

Danke für jede Hilfe!
Metropole

3
Metropolis

Angenommen, Sie versuchen nur, eine Box mit abgerundeten Ecken und nichts anderem zu erstellen, sollte die Verwendung von CSS schneller sein, da keine Bilder heruntergeladen werden müssen, damit der Rand mit abgerundeten Ecken angezeigt wird. Das bedeutet, dass mindestens eine HTTP-Anfrage und weniger Daten heruntergeladen werden müssen (und dadurch weniger Latenz).

3
John Conde

Vor einiger Zeit schrieb ich ein Tutorial über wie man abgerundete Ecken mit nur einem Bild erstellt . Wenn Sie diesen Weg gehen, würde ich empfehlen, dieses Bild als Teil eines Sprites aufzunehmen, das andere Teile Ihres Layouts enthält.

Die Nachteile der Verwendung eines Bildes bestehen darin, dass Sie den Hintergrund kennen oder zusätzliche Markierungen verwenden müssen, um dies zu erreichen. Es ist auch weniger flexibel für Updates oder Änderungen. Die Vorteile sind, dass es kein JavaScript benötigt und browserübergreifend ist.

Die Vorteile der Verwendung von CSS3 bestehen darin, dass kein JavaScript oder zusätzliches Markup erforderlich ist. Die Nachteile sind, dass es nicht browserübergreifend ist, abgerundete Kanten mit Rändern stark pixelig sind und Sie sich mit den browserspezifischen CSS-Eigenschaften auseinandersetzen müssen, damit es funktioniert.

Beide Methoden sollten für die meisten Zwecke schnell genug sein, obwohl ich vermute, dass abgerundete CSS3-Kanten etwas schneller sind als die Verwendung eines Bildes. Das heißt, es gibt andere Überlegungen als die Geschwindigkeit. Zu diesem Zeitpunkt würde ich mich wahrscheinlich an CSS3 orientieren, obwohl ich in der Vergangenheit die Bildmethode verwendet habe.

2
Virtuosi Media

Die (1) ist schnelleres Rendern und was wichtiger ist vielseitig.

CSS ist schneller, da Sie bei Verwendung von CSS nicht einmal Bilder herunterladen müssen. Sie können beispielsweise abgerundete Ecken auf einen div Block mit weißem Hintergrund anwenden.

Der wichtigste Grund ist jedoch, vielseitig zu sein. Wenn Sie es sich anders überlegen, ob der Block div abgerundete Ecken anzeigt, ist es nicht erforderlich, CSS anzupassen und abgerundete Ecken zu entfernen oder ihre Farben zu ändern oder ihren Radius zu verringern. Wenn Sie mit Bildern abgerundete Ecken erstellt haben, müssen Sie möglicherweise Photoshop öffnen, die abgerundeten Ecken neu gestalten, sie in Scheiben schneiden und sie wieder im Website-Layout platzieren.

1
Marco Demaio

Wenn es irgendeinen Unterschied zwischen ihnen gibt, wird er so klein sein, dass es absolut nicht wert ist, darüber nachzudenken.

Bei Ihrer zweiten Frage geht es darum, die Präsentation vom Code zu trennen. Angenommen, Sie verwenden Bilder mit abgerundeten Ecken auf Ihrer Website und entscheiden sich für eine Neugestaltung. Diese abgerundeten Bilder passen nicht wirklich zu Ihrem neuen Layout. Möchten Sie lieber eine Zeile in Ihrem Stylesheet ändern oder alle Bilder neu generieren, um die abgerundeten Ecken zu entfernen?

Der einzige Grund, warum der Rahmenradius nicht häufig verwendet wird, ist die mangelnde Unterstützung in Internet Explorer. Hoffentlich wird es besser, wenn IE9 ordnungsgemäß veröffentlicht wird und Marktanteile hinzugewonnen werden.

0
Tim Fountain

Eigentlich gibt es 3 Möglichkeiten.

  1. Verwenden Sie CSS, um die abgerundeten Kanten zu erstellen
  2. Verwenden Sie CSS, um abgerundete Kanten mit Bildern mit abgerundeten Ecken zu erstellen
  3. Verwenden Sie eine AJAX -Funktion, um abgerundete Ecken zu erstellen

Das Problem mit 1 ist, dass die meisten Browser es nicht unterstützen oder unterschiedliche Formate unterstützen. IE6-IE8 hat speziell viele Probleme. Ich glaube, dies sollte gelöst werden, sobald alle Browser CSS3 vollständig unterstützen, aber das ist eine lange Zeit.

Das Problem mit Option 2 besteht darin, dass Sie beim Herunterladen der Bilder etwas Ladezeit verlieren. Um es wirklich gut zu machen, müssen Sie die Breite Ihrer Kisten kennen. Schließlich wird IE6 immer noch schlecht damit umgehen, da es PNG-Dateien, die für Option 2 erforderlich sind, nicht sehr gut verarbeiten kann.

Schließlich ist das Problem mit Option 3, dass es einige Zeit dauern kann, bis alles nach Ihren Wünschen funktioniert und es möglicherweise etwas langsamer ist. Ich habe Option 3 oft verwendet und konnte den Unterschied in der Ladezeit nicht feststellen.

0
Ben Hoffman

Sie können ein Bild mit CSS runden, aber  (Korrektur pro Konversation mit @Starx) Sie können ein Bild nicht mit CSS runden und es würde nicht Sie haben sowieso keinen Vorteil, da Sie nur Teile des Bildes maskieren. Die verborgenen Bytes sind noch vorhanden und müssen noch an den Browser des Benutzers übertragen werden, sodass Sie keinen Bandbreitenvorteil haben, selbst wenn es sich um ein transparentes PNG handelt.

Darüber hinaus werden Sie sich selbst (sehr wenig) verletzen, da der Code, den Sie in Ihrem Stylesheet schreiben müssen, um den Effekt auszuführen, tatsächlich einen zusätzlichen Aufwand für Ihr Stylesheet bedeutet. Auf diese Weise fügen Sie tatsächlich mehr Daten hinzu, die an den Browser übertragen werden sollen, und erhöhen die Bandbreitennutzung.

Option 2 in Ihrer Frage eignet sich besser für den Umgang mit Bildern. Was die Gründe angeht, warum die abgerundeten Ecken zu CSS hinzugefügt wurden, hat dies nichts mit Bildern und Programmierern zu tun. Einige der Verwendungszwecke, die Sie möglicherweise sehen, sind Versuche, die Rundheit der Apple Eingabefelder/Schaltflächen auf ihrer Seite zu reproduzieren. Ein anderes Beispiel wären div, die als Panels oder Modals fungieren müssen.

Wirklich, es gibt keine definierte Verwendung, es ist nur eine Frage der Bequemlichkeit, mit was auch immer Sie arbeiten.

UPDATE

Das CSS musste ein Objekt in allen Browsern runden, die das Runden unterstützen:

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

border-radius muss als letztes angegeben werden, da dies die eigentliche Eigenschaft gemäß Spezifikation ist. Weitere Informationen finden Sie unter hier .

0
Gup3rSuR4c