aufgreifen: Frage zu div-Positionierung am Browserrand.

Beitrag lesen

Hallo aufgreifen

Ist es wirklich günstig, statt aneinandergereiter kleiner Bilder als Haupthintergrund und aufliegender kleiner Bilder einen einzigen großen Hintergrund von z.B. 2000x2000 px zu machen?

Das kann nicht pauschal gesagt werden.
Das Beispiel verwendet ein gekacheltes Haupthintergrundbild mit 22,5 KB und das Foto mit 40,5 KB.
Dazu kommen dann noch etwa 4 KB für die Serverkommunikation selbst, also insgesamt also etwa 67 KB.

Ein großes Hintergrundbild (2000x2000 px) mit diesem Foto wäre dann als JPG in einer als Hintergrund ausreichenden Qualität etwa 350 KB groß.
Ein großes Hintergrundbild wegen dieses einen Fotos wäre also Nonsens.

Was aber, wenn du viele Fotos auf dem Hintergrund platzieren willst?
Jedes einzelne Foto hätte dann auch wieder etwa 40 KB (aufgrund der notwendigen Transparenz ist JPG-Format nicht möglich, welches die meisten Fotos besser komprimieren kann als GIF oder PNG). Dazu kommen dann pro Grafik etwa 2 KB für die Kommunikation mit dem Server.
Außerdem müsstest du viele Elemente ins XHTML schachteln, weil jedes nur ein Hintergrundbild haben kann.
Die Dateigröße des großen Hintergrundbildes ändert sich aber nicht wesentlich, wenn es mehrere Fotos enthält.

Jetzt hängt es davon ab, wie die Fotos verteilt sein sollen.
Wenn diese rundherum auf dem freien Rand verteilt sein sollen, dürfte ein großes Bild sinnvoll sein.
Sollen sie nur den rechten Rand etwas füllen, dann würde ich es wohl so machen.

Noch etwas:
Überlege dir immer und teste im Zweifelsfall, welches Dateiformat für eine Grafik das jeweils effektivste ist. Einen Anhaltspunkt kann dir der Artikel GIF oder JPEG geben, wobei du das dort nicht erwähnte PNG-Format auch berücksichtigen solltest. Das dort für GIF geschriebene trifft auch für 8bit-PNG zu, wobei PNG meist etwas besser komprimiert als GIF.

Auf Wiederlesen
Detlef

Hallo und danke für die neuen Tipps.
Das mit dem JPG habe ich auch bereits überlegt.
Ein Freund von mir hat nun ein ähnliches Problem wie ich - bei ihm ist es nur eine Mauer als Hintergrund mit "aufgesprühten" Graffitis im Vordergrund. Dabei hat er auch diese Wahl zu treffen zwischen JPG und Div-Positionierung, sodass der Hintergrund zum wiederholten Html-Hintergrund passt oder die Nutzung von PNGs.
Gifs bieten sich hier aufgrund der begrenzten Möglichkeiten nicht an => Graffitis sind ja gesprüht und nicht in einer regelmäßigen Form.
Dementsprechend ist der Rand dann auch verschwommen und wird immer transparenter.
Dort war Gif doch leicht begrenzt in seinen Möglichkeiten - bei mir sollte es vielleicht je nach Foto sogar funktionieren.
Gehe ich hier nebenbei gefragt, richtig in der Annahme, dass CSS-Opacity kompatibler als PNG-Transparenz-Opacity ist?

Ich denke, ich werde das je nachdem durchmischen (mal gif, mal jpg - je nachdem ob Gifs gehen), ob es geht oder nicht geht.
Denn ein großes Hintergrundbild verbraucht locker mal 300 - 600 KB in JPG oder PNG.

Ich stelle mir allerdings noch eine Frage zu #alles.
Meint "nur den rechten Rand abdecken", dass man diesen Codeabschnitt #alles und *html #alles nicht mehrmals nutzen kann (mit jeweils anderen Namen)?