Wieviel kb ist für eine Website zuviel?

[Corsachriz]

Hallo zusammen,

Normalerweise sind meine Websites nicht sehr aufwändig gestaltet. Nun sollte ich aber eine Website für einen DJ entwerfen, wo ich mich schön austoben konnte.

Leider bringt dies natürlich auch den Nachteil der vielen Grafiken mit sich.

Ich habe überall schon komprimiert und auch meiner Meinung gut gesliced aber ich schaffe es nicht auf der Startseite unter 400kb zu kommen. (Die weiteren Unterseiten haben dann ca. 90kb).

Ich weiß, dass die Zielgruppe zu 99,9% DSL hat aber natürlich versuche ich eine gute Ausgewogenheit zu finden.

Ist vielleicht eine allgemeine Frage aber sind 400kb für die Startseite selbst für DSL Nutzer schon zuviel ?

Liebe Grüße,
Chriz

[threadi]

Das ist durchaus eine beachtliche Menge. Ich gehe immer noch nach dem Gedanken aus Modem-Zeiten vor: 50kb +/- 10kb (für HTML, CSS, JavaScript und alle Mediadateien sind das optimale).

Daher würde ich an deiner Stelle vielleicht den grundsätzlichen Aufbau überdenken. Große Grafiken entstehen z.B. wenn man ein Hintergrundbild verwenden möchte. Meist kann man dieses aber so zurecht schneiden, dass es nur 1 bis 10 Pixel hoch oder breit ist und wiederholt werden kann.

Zudem solltest Du Bilder immer in der Größe erstellen in der sie auch verwendet werden. Ein großes Bild per CSS auf eine Breite oder Höhe zu zwingen spart zwar Platz auf dem Bildschirm, aber nicht beim Speicherplatz.

[Stefan]

Als ehemaliger ISDN Nutzer würde ich sagen, dass diese Größe okay ist. DSL ist nunmal Standard - das ist wie auf den IE6 optimieren; machen die meisten ja auch nicht mehr. Solange die großen Elemente wie Hintergrundbilder oder ähnliches zum Schluß laden und der Main-Content fix angezeigt wird, passt das schon.

Die Seite wird ja eh nur eine niedrige Besucherquote erreichen und muss nicht Massentauglich sein ...

Gruß Stefan

[the0bone]

Ich kann mir nicht vorstellen, dass da nicht mehr geht!
Und wenn es wirklich sein muss, dann biete doch unterschiedliche Grafiken an. Erst Low Grafiken laden und wenn der Content ersichtlich ist, die High Res Grafiken nachladen.

Aber ich zweifel immernoch, dass du a) die Grafiken in der Menge brauchst und b) diese nicht ohne sichtbare Mängel verkleinern kannst.
Hast nen Link?

[Libertiner]

Hm, slicen muß man da doch heute eigentlich gar nicht mehr um eine Webseite zu erstellen, Stichwort CSS. Könnte mir vorstellen, dass du die technischen Möglichkeiten für die Umsetzung nicht optimal nutzt, bzw. ausreizt. 400 KB sind schon ne Menge, am besten verlinkst du dein Design mal hier.. dann kann man mehr sagen.

[Corsachriz]

Im Endeffekt weiss ich dass es an der Hintergrundgrafik liegt, die mal locker mit 80kb zu Buche schlägt und immer noch hässlich ist weil ich die Qualität so runterschrauben musste.

Hier mal ein Link zum original Bild und dann der Vergleich zur zerteilten HTML Version.

Original

HTML Version

Es ist mir einfach zu verwaschen, vielleicht bin ich aber auch einfach nur pingelig...

Bei der Version bin ich laut Pingdom bei 240kb ohne Inhalt.

Gruß,
Chriz

[the0bone]

Da hatte Libertiner und ich ja dann wohl recht!
Das ist ja keine Webseite, die Webdesigned wurde!
Das ist ein Photoshopbild, dass in den Hintergrund gelegt wurde und dann Text drüber geschrieben wurde!

Du hast ja nicht mal einen slice drin... *kopfschüttel*

Ok, starting from scratch...

Such dir einen Bereich (deine Mauer), den du Kacheln kannst. Die Kachel sollte so klein wie möglich sein. <10k
Das legst du in den Hintergrund deiner Seite und lässt es kacheln :-D

Den Header (Finder am Fader und Stacheldraht und alles) stellst du als PNG frei. Alternativ als GIF. ist das Grösste mit ca. 30k
Dieses packst du in den Hintergrund eines DIVs.

Die Metallschilder für deine Navi stellst du auch frei. Und zwar nur einmal!!! Und das gibst du dem li als Background. Grösse... 5k?

Das Follow ne stellst du auch alles einzeln frei. Damit kommst du nicht von den 10k weg, aber du hast einzelne Schaltflächen.

Die ganze Seite wird sauber Webdesigned nur rund 120k ausmachen.

[Corsachriz]

Da hatte Libertiner und ich ja dann wohl recht!
Das ist ja keine Webseite, die Webdesigned wurde!
Das ist ein Photoshopbild, dass in den Hintergrund gelegt wurde und dann Text drüber geschrieben wurde!

Du hast ja nicht mal einen slice drin... *kopfschüttel*

Verstehe ich nicht, habe das Bild in 3 Bereiche Unterteilt, Logo, Hintergrundbild oben Rechts und dann die gekachelte Wand.

Such dir einen Bereich (deine Mauer), den du Kacheln kannst. Die Kachel sollte so klein wie möglich sein. <10k
Das legst du in den Hintergrund deiner Seite und lässt es kacheln :-D

Bei so klein wie möglich habe ich ja dann wieder eine komplett andere Wand, genau das wollte ich nicht.

Den Header (Finder am Fder und Stacheldraht und alles) stellst du als PNG frei. Alternativ als GIF. ist das Grösste mit ca. 30k
Dieses packst du in den Hintergrund eines DIVs.

Klingt gut.

Die Metallschilder für deine Navi stellst du auch frei. Und zwar nur einmal!!! Und das gibst du dem li als Background. Grösse... 5k?

Habe ich doch so gemacht ?

Das Follow ne stellst du auch alles einzeln frei. Damit kommst du nicht von den 10k weg, aber du hast einzelne Schaltflächen.

Okay, da war ich eh noch dran, es geht halt hauptsächlich um den Hintergrund


Hab das Gefühl du hast die CSS und Queltext nicht richtig angeguckt.

[the0bone]

Hab das Gefühl du hast die CSS und Queltext nicht richtig angeguckt.

Ich auch grade... habe in meinem Prüftool mir "nur Hintergründe" anzeigen lassen... und da blieb es eines... oups... *rüfl mich selbst"

Nichts desto trotz :-)
http://www.pro-websites.de/kunden/jb/images/bg-all.jpg
ist massiv zu gross. wirklich nur das graue Kacheln und den Farbverlauf über ein weiteres png/ gif oder CSS3 machen lassen.
Das kann bestimmt so auf 30x30px geschoben werden.

http://www.pro-websites.de/kunden/jb...s/bg_mixes.jpg
Hier die Mauer ganz weg! Ist doch schon bei dir durch die Kacheln gegeben. Dort transparent machen und fertig.

http://www.pro-websites.de/kunden/jb/images/logo.jpg
Nur das Logo freistellen. Stacheldraht muss gesamt auf einer anderen Ebene stehen.

http://www.pro-websites.de/kunden/jb/images/navi.gif
Hast recht... war mein Kaffee wichtiger als der richtige Blick *träum*

So, besser? Jetzt bin ich wach

[maxi89]

Hast du die Grafiken denn progressiv abgespeichert? Dann kannst du die ruhig etwas größer machen, weil sie während dem Laden bereits (pixelig) angezeigt werden und dann nach und nach die volle Qualität erreichen.

So habe ich eine Seite entworfen, die beim ersten Laden etwa 340 KB gewogen hat, aber trotzdem schon nach 2 sec bei UMTS-Geschwindigkeit recht vernünftig dargestellt wurde.
Vielleicht nicht für alle Grafiken (die werden im progressiven Modus ein wenig größer), aber bei Hintergrundbildern oder großen Headern/Logos lohnt sich sowas immer.

@Stefan: So habe ich auch argumentiert. Das Gegenargument: "Ja, aber nun nutzen die Leute immer stärker UMTS, was bei nicht ganz optimalen Empfang auch langsam ist" hat mich aber wieder etwas zurückrudern lassen.
Gerade weil die Leute alles wieder auf dem Handy oder am Netbook mit UMTS-Stick sehen wollen, muss man wieder auf die Datenmenge achten.

[Zer0]

Gerade weil die Leute alles wieder auf dem Handy oder am Netbook mit UMTS-Stick sehen wollen, muss man wieder auf die Datenmenge achten.

Vor allem, wenn dann von dem Anbieter eine SMS kommt wie:

Sie haben ihr Download-Limit erreicht. Ihre Verbindung ist fortan langsamer als gewohnt