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

[Thomas]

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

Ein Browser zeigt immer die originale Grafik an - durch das "Einfügen" der Grafik in P5 verändert sie sich nicht. Ist die Grafik "scharf", wenn du dir das JPG in einem Grafikprogramm anschaust? Falls ja, lade bitte die Grafik hoch und poste hier das IMG-Tag. Falls nein, speichere die Grafik in einem anderen Format (GIF oder PNG) oder verwende beim Speichern des JPG eine niedrigere Kompression (ist bei Paint meines Wissens nicht einstellbar). Vorschlag: Grafik mit Paint erstellen, als BMP speichern (=verlustfrei) und mit einem vernünftigen Grafikprogramm in ein JPG, GIF oder PNG umwandeln bis du die gewünschte Qualität erreichst. Mein Vorschlag: xnview.

[Auge]

Hallo

Dies kann daran liegen, dass in den Einstellungen des Browsers vorgesehen ist, Graphiken, die größer als der Viewport (die zur Anzeige der Seite zur Verfügung stehenden Fläche) sind, so zu skalieren, dass sie in den Viewport hineinpassen.

Das Problem daran ist, dass das jeder Benutzer selbst einstellen kann. Wenn du nun einstellst, dass die Graphiken nicht mehr eingepasst werden, sieht die Graphik bei dir so aus, wie sie soll (wenn es denn daran liegt). Bei jemandem, der die Einstellung nicht vornimmt, bleibt die Graphik unscharf. Eine Lösung wäre, die Graphik von vornherein kleiner zu machen, oder mit einem kleinen Vorschaubild auf die eigentliche, große Graphik zu verlinken.

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 19.07.2007 - 0:24

[Peter Gedamke]

na wow -
endlich mal ein User, der auch für XnView stimmt - nicht nur das ewig gelobte IrfanView anbietet

Meine Meinung ist ebenfalls, dass etwas mehr Angaben zu den Daten/Kompression usw. der Grafik genannt werden sollten.
Bin der Ansicht, dass Auge's 'Verdacht' schon berechtigten Background haben könnte... nur - bitte wie gross ist denn diese Grafik überhaupt erstellt worden??? Müsste ja schon massig sein, damit sie nicht mehr in normalen Rahmen angezeigt werden sollte.

[Pieter]

na wow -
endlich mal ein User, der auch für XnView stimmt - nicht nur das ewig gelobte IrfanView anbietet

Meine Meinung ist ebenfalls, dass etwas mehr Angaben zu den Daten/Kompression usw. der Grafik genannt werden sollten.
Bin der Ansicht, dass Auge's 'Verdacht' schon berechtigten Background haben könnte... nur - bitte wie gross ist denn diese Grafik überhaupt erstellt worden??? Müsste ja schon massig sein, damit sie nicht mehr in normalen Rahmen angezeigt werden sollte.

Da kann ich nur ztustimmen, inzwischen (nach anfänglichen Problemen) habe ich mich an xnview gewöhnt und finde die Vorarbeit für die Grafikdarstellung wichtig.

cu
Pieter

[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

Ein Browser zeigt immer die originale Grafik an - durch das "Einfügen" der Grafik in P5 verändert sie sich nicht. Ist die Grafik "scharf", wenn du dir das JPG in einem Grafikprogramm anschaust? Falls ja, lade bitte die Grafik hoch und poste hier das IMG-Tag. Falls nein, speichere die Grafik in einem anderen Format (GIF oder PNG) oder verwende beim Speichern des JPG eine niedrigere Kompression (ist bei Paint meines Wissens nicht einstellbar). Vorschlag: Grafik mit Paint erstellen, als BMP speichern (=verlustfrei) und mit einem vernünftigen Grafikprogramm in ein JPG, GIF oder PNG umwandeln bis du die gewünschte Qualität erreichst. Mein Vorschlag: xnview.

An Thomas und Auge: Euer Rat hat mir weitergeholfen. Paint hat ohne mein (bewusstes) Zutun eine 26,6 x 17,75 cm große Grafik (Organigramm) mit 96 px/Zoll abgespeichert. Ich habe lediglich beim Speichern das Format gewählt (jpg). Klar, dass bei dieser Größe und nur 96 px/Zoll nichts Gescheites und Brauchbares in P5 herauskommt.

Nun habe ich mit xnview (alternativ auch mit PhotoImpact) die Grafik auf 12,5 x 8 cm verkleinert und zugleich die Pixelzahl von 96 auf 300 px/Zoll erhöht. Die Datei hat jetzt zwar stattliche 160 KB, aber in P5, auch im IE und Firefox wird das Organigramm nach meinen Vorstellungen sauber dargestellt.
Danke

[Peter Gedamke]

schön und gut - nur sind für eine Webseite 160 KB schon mal ohne Frage viel zu gross. In diesen Bereichen sollte/dürfte sich nicht mal eine GIF-Animation bewegen... geschweige denn eine jpeg.

Betrachte mal als optimale Grösse so etwa zwischen 45-60kb!

Bestens

Peter

[Peter Gedamke]

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

[Auge]

Hallo

An Thomas und Auge: Euer Rat hat mir weitergeholfen. Paint hat ohne mein (bewusstes) Zutun eine 26,6 x 17,75 cm große Grafik (Organigramm) mit 96 px/Zoll abgespeichert. Ich habe lediglich beim Speichern das Format gewählt (jpg). Klar, dass bei dieser Größe und nur 96 px/Zoll nichts Gescheites und Brauchbares in P5 herauskommt.

Nun habe ich mit xnview (alternativ auch mit PhotoImpact) die Grafik auf 12,5 x 8 cm verkleinert und zugleich die Pixelzahl von 96 auf 300 px/Zoll erhöht. Die Datei hat jetzt zwar stattliche 160 KB, aber in P5, auch im IE und Firefox wird das Organigramm nach meinen Vorstellungen sauber dargestellt.

Deine Größenangaben in cm und dpi sind für die Bildschirmausgabe irrelevant. Ein Bildschirm, egal welche Technik er benutzt, hat eine bestimmte Auflösung in Pixeln, sonst nichts. Damit ist eine native Auflösung, z.B. 1024x1280 oder 768x1024 Pixel, vorgegeben. Je nach Technik können auch andere Auflösungen mehr oder weniger gut dargestellt werden.

Gebe, für die Bildschirmdarstellung des Bildes, eine Auflösung in Pixeln an. Sowohl beim speichern als auch im HTML-Tag des Bildes. Damit stellst du sicher, dass das Bild im Browser so groß dargestellt wird, wie es vorgesehen ist. Ausnahme ist die browserseitige Skalierung, wie ich sie weiter oben beschrieb.

Für die doch recht üppige Dateigröße gibt es mehrere Heilmethoden.

- JPEG: höhere Kompression ergibt kleinere Dateigröße, allerdings auch mehr Fragmente, die das Bild unschön verfälschen.
- Bilder, die nicht viele Farben brauchen (könnte auf dein Organigramm zutreffen): mit möglichst niedriger Farbtiefe als PNG oder bei sehr kleinen Bildern als GIF speichern (16, 32, 64 oder 128 Farben)

Tschö, Auge

[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

[jomal]

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

160 kB, ohje, wenn da noch jemand mit Modem surft, soll ja noch vorkommen, auweia.
Ich würde das Ding dann wirklich drastisch verkleinern, selbst hier bei lost pictures gibt es ja ne Größenbeschränkung.
Organigramm, sollte das nicht nur schwarz/weiß sein? Dann kann man da ja auch ne Menge einsparen, nicht mit 24Mio. Farben, sondern 16 Farben oder 1bit für reines Schwarz/weiß.


jomal

[Peter Gedamke]

du kannst bei deiner Vorarbeit einmal davon ausgehen, dass sich für die *Monitoransicht jede gute Jpeg zwischen 20-25% komprimieren lässt - möglichst bei JPG ergänzend die Option "Progressiv" wählen - ohne dadurch mies auszusehen
Du willst ja sicher kein Bilderbuch in's Netz stellen, wo ein jeder sich die herrlichsten Ausdrucke machen lassen kann.

Und überlege mal deine Masse von 1419px... solche Breitenauflösung hat ja gar kein Monitor - das zwingt ja zum Querscrollen bis zum gehtnichtmehr
Und Text wirst du ja auch noch dazu eingeben wollen?

Ich würde daher empfehlen, trimmer deine Grafiken in der Bildbearbeitung auf eine Maximalbreite von ca. 500px (für ein Foto im Querformat gerechnet!) und komprimiere dann nach den oben genannten Werten.

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

[i.b.g]

Hallo,

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.

Ausgangspunkt geladene JPEG-Datei:

1. im Bildbrowser Rechtsklick
2. im Kontextmenü "Mehrfaches konvertieren..."
3. auf der Tafel "Allgemein" den Button "Optionen", normalerweise werden die für JPEG automatisch vorgeblendet
4. Schieberegler Qualität zwischen Niedrig(1) und Hoch(100) entsprechend setzen
5. ich würde das Häkche vor "Originaldatei löschen" nicht setzen
6. ggf. auf der Tafel Umwandlungen die gewünschten Einstellungen setzen (z.B. Größe ändern)
7. Starten

Geht sowohl mit einer einzelnen Datei aber eben auch mit ganzen Verzeichnissen.

Irfan benutze ich nicht und bei PhotoImpact hast Du's ja selbts gefunden. Die Qualität der JPEG-Datei entspricht reziprok der Kompression. Also niedrige Qualität -> hohe Kompression. Wenn Du es versuchst, wirst du sehen wie die Ergebnisse aussehen.

[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

[jomal]

Ich habe mich über 161 kB gewundert.
Ist auch für DSL etwa bei schlechter Verbindung ein ziemlicher Happen.
Mein größtes Bild, dass ich mal eben finden konnte hat 44.kB.
Im Schnitt liege ich bei ungefähr 20 kB.

Aber eine Sache, entweder liege ich falsch oder Du hast was übersehen.
Ich handhabe das so: Bilder mit max. Auflösung, 16,7 Mio. Farben speichern, dann mit xnview oder IrfanView die Größe ändern.
Auch wenns Peter ärgert, ich bevorzuge IV, aber wohl nur, weil ich das eben kann.
Bildgröße generell in px, bei nem TFT-Monitor mit 1280*1024 komme ich bei den Bildern mit 640*480 ganz gut hin.
Evtl., je nach Bild würde ich die Farbtiefe reduzieren. 16 Mio. ist für so ziemlich alles sehr viel, oft reichen 256 oder weniger.
Bei Organigramm kann es sein, dass Du mit 16 Farben klar kommst, eine sehr drastische Verkleinerung um den Faktor 3.
Ich hab es eben mal probiert, Bild von einer Katze auf dem bunten Teppich, bei 256 Farben ist praktisch kein Unterschied zu sehen,
bei 16 schon, aber ist ein toller Effekt, kann man künstlerisch verwenden.

jomal

[Google Bot]