Bilder verlangsamen Webseite

  • 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

  • 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.

  • 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?