FrankS: Bilderladezeit

Hallo,

ich weiß leider nicht, ob dies das richtige Forum dafür ist, aber hat jemand vielleicht irgendwelche Tipps auf Lager, wie man die Ladezeiten von Bildern und Grafiken (ohne Qualitätsverlust!) beschleunigen kann? Ich komprimiere die zwar schon immer so gut es geht im Grafik-Programm, aber gelegentlich sehe ich Webseiten, die sehr große oder viele Grafiken verwenden und trotzdem äußerst schnell geladen sind... Ich habe zwar ein Skript um Bilder vorzuladen, aber da muß der User ja auch erst warten, bis dieser Vorgang abgeschlossen ist... Bin über jeden Hinweis dankbar.

Frank

  1. Was du ändern könntest:

    • Bildgröße
    • Dateiformat(jpg,oder gif)
    • Bilder ggf. als Miniaturansicht zeigen und erst beim anklicken vergrößern lassen!

    MfG Gerold

    1. Was du ändern könntest:

      • Bildgröße
      • Dateiformat(jpg,oder gif)

      das sind Sachen, die ich eh schon berücksichtige...

      • Bilder ggf. als Miniaturansicht zeigen und erst beim anklicken vergrößern lassen!

      mir geht es jetzt mehr um Bilder und Grafiken in einem festen Layout, also nicht die Seiteninhalte... ;-)

      1. Welche Größe haben die Bilder denn?? schick ggf. mal ein Link

        1. Hi!

          Es gibt noch ein Sprichwort:
          10 Bilder mit je 10 kB sind langsamer geladen als 1 Bild mit 100 kB.
          Das liegt daran, dass jedes Bild eine neue Verbindung benötigt...

          Also: Je mehr Bilder desto mehr Verbindungen!

          cu

          Marc Reichelt || http://www.marcreichelt.de/

          --
          Linux is like a wigwam - no windows, no gates and an Apache inside!
          SELFCode: ss:| zu:) ls:< fo:# de:> va:} ch:? sh:) n4:( rl:? br:^ js:( ie:% fl:( mo:)
          http://emmanuel.dammerer.at/selfcode.html
          1. Hi!

            Es gibt noch ein Sprichwort:
            10 Bilder mit je 10 kB sind langsamer geladen als 1 Bild mit 100 kB.
            Das liegt daran, dass jedes Bild eine neue Verbindung benötigt...

            Also: Je mehr Bilder desto mehr Verbindungen!

            cu

            Marc Reichelt || http://www.marcreichelt.de/

            Danke! Das ist schon mal ein guter Anhaltspunkt... habe bisher oft große Bilder "zerschnitten" und die so Teil für Teil laden lassen...

            1. Danke! Das ist schon mal ein guter Anhaltspunkt... habe bisher oft große Bilder "zerschnitten" und die so Teil für Teil laden lassen...

              Dürfte auch deshalb unvorteilhaft sein, weil sich eine große Datei besser komprimieren lässt als viele kleine.
              Gunnar

              --
              "Nobody wins unless everybody wins." (Bruce Springsteen)
  2. Hallo Frank,

    aber gelegentlich sehe ich Webseiten, die sehr große oder viele Grafiken verwenden und trotzdem äußerst schnell geladen sind...

    Die Ladezeit von Websites ist nicht nur von der Dateigröße abhängig, sondern von vielen Faktoren.
    Bist Du Dir sicher, daß Du Äpfel mit Äpfeln vergleichst?
    Gruß Fritz

    1. Hallo Fritz,

      Die Ladezeit von Websites ist nicht nur von der Dateigröße abhängig, sondern von vielen Faktoren.
      Bist Du Dir sicher, daß Du Äpfel mit Äpfeln vergleichst?

      ist mir schon klar, aber in meinem Fall geht es tatsächlich NUR um die Ladezeit der Grafiken / Bilder

      1. Hallo,

        ist mir schon klar, aber in meinem Fall geht es tatsächlich NUR um die Ladezeit der Grafiken / Bilder

        Dann laß mal ein Beispiel sehen: Deine *langsam ladenden Bilder* vs *die schnell ladenden*

        Gruß Fritz

  3. Hallo,

    Ich komprimiere die zwar schon immer so gut es geht im Grafik-Programm

    Um zu überprüfen, ob das gut genug ist, hilft vielleicht folgendes online-tool:
    http://www.netmechanic.com/accelerate.htm
    Gruß Fritz

    1. Hallo,

      Ich komprimiere die zwar schon immer so gut es geht im Grafik-Programm
      Um zu überprüfen, ob das gut genug ist, hilft vielleicht folgendes online-tool:
      http://www.netmechanic.com/accelerate.htm
      Gruß Fritz

      Danke, kenne so etwas in der Art aber schon von www.webmasterplan.de

  4. Hallo.
    Du könntest weiterhin:

    • die Farbtiefe verringern
    • für Muster kleinere Bilder verwenden
    • mehr mit CSS-Eigenschaften ("border", etc.) arbeiten
    • weniger grafische Buttons und überflüssige Bilder verwenden
    • mehr gleiche Bilder verwenden
    • Transparenzeigenschaften von GIF und PNG in Verbindung mit Hintergrundfarben nutzen
      ...
      MfG, at
  5. Hallo Frank,

    so blöd, wie sich das auch anhören mag: Bilder, die nicht geladen werden müssen, sind am schnellsten "geladen"! Um Dir zu erklären, was sich dahinter verbirgt, würde ich Dich bitten einen Link auf dieses Projekt anzugeben. Ich würde mir gerne die Header auslesen.

    Gruß aus Berlin!
    eddi

    --
    at, wie er leibt und lebt auf ein Posting
    > > Nein, ich denke nicht.
    gepromptet
    > Das empfiehlt sich aber.
    :))))
  6. Hallo Frank

    Dass das zerschnipseln (slicen) nicht das gelbe vom Ei ist hat man Dir ja schon gesagt. Allerdings kommt da ein psychologoischer Aspekt zum tragen: Der user sieht schon mal dass sich was tut, und die Zeit bis zur vollsändigen Anzeige der Grafik ist subjektiv kürzer, als wenn sich überhaupt nix tut und dann "plopp" steht endlich die volle Grafik da.

    Ähnliches, nur viel eleganter, kann man machen, mit JPGs die sich schrittweise aufbauen. Zuerst wird sehr schnell ein grobes Bild in voller grösse gezeigt, welches sich dann langsam immer mehr verfeinert. Diese Option heisst in den Grafikprogrammen dann "schrittweise Darstellung" oder "Progressive Darstellung" oder ähnlich. Auch die Anzahl der Stufen kann oft eingestellt werden.

    Schöne Grüsse, TeraVolt

    1. Hallo.

      Ähnliches, nur viel eleganter, kann man machen, mit JPGs die sich schrittweise aufbauen. Zuerst wird sehr schnell ein grobes Bild in voller grösse gezeigt, welches sich dann langsam immer mehr verfeinert. Diese Option heisst in den Grafikprogrammen dann "schrittweise Darstellung" oder "Progressive Darstellung" oder ähnlich. Auch die Anzahl der Stufen kann oft eingestellt werden.

      Es ging aber darum, die Datenmenge zu verringern; nicht darum, sie zu vergrößern.
      MfG, at

      1. Zuerst wird sehr schnell ein grobes Bild in voller grösse gezeigt, welches sich dann langsam immer mehr verfeinert.

        Es ging aber darum, die Datenmenge zu verringern; nicht darum, sie zu vergrößern.

        Wenn ich mich recht erinnere, wie die Kompression bei JPEG funktioniert, steckt die Möglichkeit der Anzeige eines groben Bildes nach Übertragung eines kleinen Teils der Datei (d.h. nach kurzer Zeit) in dem Format schon drin. Wieso sollte das die Datei vergrößern?

        Gunnar

        --
        "Nobody wins unless everybody wins." (Bruce Springsteen)
        1. Hallo.

          Wieso sollte das die Datei vergrößern?

          Dem Dialog, den ich mir ihr und ihren einschlägigen Erzeugern geführt habe, konnte ich lediglich das Ergebnis, nicht aber eine Erläuterung entnehmen.
          MfG, at

      2. Hi,

        Es ging aber darum, die Datenmenge zu verringern; nicht darum, sie zu vergrößern.

        Ich weiß nicht, was Du für Bilder hast, aber wenn ich ein JPG speichere, wird die "progressive"-Version bei ansonsten gleichen Parametern um ein paar KB kleiner als die nicht-"progressive"-Variante.

        Was sich aber auf jeden Fall empfiehlt: EXIF- und ähnliche Zusatz-Informationen aus der Bild-Datei entfernen.

        Statt .gif lohnt es sich auch meist, png (indiziert, mit Palette so klein wie möglich) zu verwenden - nur bei sehr kleinen Bildern ist (bei mir) gif kleiner als png.

        cu,
        Andreas

        --
        MudGuard? Siehe http://www.Mud-Guard.de/
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hallo.

          Ich weiß nicht, was Du für Bilder hast, aber wenn ich ein JPG speichere, wird die "progressive"-Version bei ansonsten gleichen Parametern um ein paar KB kleiner als die nicht-"progressive"-Variante.

          Dies scheint sich bei bestimmten Paramtern umzukehren. Aber frage mich bitte nicht, bei welchen genau.

          Statt .gif lohnt es sich auch meist, png (indiziert, mit Palette so klein wie möglich) zu verwenden - nur bei sehr kleinen Bildern ist (bei mir) gif kleiner als png.

          Die Größe könnte auch bei oben genanntem Verhalten eine Rolle spielen.
          MfG, at

      3. Hallo at.

        Es ging aber darum, die Datenmenge zu verringern; nicht darum, sie zu vergrößern.

        Kann jetzt nur was zu meinen Grafikprogrammen sagen:

        GIMP: bei "Progressiv speichern" ist die Dateigrösse sogar etwas kleiner
        PP9: bei "Schrittweiser Darstellung" verändert sich die Dateigrösse nicht.

        Kann mir nicht vorstellen dass es bei anderen Grafikprogrammen gravierend anders sein soll. Oder hab ich dich jetzt flasch verstanden?

        Schöne Grüsse, TeraVolt

        1. Hallo.

          Kann mir nicht vorstellen dass es bei anderen Grafikprogrammen gravierend anders sein soll.

          Manchmal ist es eben erforderlich, seine Vorstellungskraft der Realität unterzuordnen.

          Oder hab ich dich jetzt flasch verstanden?

          Das weiß ich nicht.
          MfG, at

      4. Hi at,

        Es ging aber darum, die Datenmenge zu verringern; nicht darum, sie zu vergrößern.

        Tatsächlich erzeugen alle mir bekannten Grafikprogramme bei schrittweisem Aufbau kleinere Dateien. Mich würde interessieren, woran das liegt. Wird da die Kompression erhöht?

        Viele Grüße
        Mathias Bigge

        1. Hallo Mathias

          Tatsächlich erzeugen alle mir bekannten Grafikprogramme bei schrittweisem Aufbau kleinere Dateien. Mich würde interessieren, woran das liegt. Wird da die Kompression erhöht?

          In einigen Grafikprogrammen gibt es die Auswahl "Optimiert". Bei dieser
          Einstellung verringert sich die Dateigröße etwas, bei sonst identischen
          Einstellungen.
          Das Interessante daran ist, dass die Dateigröße keine nennenswerte Änderung
          erfährt, wenn zusätzlich "Progressiv" gewählt wird.
          Ich gehe davon aus, dass bei Auswahl "Pogressiv" immer auch "Optimiert"
          gespeichert wird.

          Auf Wiederlesen
          Detlef

          --
          - Wissen ist gut
          - Können ist besser
          - aber das Beste und Interessanteste ist der Weg dahin!
          1. Hi,

            Ich gehe davon aus, dass bei Auswahl "Pogressiv" immer auch "Optimiert"
            gespeichert wird.

            bei PSP 8 zumndest ist die Optimierung nicht an progressiv gekoppelt und kann hier zusätzlich eingestellt werden. In jedem Fall hatte sich dadurch die Dateigröße etwas verringert.

            freundliche Grüße
            Ingo

        2. Hallo.

          Tatsächlich erzeugen alle mir bekannten Grafikprogramme bei schrittweisem Aufbau kleinere Dateien.

          Ich habe es gerade noch einmal ausprobiert und kann dein Ergebnis nicht bestätigen.
          MfG, at

          1. Hi,

            Tatsächlich erzeugen alle mir bekannten Grafikprogramme bei schrittweisem Aufbau kleinere Dateien.
            Ich habe es gerade noch einmal ausprobiert und kann dein Ergebnis nicht bestätigen.

            Kannst Du das Bild, mit dem Du es probiert hast, mal in einem verlustfreien Format (z.B. PNG oder TIFF) zur Verfügung stellen?

            cu,
            Andreas

            --
            MudGuard? Siehe http://www.Mud-Guard.de/
            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            1. Hi MudGuard,

              Tatsächlich erzeugen alle mir bekannten Grafikprogramme bei schrittweisem Aufbau kleinere Dateien.
              Ich habe es gerade noch einmal ausprobiert und kann dein Ergebnis nicht bestätigen.
              Kannst Du das Bild, mit dem Du es probiert hast, mal in einem verlustfreien Format (z.B. PNG oder TIFF) zur Verfügung stellen?

              Und vielleicht Grafikprogramm und Einstellungen nennen.

              Viele Grüße
              Mathias Bigge

              1. Hallo.

                Kannst Du das Bild, mit dem Du es probiert hast, mal in einem verlustfreien Format (z.B. PNG oder TIFF) zur Verfügung stellen?
                Und vielleicht Grafikprogramm und Einstellungen nennen.

                Eine kleine Übersicht findet ihr unter http://test.do-q-ment.de/jpeg-test/.
                MfG, at

                1. Hi,

                  Eine kleine Übersicht findet ihr unter http://test.do-q-ment.de/jpeg-test/.

                  woran man erkennen kann, daß offensichtlich sehr kleine Bilder bei progressiver JPEG-Komprimierung mehr Daten benötigen, größere Bilder aber deutlich weniger. Vielleicht benötigt die progressive Komprimierung mehrere (für jede Stufe) Headerdaten, was sich erst bei größeren Bildern rechnet.

                  freundliche Grüße
                  Ingo

                  1. Hi Ingo,

                    Eine kleine Übersicht findet ihr unter http://test.do-q-ment.de/jpeg-test/.
                    woran man erkennen kann, daß offensichtlich sehr kleine Bilder bei progressiver JPEG-Komprimierung mehr Daten benötigen, größere Bilder aber deutlich weniger. Vielleicht benötigt die progressive Komprimierung mehrere (für jede Stufe) Headerdaten, was sich erst bei größeren Bildern rechnet.

                    Laut dem, was ich im Netz gefunden habe, sollte der Umfang der Bildinformationen bei progressive und standard exakt gleich und mit entsprechender Software verlustfrei ineinander überführt werden können. Hinzu kämen eventuelle Headerinformationen. Anscheinend nimmt etwa Photoshop das Anklicken der Option "mehrere Durchgänge" zum Anlass, bei ansonsten gleichen Parametern stärker zu komprimieren. Aber richtig überzeugt bin ich davon nicht, die Informationen, die ich gefunden habe, waren einfach zu unscharf.

                    Viele Grüße
                    Mathias Bigge

  7. Hi,

    Ich habe zwar ein Skript um Bilder vorzuladen, aber da muß der User ja auch erst warten, bis dieser Vorgang abgeschlossen ist...

    Sicher. Das interessiert ihn nur ggf. nicht, wenn das Nachladen "im Hintergrund" funktioniert. D.h., solange der Surfer auf der inhaltlich vollständig geladenen Seite den Text liest oder die Grafik anschaut. Ggf. also die Daten erst mit onLoad cachen ...

    Aber z.B. bei ständig wechselnden Grafiken lade ich nur das erste Bild vor. Auf der Seite, wo dieses Bild verwendet wird, ist das gecachte Bild (i.d.R.) sofort da, während die Seite in "Wirklichkeit" bereits das potentiell nächste Bild lädt ...

    Gruß, Cybaer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
  8. Hi FrankS,

    Tipps, wie man die Ladezeiten von Bildern und Grafiken (ohne Qualitätsverlust!) beschleunigen kann?

    Meinst Du mit gleicher Größe und verschiedenen Ladezeiten die Größe in KB? Dann hat das mit dem Server zu tun, nichts mit den Bildern.

    Wenn Du die Größe in Pixeln meinst, dann spielt das Motiv eine Rolle. Bei unruhigen, detailreichen Bildern greift die jpeg-Komprimierung deutlich schlechter als bei klar gestalteten Motiven mit größeren, weitgehend monochromen Flächen.

    Viele Grüße
    Mathias Bigge

    1. Bei unruhigen, detailreichen Bildern greift die jpeg-Komprimierung deutlich schlechter als bei klar gestalteten Motiven mit größeren, weitgehend monochromen Flächen.

      Wobei für letztere GIF oder PNG weitaus besser ist als JPEG (wenn du mit "klar gestaltete Motive" Comics o.ä. meinst).

      Gunnar

      --
      "Nobody wins unless everybody wins." (Bruce Springsteen)
      1. Hi Gunnar,

        Bei unruhigen, detailreichen Bildern greift die jpeg-Komprimierung deutlich schlechter als bei klar gestalteten Motiven mit größeren, weitgehend monochromen Flächen.
        Wobei für letztere GIF oder PNG weitaus besser ist als JPEG (wenn du mit "klar gestaltete Motive" Comics o.ä. meinst).

        Nein, ich dachte schon an normale Photos und jpg. Auch hier machen sich bei geeigneter Motivauswahl deutliche Unterschiede bemerkbar.

        Viele Grüße
        Mathias Bigge