Mike: Grosse Grafiken - "zerhacken" oder ganz lassen?

Hallo,

ich habe in meiner Seite oben einen ca. 70 Pixel hohen Bereich, der sozusagen als "Banner" gedacht ist... dort sind Logo untergebracht, und sowas...

Macht es Sinn, diesen 70 Pixel hohen (und wohl ca. 700 Pixel breiten) Bereich in kleinere Grafikstücke zu zerhacken oder sollte das als komplette Grafik geladen werden?

Früher, bei den Table-Layouts, ging es ja kaum anders... aber wie sieht's heute aus, wo das mit CSS positioniert wird?

  1. Hi,

    Macht es Sinn, diesen 70 Pixel hohen (und wohl ca. 700 Pixel breiten) Bereich in kleinere Grafikstücke zu zerhacken oder sollte das als komplette Grafik geladen werden?

    als eine einzelne Grafik macht es weniger Arbeit und läßt sich besser komprimieren. Vorteile eins Zerhackens wüßte ich nicht, insofern gibt's meiner Meinung nach keinen Grund dafür.

    Gruß,
    _Dirk

  2. Hallo,

    Macht es Sinn, diesen 70 Pixel hohen (und wohl ca. 700 Pixel breiten) Bereich in kleinere
    Grafikstücke zu zerhacken oder sollte das als komplette Grafik geladen werden?

    Nein, das ist grober Unfug. Das verursacht nur einen erheblichen Mehrtraffic. Benutze lieber
    progressive JPGs oder so, halt Bildformate, die in mehreren Durchgaengen geladen werden
    koennen.

    Früher, bei den Table-Layouts, ging es ja kaum anders...

    Klar ging das auch da anders.

    Gruesse,
     CK

    1. Früher, bei den Table-Layouts, ging es ja kaum anders...

      Klar ging das auch da anders.

      Danke. Naja und warum zerhacken (immernoch!) so viele Seiten ihre Grafiken? Wenn's keinen Sinn hat, wer kam dann überhaupt auf die Idee?!

      1. Hi,

        ...
        weil sie nicht wollen, dass die Grafik mit einem Klick geklaut werden kann (abgespeichert). Die wollen, das die leute wiederkommen, um die schönen Nacktfotos zu sehen *gg*

        Gruß

        Tom

      2. Hallo,

        Danke. Naja und warum zerhacken (immernoch!) so viele Seiten ihre Grafiken?

        Die Seiten ihre Grafiker? ;))
        Keine Ahnung -- Unwissenheit?

        Wenn's keinen Sinn hat, wer kam dann überhaupt auf die Idee?!

        Oh, es hat damals schon durchaus Sinn gemacht. Frueher unterstuetzten viele Browser das
        In-Mehreren-Durchgaengen-Laden noch nicht. Und dann hat man einfach, um den User zu beruhigen,
        die Bilder in kleine Broeckchen unterteilt -- es sieht schneller aus (es sieht aber wirklich
        nur so aus. Tatsaechlich ist es langsamer. Es bleibt dem Leser ueberlassen, das mal
        nachzurechnen :).

        Gruesse,
         CK

        1. Hi Ck,

          Danke. Naja und warum zerhacken (immernoch!) so viele Seiten ihre Grafiken?

          Die Seiten ihre Grafiker? ;))

          Yeah, Grafikereintopf. Gibt's den nicht immer auch Mittwochs auf dem Wochenmarkt? ;-)

          Gruß,
          _Dirk

          1. Hallihallo Schuer,

            Yeah, Grafikereintopf. Gibt's den nicht immer auch Mittwochs auf dem Wochenmarkt? ;-)

            Ich dachte, den gibts nur Freitags? Auf dem kleinen Markt? Was ess ich denn sonst immer da?

            Gruesse,
             CK

            1. Hi Ck,

              Ich dachte, den gibts nur Freitags? Auf dem kleinen Markt? Was ess ich denn sonst immer da?

              Ich krieg das schon nichtmehr auf die Reihe: Freitags ist Biomarkt, oder? Da gibt's dann Grafikerkringel mit Bratkartoffeln. Und mittwochs ist der große Markt, da gibt's Erbsensuppe mit Grafikereinlage.

              Ich sollte wirklich mal wieder zum Essen kommen :-)

              Gruß,
              _Dirk

              P.S. : Hast Du Urlaub, oder warum bist Du so spät nachts noch wach?

              1. Hallo Schuer,

                Ich dachte, den gibts nur Freitags? Auf dem kleinen Markt? Was ess ich denn sonst immer
                da?

                Ich krieg das schon nichtmehr auf die Reihe: Freitags ist Biomarkt, oder?

                Jor, obwohl wir letztens beim Regierungs-Praesidenten waren ;)

                Da gibt's dann Grafikerkringel mit Bratkartoffeln.

                Oder Kartoffelsalat (der ueberigens wirklich ganz vorzueglich schmeckt). Dafuer darf man sich
                das dumme Gelaber von dem Typen anhoeren *g*

                Und mittwochs ist der große Markt, da gibt's Erbsensuppe mit Grafikereinlage.

                Ah. Mittwochs war ich noch nie auf dem Markt.

                Ich sollte wirklich mal wieder zum Essen kommen :-)

                Jor, gute Idee, mach mal.

                P.S. : Hast Du Urlaub, oder warum bist Du so spät nachts noch wach?

                Ganz im Gegenteil. Ich arbeite.

                Gruesse,
                 CK

      3. Hallo,

        Danke. Naja und warum zerhacken (immernoch!) so viele Seiten ihre
        Grafiken? Wenn's keinen Sinn hat, wer kam dann überhaupt auf die
        Idee?!

        Oh, aber natürlich kann es Sinn machen. Sehr viel sogar, und ich zerhacke öfters Grafiken. Nämlich dann, wenn innerhalb der Grafik Text zu sehen ist. Bei jpg-Kompremiereung zerfastert die sonst. Also "schneide" ich den texteil der Grafik raus und verwende dafür Gif. Darumherum kommen dann die jpg-Teile der gesamten Grafik. Die unterseiten von http://www.netz-sylt.de (oben die Menübalken) ist eine zerhackte Grafik. (Und ja, die Seiten sind auch so schon recht fett - der Kunde ist zufrieden ,-))

        Chräcker

        http://www.Stempelgeheimnis.de

        1. Hi Chräcker,

          Danke. Naja und warum zerhacken (immernoch!) so viele Seiten ihre
          Grafiken? Wenn's keinen Sinn hat, wer kam dann überhaupt auf die
          Idee?!
          Oh, aber natürlich kann es Sinn machen. Sehr viel
          sogar, und ich zerhacke öfters Grafiken.
          Nämlich dann, wenn innerhalb der Grafik Text zu
          sehen ist. Bei jpg-Kompremiereung zerfastert die
          sonst. Also "schneide" ich den texteil der Grafik
          raus und verwende dafür Gif.

          ich verallgemeinere Deine Aussage mal ein bißchen:

          Wenn ein Bild 'eigentlich' aus mehreren 'Bildern' be-
          steht, für welche unterschiedliche Graphikformate je-
          weils am besten geeignet sind, dann macht es in be-
          stimmten Fällen mehr Sinn, 'das Bild' auf mehrere
          Dateien zu verteilen und diese separat zu laden, als
          alles in ein Bild hinein zu quetschen.

          Ein Bild nur in mehrere _gleichartige_ Bilder zu zer-
          teilen würde erstens mehr HTTP-Overhead und zweitens
          eine schlechtere Komprimierungsrate bei verlustfreier
          Komprimierung (GIF/PNG) bedeuten, wie Schuer und
          Christian bereits erwähnt haben.

          Zudem finde ich den Bildaufbau in Form eines 'Flecken-
          teppichs' nicht annähernd so schön wie die Möglichheit,
          erst mal ein Bild in einer geringen Auflösung zu 'skiz-
          zieren' und dieses dann erst in die volle 'Qualitäts-version' verfeinern zu lassen - dann habe ich viel
          früher einen Gesamteindruck dessen, was es am Ende
          werden soll, als bei der Verwendung einzelner Dateien.

          Alle bekannten Bilddatenformate im WWW erlauben dies.
          Bei GIF nennt es sich "interlaced":
          http://selfhtml.teamone.de/grafik/formate.htm#gif

          Für JPGs ist mit "Progressive JPGs" etwa dasselbe möglich:
          http://selfhtml.teamone.de/grafik/formate.htm#jpeg

          Bei PNG ist derselbe Effekt noch viel effektiver
          einsetzbar (schon mit wenigen Prozent % der über-
          tragenen Daten ist das Bild ansatzweise darstellbar):
          http://selfhtml.teamone.de/grafik/formate.htm#png

          Es gibt also im Normalfall keinen Grund, ein Bild zu
          zerlegen - die Wahl des richtigen Bildformats ist in
          den meisten Fällen viel wichtiger für die subjektive
          Darstellung auf dem Bildschirm des Client.

          Viele Grüße
                Michael

          1. Hallo, Michael,

            Oh, aber natürlich kann es Sinn machen. Sehr viel
            sogar, und ich zerhacke öfters Grafiken.
            Nämlich dann, wenn innerhalb der Grafik Text zu
            sehen ist. Bei jpg-Kompremiereung zerfastert die
            sonst. Also "schneide" ich den texteil der Grafik
            raus und verwende dafür Gif.

            ich verallgemeinere Deine Aussage mal ein bißchen:

            Wenn ein Bild 'eigentlich' aus mehreren 'Bildern' be-
            steht, für welche unterschiedliche Graphikformate je-
            weils am besten geeignet sind, dann macht es in be-
            stimmten Fällen mehr Sinn, 'das Bild' auf mehrere
            Dateien zu verteilen und diese separat zu laden, als
            alles in ein Bild hinein zu quetschen.

            Ja, ich denke auch, dass Chräcker dies meinte, aber was hat obiger Absatz...

            Ein Bild nur in mehrere _gleichartige_ Bilder zu zer-
            teilen würde erstens mehr HTTP-Overhead und zweitens
            eine schlechtere Komprimierungsrate bei verlustfreier
            Komprimierung (GIF/PNG) bedeuten, wie Schuer und
            Christian bereits erwähnt haben.

            ...mit diesem zu tun? Dass es sinnlos ist, ein Bild in mehrere *gleichartige* Bilder zu zerhacken, wurde doch bereits gesagt.

            Zudem finde ich den Bildaufbau in Form eines 'Flecken-
            teppichs' nicht annähernd so schön wie die Möglichheit,
            erst mal ein Bild in einer geringen Auflösung zu 'skiz-
            zieren' und dieses dann erst in die volle 'Qualitäts-version' verfeinern zu lassen - dann habe ich viel
            früher einen Gesamteindruck dessen, was es am Ende
            werden soll, als bei der Verwendung einzelner Dateien.

            Wolltest du damit jetzt Chräcker widersprechen?

            Alle bekannten Bilddatenformate im WWW erlauben dies.

            (...)

            Bei PNG ist derselbe Effekt noch viel effektiver
            einsetzbar (schon mit wenigen Prozent % der über-
            tragenen Daten ist das Bild ansatzweise darstellbar):
            http://selfhtml.teamone.de/grafik/formate.htm#png

            Das Bild wird dabei aber insgesamt größer AFAIK. Der Effekt ist es mir persönlich nicht Wert.

            Es gibt also im Normalfall keinen Grund, ein Bild zu
            zerlegen - die Wahl des richtigen Bildformats ist in
            den meisten Fällen viel wichtiger für die subjektive
            Darstellung auf dem Bildschirm des Client.

            Chräcker hat doch dargelegt, dass die Qualität bspw. bei der ausschließlichen Verwendung von JPEG für das komplette Bild inklusive Text zu schlecht wäre, wenn man von einer sparsamen (also starken) Komprimierung ausgeht. Bei der ausschließlichen Verwendung von PNG hätte man eine ubertrieben gute Qualität für den großen unwichtigen des Bildes, wodurch die Bilddateigröße unnötig hoch wäre.

            ...subjektive Darstellung? Weißt du wie hässlich die Kompressionsartefakte werden, wenn man ein großes Bild entsprechend komprimieren möchte? (Ich denke schon. ;))

            Ob der HTTP-Overhead im Endeffekt nicht größer ist als die durch die Qualitäts- und Kompressionsunterschiede der Einzelgrafiken eingesparte Datenmenge, ist die entscheidende Frage. Ob es sich rechnet, sollte man im Einzelfall prüfen. Bei sich überlappenden Grafiken (bspw. PNG mit hoher Bildqualität auf einem stark komprimierten JPEG-Hintergrund) ist der Gewinn sicherlich sehr hoch. In dem Falle könnte man übrigens die Hintergrundgrafik mit CSS einbinden und somit den im Vordergrund stehenden PNG-Grafiken einen Sinn (etwas aussagekräftigeres als alt="") geben, damit spart man sich die Tabelle, welche mindestens vier Grafiken um eine die Linkgrafik positioniert.

            Grüße,
            Mathias

          2. Hallo,

            spannende Sprachfrage" (nicht Computersprache, menschensprache;-))))

            Wenn ein Bild 'eigentlich' aus mehreren 'Bildern' be-
            steht, für welche unterschiedliche Graphikformate je-
            weils am besten geeignet sind, dann macht es in be-
            stimmten Fällen mehr Sinn, 'das Bild' auf mehrere
            Dateien zu verteilen und diese separat zu laden, als
            alles in ein Bild hinein zu quetschen.

            Das Bild des von mir angegebene Menübalken (das Meer mit den Menütexten drauf) ist *ein* Bild. Auch wenn mehrere (Ab)speicherformate für einzelne Teile benutzt werden. Es bleibt erst einmal ein bild, mit dem ich "quasie in der Hand haltend" mich vor dem Computer gesetzt habe und überlegt habe, wie ich es am besten speichere. Sprachlich habe ich also ein bild, daß ich über mehrere dateien hinweg speichere, also nicht in eine datei, sondern in 5 oder 6.... (ob das nun gut ist, ist eine andere Frage....): Es bleibt ein Bild. Wenn ich einen brief über 3 vertschiedene Formate hinweg abspeichere, selbst in 3 verschiedenen Ordner, einmal word, dann eine Exel-tabelle und dann eine Grafik, diese drei Dokumente dann ausdrucke und sie haben einen Zusammenhang und sind nur als solches wirklich zu verstehen.... und ich diese drei seiten dann zusammenhefte und eintüte, habe ich einen(!) Brief. Ich habe diesen Brief nicht in drei Briefe gesplittet und erst bei der Eintütung wurden es wieder einer. Ich habe ihn nur über drei dateien hinweg abgespeichert. (Und Datei ist nicht gleich Brief/Bild)

            Zudem finde ich den Bildaufbau in Form eines 'Flecken-
            teppichs' nicht annähernd so schön wie die Möglichheit,
            erst mal ein Bild in einer geringen Auflösung zu 'skiz-
            zieren' und dieses dann erst in die volle 'Qualitäts-version'
            verfeinern zu lassen

            Vollkommen richtig. Ab einer gewissen Größe nehme ich immer interlaced. Aber mein genannter Balken wäre auch dann in Gif noch um einiges fetter geworden, als nun so per Aufteilung. Und ab einer "persönlich eingeschätzten" Schmerzgrenze nutzt bei Gif-Bildern der Effekt des Interlaced auch nicht mehr so viel bei der Erhaltung der Geduld und des Wohlwollens des Besuchers.....

            Die Reihenfolge sollte aber tatsächlich immer so sein:

            • Grafiken so "pixelklein" wie möglich

            • richtige Grafikformat und dort

            • richtige Kompremierung (Farben bei gif, kompression bei jpg etc)

            • Interlaced bei Grafiken ab einer bestimmten größe (bei einer 20mal20 Pixel großen Dekografik wäre es eher kontraproduktiv....)

            • Notfalls und als letzte Wahl: aufteilung des Bildes wenn(!) wenigstens bestimmte Bereiche in gif abgespeichert werden sollten. (Um kompresionsverluste zu vermeiden)

            • und über alles steht die orientierung Richtung png (und was da noch so kommen wird), das ich auch noch recht stiefmütterlich behandel, ich gebe es zu.

            Chräcker