Auflösungsempfehlung für Bilder

[blumentopf]

Hallo,
Was für eine Auflösung empfehlt ihr für Fotos, die per Mausklick in einer Detailansicht gezeigt werden? Die Anzeigegröße orientiert sich am Browser-Fenster ( position:fixed;top:10%;bottom:10%;).

Ich bin gerade bei 667x500, das macht die Seite bei vielen Bildern allerdings ziemlich schwer.
Es handelt sich um JPGs, die ich mit GIMP bei 90% Qualität gespeichert habe. Die Dateigrößen liegen nun etwa zwischen 80 und 100 KB. Würdet Ihr bei der Kompression einen niedrigeren Wert für die Qualität wagen?
Oder generell die Seite so programmieren, dass die großen Bilder erst beim Aufruf ihrer Detailansicht geladen werden, z.B. durch den dann erfolgenden Austausch des angezeigten Bildes?
Dank und Gruß

[hotti]

Hallo,

Was für eine Auflösung empfehlt ihr für Fotos, die per Mausklick in einer Detailansicht gezeigt werden?

Gute Frage! Nur so gut wie nötig. Hochauflösende Fotos würde ich nicht in eine Bilderserie bauen, Richtwert 500 x 375. Die Bilder sollen neugierig machen und das Wesentliche zeigen aber nicht als Druckvorlage für Wandposter missbraucht werden können.

Hotti

[Der Martin]

Hi,

Was für eine Auflösung empfehlt ihr für Fotos, die per Mausklick in einer Detailansicht gezeigt werden?

kommt drauf an[tm].

Die Anzeigegröße orientiert sich am Browser-Fenster ( position:fixed;top:10%;bottom:10%;).

Das schließt IE6 aus, der zu blöd ist, die Größe eines Elements aus top und bottom zu berechnen.

Ich bin gerade bei 667x500

Wenn es um eine Foto-Galerie geht, bei der ich zunächst Thumbnails zu sehen bekomme und dann auf Klick eine Großansicht des ausgewählten Bildes, finde ich das zu klein. Bei solchen Galerien ist meine Reaktion meistens: Mist, schon wieder nur Briefmarken.
Gerade bei Galerien darf man davon ausgehen, dass der Besucher auch bereit ist, ein paar Sekunden auf das Bild zu warten, das er sich gezielt zur Ansicht ausgewählt hat. Da sind auch Bildgrößen von 5M Pixel vertretbar, finde ich.

Es handelt sich um JPGs, die ich mit GIMP bei 90% Qualität gespeichert habe. Die Dateigrößen liegen nun etwa zwischen 80 und 100 KB. Würdet Ihr bei der Kompression einen niedrigeren Wert für die Qualität wagen?

Nein. Nur dann, wenn die Bilder nebensächlich sind.

Oder generell die Seite so programmieren, dass die großen Bilder erst beim Aufruf ihrer Detailansicht geladen werden, z.B. durch den dann erfolgenden Austausch des angezeigten Bildes?

Davon gehe ich selbstverständlich aus! Die Thumbnails sollen möglichst schnell laden, und wenn die nur, sagen wir, 120x160 Pixel groß sind, ist das völlig okay.

So long,
 Martin

[Blumentopf]

Hallo,
vielen Dank für die Tipps.

Oder generell die Seite so programmieren, dass die großen Bilder erst beim Aufruf ihrer Detailansicht geladen werden, z.B. durch den dann erfolgenden Austausch des angezeigten Bildes?

Davon gehe ich selbstverständlich aus! Die Thumbnails sollen möglichst schnell laden, und wenn die nur, sagen wir, 120x160 Pixel groß sind, ist das völlig okay.

Wie sorge ich am besten dafür, dass die Bilder erst bei Bedarf geladen werden, wenn ich die Ursprungsseite nicht verlassen will? Durch Einsetzen des entsprechenden src Wertes mit js bei Aufruf des Bildes?

Zur Bedeutung der Bildqualität: Es handelt sich hierbei nicht um eine Bildergalerie mit tollen Panoramaansichten zum gigantischen Fotoerlebnis, sondern um Bilder, die einen Artikel abbilden der zuvor nur in sehr kleinen Voransichten {height:50px;} zusehen sind.

Dank und Gruß

[Der Martin]

Hi,

Die Thumbnails sollen möglichst schnell laden, und wenn die nur, sagen wir, 120x160 Pixel groß sind, ist das völlig okay.
Wie sorge ich am besten dafür, dass die Bilder erst bei Bedarf geladen werden, wenn ich die Ursprungsseite nicht verlassen will? Durch Einsetzen des entsprechenden src Wertes mit js bei Aufruf des Bildes?

ja, idealerweise durch eine Kombination aus Javascript und einem konventionellen Link als Fallback:

<a href="large-image.jpg" onclick="ZoomImage(); return false;"><img src="mini-view.jpg" alt="..."></a>

Die Javascript-Funktion ZoomImage() soll dabei entweder das Bild in voller Größe an einer bestimmten Stelle im Dokument darstellen oder als Popup öffnen, je nach Präferenz. Falls Javascript nicht zur Verfügung steht, kann man das große Bild über den herkömmlichen Link aufrufen.

Zur Bedeutung der Bildqualität: Es handelt sich hierbei nicht um eine Bildergalerie mit tollen Panoramaansichten zum gigantischen Fotoerlebnis, sondern um Bilder, die einen Artikel abbilden der zuvor nur in sehr kleinen Voransichten {height:50px;} zusehen sind.

Also eher so, wie man es von manchen Online-Shops kennt? Dann würde ich für das große Bild tatsächlich mit der Qualität weit heruntergehen - so weit, dass es gerade noch nicht unangenehm auffällt. Und dann ist eine Größe von, sagen wir, 800x600 sicher ausreichend. In der Größe kann man auch mit deutlich unter 100kB schon ordentliche Bilder zeigen.

So long,
 Martin

[blumentopf]

hallo,
die Bilder werden jetzt beim Aufruf ausgetauscht. Davor ist immer schon die Vorschaudatei im entsprechenden <img> Tag. Jetzt wäre es schön, wenn man während der Wartezeit nicht auf einen grauen Hintergrund gucken müsste, sondern solange die zwar unzulängliche, aber immerhin vorhandene Vorschau sehen könnte.
IE und Firefox machen das, Safari und Opera nicht.
Bei Opera stört es kaum, da er die Bilder so schnell aufbaut, dass man keine Zeit hat, sich daran zu stören. Vielleicht hat der schon mal heimlich vorgeladen..?
Ganz im Gegensatz zu Firefox, der solange zum Bildertauschen braucht, dass man froh sein muss, wenigstens eine verpixelte Vorschau zu sehen.
Woran können solche gravierenden Unterschiede liegen?
Die Bilder sind zwischen 50 und 100kb
Hier der Tauschcode:
~~~javascript

function swap(Bild,Pfad) {
URL = "bilder/" + Pfad;
document.getElementById(Bild).src = URL;
  }

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

Ich bin gerade bei 667x500

Sehr schlecht. Bei JPEGs sollten die Kantenlängen durch 8 teilbar sein.

Bei einem Seitenverhältnis von 4 : 3 bietet sich hier 640 × 480 an.

Es handelt sich um JPGs

Nö, JPEG heißt das Format.

die ich mit GIMP bei 90% Qualität gespeichert habe.

Vermutlich unnötig hoch. Hat GIMP keine Vorschau? Wähle die Kompression so, dass sie sich gerade so nicht störend bemerkbar macht. Meist reicht mittlere Qualität um die 60% völlig aus.

Qapla'

[Steel]

Moin!

die ich mit GIMP bei 90% Qualität gespeichert habe.

Vermutlich unnötig hoch. Hat GIMP keine Vorschau? Wähle die Kompression so, dass sie sich gerade so nicht störend bemerkbar macht. Meist reicht mittlere Qualität um die 60% völlig aus.

Herzanfall... Noelst Du nicht staendig wegen der miesen Qualitaet von Schriften mit Antialiasing? Wie kannst Du dann so eine brutal schlechte Qualitaet empfehlen? Fuer solche Bilder wuerde ich nicht unter 80, vielleicht 70% gehen. (am liebsten gar keine, am liebstesten kein jpg) Natuerlich ist das stark abhaengig vom Bild. Achso: Gimp hat eine Vorschau, wenn man das will. Damit kann man eigentlich recht gut eine fuer das Bild geeignete Kompression waehlen. Bei Massenkonvertierungen mit z.B. IrfanView, wo man nicht jedes Bild einzeln bearbeitet, wuerde ich immer lieber eine hoehere Qualitaet einstellen.

[Gunnar Bittersmann]

@@Steel:

nuqneH

Noelst Du nicht staendig wegen der miesen Qualitaet von Schriften mit Antialiasing? Wie kannst Du dann so eine brutal schlechte Qualitaet empfehlen?

Tu ich nicht. Für Schriften empfehle ich das richitge Grafikformat.

am liebstesten kein jpg

Du sagst es. Und das Format heißt JPEG mit E.

Bei Massenkonvertierungen mit z.B. IrfanView, wo man nicht jedes Bild einzeln bearbeitet, wuerde ich immer lieber eine hoehere Qualitaet einstellen.

Warum? Um massenhaft unnötig viele Daten an Nutzer rauszuschicken und ihnen die Ladeseit der Seiten verlängern?

Der bessere Ansatz ist wohl, eine mittlere Kompression zu wählen und sich bei Bedarf einzelne Bilder nochmal vorzunehmen.

Qapla'

[blumentopf]

am liebstesten kein jpg

Du sagst es. Und das Format heißt JPEG mit E.

ob mit oder ohne e: welches Format wäre denn dann besser?
png?

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

ob mit oder ohne e: welches Format wäre denn dann besser?
png?

Ja. Oder auch GIF. Siehe http://forum.de.selfhtml.org/archiv/2010/4/t197031/#m1321095

Qapla'

[Steel]

Hoi!

Und das Format heißt JPEG mit E.

Das wiederum interessiert mich nur peripher solange meine Dateien JPGs sind. Scheinbar weisst Du ja auch so, was gemeint ist.