Bilder verlangsamen Webseite

[atisor]

Hallo,

Ich erstelle gerade eine Webseite, in der vor allem Gif-Animationen vorkommen. Jetzt stelle ich fest, dass die Seite von einem Tag auf den anderen sehr langsam geworden ist.

www.bms-home.de/development

Ich nehme an, dass zu viele Bilder eingebunden sind. Kann es noch andere Gründe geben?

Die einzelnen Gif-Animationen sind aber selber gar nicht so gross. Deshalb verstehe ich das Problem eigentlich nicht.

Vielleicht könnte mir jemand ein paar Hintergründe zu diesem Thema zukommen lassen, da ich Anfänger bin und im Netz dazu auch nichts gescheites finde.

Vielen Dank
atisor

[SonKite]

Deine Animation hat knapp 400kb, das ist eine ganze Menge und muss erstmal geladen werden. Da würde ich auf jeden Fall noch was machen, denn 400kb sind zu viel.

[rewboss]

Schon mal aufgefallen, dass moderne Rechner zwar mehr MHz haben, aber immer noch so langsam sind wie früher? Weil Software-Hersteller meinen, sie dürfen die vielen MHz ausnutzen, und Anwendungen werden immer komplexer.

So auch mit Bandbreite. Man freut sich darauf, dass man eine schnellere Leitung hat, aber Web-Designer machen eine Strich durch die Rechnung indem sie meinen, die große Bandbreite voll ausnutzen zu müssen. So wird für Otto Normalverbraucher "das Internet" nicht schneller, sondern er muss immer schnellere Verbindungen haben, damit "das Internet" nicht langsamer wird.

400kB ist riesig für eine Grafik. Wie in früheren Zeiten gilt noch: Optimieren, optimieren, optimieren, und zwar möglichst auf 100kB oder weniger für die ganze Seite. 40kB wenn's geht.

Bei der Grafik hast du mit Ani-GIF aus zwei Gründen die falsche Wahl getroffen:

1. Überhaupt eine Animation zu haben. Animationen lenken vom eigentlichen Inhalt ab und sind deswegen auf professionell gestaltete Websites heute kaum noch anzutreffen.

2. Fotos lassen sich als GIF-Bilder sehr schlecht, bzw. überhaupt nicht optimieren. GIF arbeitet am Besten mit großen Farbflächen (etwa wie bei meinem Avatar); mit Farbverläufen oder Schattierungen, wie in Fotos meistens der Fall, kommt GIF überhaupt nicht zurecht. Darüber hinaus kann ein GIF maximal 256 Farben enthalten; ein Foto dagegen beinhaltet Tausende oder sogar Millionen verschiedene Farben. Konvertiert man eine JPEG-Grafik in eine GIF-Grafik, muss die Anzahl der Farben drastisch reduziert werden. Da hat man zwei Möglichkeiten: entweder mit "Banding" oder, wie du es geschafft hast, mit "Dithering". Beides ist hässlich, und Dithering lässt sich noch schwieriger optimieren als Banding.

Wenn der Kunde auf eine Animation besteht, würde ich es mit JavaScript und JPEG-Bilder lösen. Das JavaScript kann warten, bis sich der Inhalt der Website heruntergeladen hat, lädt anschließend dann die einzelne Bilder für die Animation und zeigt sie dann eins nach dem anderen.

[atisor]

Vielen Dank, ich werde sie auf jeden Fall verschlanken.

[atisor]

Vielen Dank rewboss für Deine Aufführungen. Es ist tatsächlich so, dass der Auftraggeber auf Animationen besteht. Ich würde jetzt Deinem Vorschlag folgen und Javascript einsetzen. Was mache ich denn, wenn jemand Javascript abschaltet?

[rewboss]

Zitat von atisor

Was mache ich denn, wenn jemand Javascript abschaltet?

Kommt eher selten vor. Solange das JavaScript nicht für etwas Wichtiges verwendet wird (etwa für die Navigation oder das Anzeigen wichtigen Inhalts), sehe ich da kein Problem. Hier geht es aber nur um eine Spielerei am Rande: Ohne JavaScript sieht man halt ein Standbild.

[designfanatiker]

Zitat von rewboss

400kB ist riesig für eine Grafik.

Bei mir dauert es etwas über eine Minute bis das Ding geladen ist.

[atisor]

Vielen Dank für Euer Feedback, ich werde auf jeden Fall etwas daran ändern.