Warum schneidet man Bilder fuer ein Website in mehrere Teile?

[Anja]

Hallo,

ich bin gefragt worden, warum man Bilder fuer eine Website schneidet und nicht "an einem Stueck" belaesst.

Der Grund, den ich kenne, ist, daß 10 kleine Bilder...
a) gleichzeitig laden
b) also schneller laden
...als ein großes (nicht-geschnittenes) Bild.

Weiss jemand offizielle Begruendung dazu? Steht so etwas in den w3c-Spezifikationen irgendwo?

Ich habe zwar recherchiert, aber bisher nichts "amtliches" zum Thema gefunden.

Vielen Dank fuer Eure Hilfe,
Anja

[Lord Helmchen]

Grüße!

Der Grund ist, daß 10 kleine Bilder...
a) gleichzeitig laden
b) also schneller laden
c) man hinter jedem Bild einen anderen Link stecken kann
d) Rollover nur ein Stück Bild austauschen müssen

Kraft meines Amtes als Lord und im Namen des Imperators tue ich hiermit kund und zu wissen und proklamiere, daß die genannten Gründe von jetzt and und immerdar, für alle Zeiten und darüber hinaus, die offiziellen Gründe sein mögen, weshalb man Bilder in kleine Stücke unterteilt!
Dieses Dekret gilt ab sofort! Und... wer ist eigentlich das W3C?

*g*

Lord Helmchen

[Michael Schröpl]

Hi,

Der Grund, den ich kenne, ist, daß 10 kleine Bilder...
a) gleichzeitig laden
b) also schneller laden

hm, das halte ich nur unter bestimmten Randbedingungen
für plausibel.

Wenn mein altes Modem der Engpaß ist, dann nützt es
mir ziemlich wenig, ob sich eine Pixelzeile nach der
anderen für das große Bild über die Leitung quält oder
ob die Teilbilder munter durcheinander kommen. Ich
sehe zwar etwas eher einzelne Mosaiksteinchen, wenn
viele kleine Bilder verwendet werden - aber wenn ich
das will, dann kann ich doch auch interlaced GIf oder
progressive JPEG verwenden - oder? (Klar, beides geht
auch in der Kombination - aber ob das noch etwas bringt?)

Es ist sogar normal, daß mehrere kleinere Bilder in
der Bytesumme größer sind als ein großes (zumindest bei
GIF ist das wohl praktisch immer so, wenn ich mir das
verwendete Dateiformat und Komprimierungsverfahren vor
Augen halte).

Andererseits: Falls meine Leitung sehr schnell sein
sollte, wäre möglicherweise der Server auf der anderen
Seite der Engpaß. Und wenn dieser mehrere Webserver-
Prozesse auf mehrere CPUs verteilt laufen haben sollte
und diese mir echt gleichzeitig die Teilbilder auf die
Leitung schreiben - dann kann es vielleicht tatsächlich
ein bißchen schneller werden.

Viele Grüße
      Michael

(der sich für weitere Ergebnisse dieser Diskussion
durchaus interessieren würde - denn das Zerlegen
eines Bildes ist ja doch echte Arbeit ...)

[Thomas J.S.]

Hallo Michael!

»»denn das Zerlegen eines Bildes ist ja doch echte Arbeit ...)

??? wozu gibt es tools die das erledigen?

Grüße
Thomas

[omelber]

Hi,

kannst du mir bitte mal ein solches Tool empfehlen?

Danke

Olaf

Hallo Michael!

»»denn das Zerlegen eines Bildes ist ja doch echte Arbeit ...)

??? wozu gibt es tools die das erledigen?

Grüße
Thomas

[Thomas J.S.]

Hallo Olaf!

kannst du mir bitte mal ein solches Tool empfehlen?

z.B. picture dicer - freewarehttp://www.ziplink.net/~shoestring/dicer01.htm
(vorgestellt mal unter http://www.ideenreich.com/dr-sof2.shtml

ansonsten kann das z.b. Fireworks auch.

Grüße
Thomas

[Utz Grimminger]

Hi Anja,

so weit ich weiß verursacht es sogar mehr Traffic wenn ein Bild in 10 kleine Bilder zerschnitten ist, weil dafür 10 HTTP-Connects mit Antworten und Rückantworten nötig sind. Ein Zerschneiden brächte daher also in der Regel keinen Geschwindigkeitsgewinn.
Zu dem, was Michael sagte: meiner bescheidenen Erfahrung zufolge dauern interlace-GIFs und progressive JPEGs länger als non-interlace bzw. non-progressive-Dateien - einen Grund dafür weiß ich aber nicht.
Bleibt das, was Lord Helmchen sagte: bei zerschnittenen Bildern hast Du mehr Freiheit mit Rollovers und Links.

Grüße,

Utz

[Rolf Sonderegger]

hallo utz, hallo anja, tach forum

ich bin nicht ganz sicher, aber seit http 1.1 wird nicht mehr für jedes bildschen ein request geschickt..

korrigiert mich bitte, wenn ich falsch liege...

n8

Siramon

[Michael Schröpl]

Hi,

Zu dem, was Michael sagte: meiner bescheidenen Erfahrung zufolge dauern interlace-GIFs und progressive JPEGs länger als non-interlace bzw. non-progressive-Dateien - einen Grund dafür weiß ich aber nicht.

In einem Interlaced-GIF muß ja wohl irgendwie beschrieben werden, in welcher Reihenfolge welche Teile der Bildinformation dargestellt sind - das kostet ein bißchen Platz gegenüber dem non-interlaced-GIF, wo das nicht drin stehen muß.
Zudem muß der Browser beim Darstellen der verschiedenen Bildversionen (naja, zwei eben) etwas mehr rechnen.

Bleibt das, was Lord Helmchen sagte: bei zerschnittenen Bildern hast Du mehr Freiheit mit Rollovers und Links.

Links auf Teile einer Graphik geht auch mit Image Maps.

Viele Grüße
       Michael

[Harald Gabler]

Hallo Anja!

a) gleichzeitig laden
b) also schneller laden
...als ein großes (nicht-geschnittenes) Bild.

Also ich habe mal genau das Gegenteil gelesen. Beim Übertragen von z. B. 10 kleinen Grafiken wird mehr Overhead erzeugt als bei einer großen Datei.

Die Bilddateien dürften auch nicht gleichzeitig geladen werden. In der Regel bauen sich bei mir die Grafiken (bei annähernd gleicher Größe) von oben nach unten auf.

Viele Grüße
Harald

[Michael Schröpl]

Hi,

Die Bilddateien dürften auch nicht gleichzeitig geladen werden. In der Regel bauen sich bei mir die Grafiken (bei annähernd gleicher Größe) von oben nach unten auf.

Was für mich überraschend ist.

Wäre ich ein Browser, dann würde ich beim sequentiellen Parsen des HTML-Dokuments weitere HTTP-Calls abforken, sofern ich parallele Threads frei habe - dann wäre zu erwarten, daß das erste <img> auch zuerst geladen wird.
Möglicherweise parst der Browser zuerst das ganze Dokument, baut einen Stack mit den URLs weiterer Objekte auf und holt sich diese deshalb in umgekehrter Reihenfolge, nachdem das HTML-Dokument vollständig da ist? Kann eigentlich kaum sein, weil suboptimal bezüglich Parallelität ...
Grübelgrübel ... hat mal jemand den Mozilla-Source zur Hand? ;-)

Michael

[Uwe Becker]

Hi,

ein Vorteil, den ich nutze bei zerschnipselten Grafiken ist, daß gleichfarbige Schnipsel
(z.B. große Flächen des Hintergrunds) nicht unbedingt in unterschiedlichen Dateien geladen werden
müssen. Alternativ ist es möglich eine Datei zu laden und an der jeweiligen Stelle mit den notwendigen
width und height Angaben einzuflicken. So spare ich "Fläche" die übertragen werden muß und damit auch
Datenvolumen.

Uhf

[Michael Schröpl]

ein Vorteil, den ich nutze bei zerschnipselten Grafiken ist, daß gleichfarbige Schnipsel
(z.B. große Flächen des Hintergrunds) nicht unbedingt in unterschiedlichen Dateien geladen werden

»»  müssen. Alternativ ist es möglich eine Datei zu laden und an der jeweiligen Stelle mit den notwendigen

width und height Angaben einzuflicken. So spare ich "Fläche" die übertragen werden muß und damit auch
Datenvolumen.

Ich denke, zumindest bei GIF ist das ein Trugschluß.
GIF komprimiert eben solche einfarbigen Flächen (genauer gesagt: Zeilen) so effizient, daß der Overhead der einzelnen kleinen Dateien normalerweise höher ist als die Ersparnis dieser paar Bytes.

[Wowbagger]

Hi Anja,

ich mußte das einmal aus rein technischen gründen:
privat habe ich eine site über die stadt Wien im netz ('ne art interaktives-fotoalbum') mit einem navigationssystem, welchem ein größerer karten-ausschnitt des stadtkerns zugrunde liegt. Nun ist es aber leider so, daß ältere versionen des NN4 wohl probleme haben, wirklich große images (wir reden hier von ca. 1200x1000 pixeln) innerhalb von layern darzustellen - sobald der layer verschoben wurde(=benutzer scrollt karte) bildete sich 'schnee' innerhalb der grafik.

Das problem konnte ich letztlich nur dadurch lösen, die karte in (ich glaube es waren) 6 portionen zu zerlegen.

Ein weiterer vorteil: Alles wird zwar nicht schneller geladen, dafür erscheinen aber recht schnell schon einmal wenigstens teile der karte, der user sieht also "es passiert was" und kann evtl. schon navigieren (wenn zufällig der für ihn interessante teil erscheint).

/*,*/
Wowbagger

[Volker Hinzen]

Hallo Anja,

ich bin gefragt worden, warum man Bilder fuer eine Website schneidet und nicht "an einem Stueck" belaesst.

Wenn in einem grossen Bild Fotoelemente und Illustrationen (z.B. Logo) kombiniert sind, dann macht es durchaus Sinn, das Bild zu zerschneiden und die einzelnen Teilbilder in unterschiedlichen Formaten zu speichern. Die Dateigröße eines Fotos ist als GIF meist erheblich größer als als ;-) JPEG.

Vieleicht kann man durch das Zerschneiden auch manche Teile woanders noch einmal verwenden.

Ausserdem lassen sich statische und dynamische Bildelemente (wie schon gesagt) kombinieren. Mir fällt das die Tachoscheibe mit eingelassenem Counter ein (glaube ich bei Killerwesites von Siegel nachzuschlagen).

Gruss Volker

[Anja]

Hallo und Danke an alle, dich sich gemeldet haben!

Ich haette wirklich nicht gedacht, dass das Thema so ein Interesse bei Euch findet.

Fest steht, dass wir auch alle zusammen wohl keine befriedigende Antwort gefunden haben:
die Haelfte von Euch hat sich dafuer und die andere dagegen ausgesprochen.

Ich habe noch im Photoshop-Manual gefunden, wie die Notwendigkeit von Slices gerechfertigt wird.

Zitat:
"Beim Unterteilen eines Bildes in Slices können Sie jedes Slice im Bild
mit unterschiedlichen Einstellungen optimieren.
Ausserdem koennen sie Rollover-Effekte erstellen,
bei denen verschiedene Status eines Bildes aktiviert werden,
wenn der Web-Besucher eine Maus-Aktion auf dem Slice ausfuehrt."

Uebrigens kann Photoshop das besagte Slicen ganz gut
(jemand von Euch hat ja nach einem Tool gefragt). Kostet aber viel.
Ob es Freeware dafuer gibt, weiss ich leider nicht.

Falls jemand doch weiss, ob es irgendwo offizielle Guidelines fuer Zerschnibbeln von Grafiken gibt,
koennt Ihr mir die Quelle viellecht zumailen??? Ich glaube es Euch ja, aber das Problem ist, dass wir einen
unglaeubigen Auftraggeber haben, den man alles, was man fuer deren Web-Site macht, begruenden muss.
:-(

Anja