Sprite/PNG Grafik-schwere Seite, oh mein!

Question

Ich muss eine Website erstellen, die sehr grafiklastig ist (zerrissene Papierhintergründe mit transparenten Schatten über texturierte Grafiken usw.) Eine Möglichkeit, die Dateigröße zu sparen, bestand darin, alle meine Hintergrundelemente in ein PNG zu kopieren. Das Problem ist, dass diese Datei jetzt 180k ist. Wenn ich es in verschiedene GIFs und ein paar PNGs zerlege, dann wäre es näher bei 70k.

Ist es wirklich wichtig? Was ist heutzutage "zu groß" für die Dateigröße? Wird jemand bemerken, wenn die Datei 180 oder 70k ist?

Answer 1

Wenn Ihre Benutzer schnellen Zugriff auf Ihre Site haben (z. B. in einem Intranet), ist 180k kaum ein Problem. Wenn andererseits die Website von der generischen älteren Person mit einer humorvoll langsamen Verbindung verwendet wird, wird es wahrscheinlich ein Problem sein. Wenn Ihre Benutzer GPRS verwenden, aber endlose Geduld haben, wird das wahrscheinlich kein Problem sein. Wenn die Seite eine Million Dollar an denjenigen ausgibt, der die Geduld hat, die Ladezeit abzuwarten, sind Übertragungsgeschwindigkeiten kein Problem. Und so weiter.

Was ich sage, es hängt wirklich von Ihren Anforderungen und Einschränkungen ab. Dies erfordert, dass Sie viele Dinge wissen (und uns später sagen, dass wir hilfreicher sind), bevor Sie es richtig machen können.

Um das lästige downvotes für sehr-valid-Antworten-but-einfach-Paßt nicht-bitte-jemand zu vermeiden, hier ist meine Antwort:

180k von einer Standard-ADSL-Modem-Übertragungsrate geteilt = 180kB/100kB/s = 1,8 s = erträglich.

Answer 2

Gibt es einen Grund nicht die kleineren Bilder zu verwenden? Es hört sich so an, als ob du es schon gebrochen hast, also warum nicht mit der kleineren, schnelleren Methode gehen?

Aus einer rein relativistischen Sicht, 70k dauert nur 38% der Download-Zeit, die 180k würde (ungefähr). Wenn Sie hohen Datenverkehr erwarten oder schnelle Ladezeiten wünschen, hilft jedes Bit.

Answer 3

Sie müssen die Zeit vergleichen, die benötigt wird, um alle einzelnen Bilder anzufordern und die Zeit, die zum Herunterladen des einen großen Bildes benötigt wird. Das Problem besteht bei HTTP-Anfragen.

Ich schlage vor, Sie führen einige Tests mit Googles Firefox-Erweiterung, Pagespeed, um zu sehen, ob es einen großen Unterschied zwischen dem großen png oder den getrennten gibt.

Ein Vorteil, den ich denken kann, neben weniger HTTP-Anfragen ist, dass Ihre Website alle auf einmal statt schrittweise geladen wird, da alle Grafiken heruntergeladen werden. Das Endergebnis jedoch, wie Henrik sagte, ist, dass es auf Ihren Anforderungen abhängt.

Answer 4

Ich bin mir sicher, dass Sie wissen, dass das Teilen in mehrere Bilder zusätzliche Verbindungen zum Server bedeutet, um sie mit zugehöriger Verzögerung bei jedem und der zusätzlichen Größe der Anforderungs- und Antwortheader abzurufen.

Da Browser die Anzahl der aktiven Verbindungen zu jedem Server beschränken (abhängig von der Browserversion), kann dies länger dauern als das Abrufen eines einzelnen Bildes. Die übliche Problemumgehung, um das Limit zu erhöhen, besteht darin, einen separaten "Images" -Server oder einen DNS-Alias ​​zu verwenden, der demselben Host zugeordnet ist.

Und wenn Sie keine Animation benötigen, würde ich immer PNG über GIF empfehlen.

Answer 5

Stellen Sie sicher, dass die Website in Ordnung ist, wenn Bilder zuerst deaktiviert sind (also Alt-Tags, Breite und Höhe festlegen, korrekte Farben verwenden) und dann die Bilder in Gruppen aufteilen. Gruppiere alle deine Buttons möglichst in ein Bild (mit CSS Sprite Sheets) und alle Grenzen in ein anderes.Halten Sie große Bilder in separaten Dateien (so Site-Hintergrund, Header).

Je mehr Bilder Sie haben, desto mehr kann der Browser die Anfragen parallelisieren. Wenn Sie sie jedoch zu viel aufteilen, werden verschiedene Bilder zu unterschiedlichen Zeiten geladen, wodurch Teile der Website eingeblendet werden. Es ist ein bisschen ein Kompromiss, aber das ist die Freude am Programmieren :)

Je besser Ihre Website Bevor die Bilder sichtbar sind, wird der Benutzer die Geschwindigkeit des Herunterladens der Bilder weniger beachten.