Grafik in Phase5 einfügen, Qualität der Grafik schlecht Einstellungen

[juser]

Mit Paint habe ich eine Grafik konzipiert und als jpg-Datei abgespeichert. Diese Grafik (Organigramm) habe ich dann mit img-Tag in Phase5 eingefügt. Gegenüber dem Original ist die Grafik aber in der Vorschau und im IE7 ebenso in Firefox reichlich unscharf bei Schrift und Rahmen.
Lässt sich das nicht verbessern???
juser

[Peter Gedamke]

wäre so aus dem 'Bauch heraus' auch rascher nachzuvollziehen, könntest du deine Angaben in px und nicht in cm angeben

[juser]

wäre so aus dem 'Bauch heraus' auch rascher nachzuvollziehen, könntest du deine Angaben in px und nicht in cm angeben

:top:

Hallo, Peter,
erstmal Dank für Deine Unterstützung.
Also: Die Grafik-Fassung, die ich oben erwähnt habe und die mich nach Einbau in P5 zufriedenstellt, was die "Schärfe" betrifft, hat folgende Daten:
1419x946 px, Auflösung 300 px/Zoll, Breite 12,5 Höhe 8 cm; in P5 habe ich dieses Organigramm im img-Tag eingebaut mit einer Breite von 700 px.

Nach Deinen Bedenken wegen der Größe der Datei (161 KB) habe ich versuchsweise die Kompression verändert und eine Auflösung von 200px/Zoll gewählt. Das ergab bei 12,5x8 cm 945x630px. Diese Datei ist nur noch 83 KB groß.

Im Vergleich zur ersten Fassung mit 300px Auflösung ist jedoch im Browser wieder ein Qualitätsverlust festzustellen. Ich denke, ich bleibe bei den 300px und 161 KB, weil ich meine, dass bei der steigenden Verbreitung von DSL-Anschlüssen ein 161 KB-Bild/Grafik keine Übertragungsschwierigkeiten mehr bereiten sollte.
Gegenargumente??
Gruß
juser

[Thomas]

Die Grafik-Fassung, die ich oben erwähnt habe und die mich nach Einbau in P5 zufriedenstellt, was die "Schärfe" betrifft, hat folgende Daten:
1419x946 px, Auflösung 300 px/Zoll, Breite 12,5 Höhe 8 cm; in P5 habe ich dieses Organigramm im img-Tag eingebaut mit einer Breite von 700 px.

Für die Darstellung auf dem Bildschirm ist lediglich der erste Wert interessant (1419px * 946px). Die Grafik wird vom Browser dann genau so dargestellt, wie du sie bei dir in der Bildverarbeitung in der Originalgröße siehst.

Etwas anderes ist es, wenn du die Grafik vom Browser skalieren lässt. Also z. B. oben genannte Grafik mit einem IMG-Tag folgendermaßen einbindest: <img src="..." width="700">. Dann wird immer noch die Grafik in ihrer ursprünglichen Größe heruntergeladen, aber dann für die Anzeige verkleinert. Das kann gut gehen, es kann aber auch in die Hose gehen. Deshalb immer, soweit nicht wirklich gute Gründe dagegen sprechen, die Grafik in der Größe auf den Server stellen, die dann auch dem IMG-Tag mitgegeben wird.

Im aktuellen Fall also einfach die ursprüngliche Grafik nehmen und auf 700px Breite verkleinern (Kompression und Auflösung lass einfach unverändert). Du kannst dann direkt in deiner Bildverarbeitung sehen, ob es gut aussieht oder nicht (und wenn ein Browser es gut auf diese Größe skalieren kann, sollte es ein Bildverarbeitungsprogramm erst recht können). Diese Grafik auf den Server und z. B. mit <img src="..." width="700"> einbinden.

Was du momentan machst, ist äquivalent dazu, einen vollen Eimer Wasser durch die Gegend zu schleppen (1419px * 946px), um dann am Ziel festzustellen, dass du nur etwas weniger als ein Viertel vom Wasser brauchst (700px * 467px) und erst dann dreiviertel vom Wasser auszuschütten.

Falls du Probleme beim Verkleinern hast, poste einfach mal die Grafik.

[edit: Pünktchen ergänzt]

Der Beitrag wurde von Thomas bearbeitet: 23.07.2007 - 15:54

[juser]

Die Grafik-Fassung, die ich oben erwähnt habe und die mich nach Einbau in P5 zufriedenstellt, was die "Schärfe" betrifft, hat folgende Daten:
1419x946 px, Auflösung 300 px/Zoll, Breite 12,5 Höhe 8 cm; in P5 habe ich dieses Organigramm im img-Tag eingebaut mit einer Breite von 700 px.

Für die Darstellung auf dem Bildschirm ist lediglich der erste Wert interessant (1419px * 946px). Die Grafik wird vom Browser dann genau so dargestellt, wie du sie bei dir in der Bildverarbeitung in der Originalgröße siehst.

Etwas anderes ist es, wenn du die Grafik vom Browser skalieren lässt. Also z. B. oben genannte Grafik mit einem IMG-Tag folgendermaßen einbindest: <img src="..." width="700">. Dann wird immer noch die Grafik in ihrer ursprünglichen Größe heruntergeladen, aber dann für die Anzeige verkleinert. Das kann gut gehen, es kann aber auch in die Hose gehen. Deshalb immer, soweit nicht wirklich gute Gründe dagegen sprechen, die Grafik in der Größe auf den Server stellen, die dann auch dem IMG-Tag mitgegeben wird.

Im aktuellen Fall also einfach die ursprüngliche Grafik nehmen und auf 700px Breite verkleinern (Kompression und Auflösung lass einfach unverändert). Du kannst dann direkt in deiner Bildverarbeitung sehen, ob es gut aussieht oder nicht (und wenn ein Browser es gut auf diese Größe skalieren kann, sollte es ein Bildverarbeitungsprogramm erst recht können). Diese Grafik auf den Server und z. B. mit <img src="..." width="700"> einbinden.

Was du momentan machst, ist äquivalent dazu, einen vollen Eimer Wasser durch die Gegend zu schleppen (1419px * 946px), um dann am Ziel festzustellen, dass du nur etwas weniger als ein Viertel vom Wasser brauchst (700px * 467px) und erst dann dreiviertel vom Wasser auszuschütten.

Falls du Probleme beim Verkleinern hast, poste einfach mal die Grafik.

[edit: Pünktchen ergänzt]

Allmählich kapiere ich! Ich habe nun von vornherein "dreiviertel vom Wasser" ausgeschüttet, wie Thomas so treffend vergleicht, die Dateigröße in Xnview auf 600x399 px reduziert und mindestens 30 Varianten in jpg, gif und png, zudem mit verschiedenen Farbtiefen und Qualitätsstufen getestet und bin nun mit meinem Organigramm bei einer jpg-Datei mit 38 KB in recht brauchbarer Qualität.
Vielen Dank für Eure Hilfe, auge und peter gehören ja auch zum Helferkreis.

In einem Punkt hätte ich gern mein Wissen ergänzt: Etwas ist mir nämlich bei allem Experimentieren noch immer nicht ganz erklärbar: Wie kann ich ganz bewusst und gezielt in Xnview, Irfan und PhotoImpact eine jpg-Datei komprimieren? Im Moment reime ich mir folgendes zusammen:
Xnview: jpg-Datei laden > Menu "Bild" > Einstellung der Farbstufen: Schwarzweiß 1 Bit, Farben 8 Bit, Echtfarben (24 Bit), 32 Bit. Etwas anderes zur Einstellung der Kompressionsstufe finde ich nicht.

Irfan: jpg-Datei laden > Menu Bild > Farbtiefe reduzieren. Auch hier finde ich nichts Alternatives, auch nicht in der Hilfe.

PhotoImpact 11: jpg-Datei laden > Menu "web" > Bildoptimierer > Einstellung der Qualität mit Schieberegler von 0 - 100.

Sind das die Komprimierungsmöglicheiten??

[Thomas]

Wie kann ich ganz bewusst und gezielt in Xnview ... eine jpg-Datei komprimieren?

Grundeinstellung unter "Werkzeuge" / "Optionen" / Bereich "Allgemein" / Teilbereich "Lesen/Schreiben" / Register "Schreiben" / Format "JPEG": Dort gibt es den genannten Regler sowie die zusätzlichen Optionen "Progressiv" und "Huffman-Tabelle optimieren" (zu beiden lässt sich sicherlich ergooglen, was sie bewirken, ich habe sie noch nie gezielt eingesetzt).

Wenn du die Einstellungen explizit beim Speichern ändern willst: "Datei" / "Speichern unter..." (ggf. Dateityp "JPG ..." auswählen) / Button "Optionen". Führt dich zu dem selben Dialog wie oben beschrieben. Änderungen bleiben erhalten und gelten dann ab sofort für das Speichern aller JPEGs.

Beschreibung gilt für XnView 1.90.3 (14. März 2007).

Gerade bei Diagrammen würde ich es durchaus auch mal mit dem GIF-Format probieren - JPEG muss nicht immer die kleinste Datei mit der besten Darstellung liefern. Und sofern du keine Transparenzen einsetzt, ist durchaus auch das PNG-Format eine Alternative (der IE stellt leider PNG-Transparenzen noch nicht korrekt dar).

[edit: 2 " und eine ) ergänzt]

Der Beitrag wurde von Thomas bearbeitet: 29.07.2007 - 14:29

[Auge]

Hallo

... sowie die zusätzlichen Optionen "Progressiv" ... (... ich habe sie noch nie gezielt eingesetzt).

'Progressiv' bewirkt, dass das Bild so komprimiert wird, dass es schon während des Ladens in seiner vollen Größe, aber in verminderter Qualität dargestellt wird. Sollte dir eigentlich auch schon begegnet sein, manche Bilder werden im Browser während des Ladens von oben nach unten 'wachsend' dargestellt, manche sind erst ein Haufen von Farbklötzen und werden nach und nach detailierter. Die letzteren sind 'progressiv' komprimiert.

Gerade bei Diagrammen würde ich es durchaus auch mal mit dem GIF-Format probieren

Dann kannst du auch gleich PNG nehmen. Bei geringen Farbtiefen (2, 4, 8 Bit; 2 bis 256 Farben) liefert es immer die kleinere Dateigröße als GIF, außer es handelt sich um ein sehr kleines Bild (Pixelanzahl), dann wird der gegenüber GIF etwas größere Dateiheader relevant, was in einer höheren Dateigröße resultiert.

Aber ich vermute, genau wie du, dass ein Organigramm mit wenigen Farben auskommt und somit besser als GIF oder PNG gespeichert werden sollte, was zudem den Vorteil hätte, dass die JPEG-Artefakte ausblieben.

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 31.07.2007 - 15:51