Gimp-Bild verpixelt beim einfügen auf Homepage

[RedQueen08]

Hallöchen zusammen

Bin noch ganz frisch was Grafiken etc. angeht.
Habe mir gestern was schnelles im Gimp erstellt (nix besonderes) was ich auf eine Homepage einfügen wollte.
Mein problem ist aber wenn ich es dort einfüge ist das Bild sehr unscharf bzw. verpixelt. Woran liegt es?
Das Bild ist ca. 150x250mm groß und auf der Homepage habe ich es
so eingefügt <img src="Bildname" width=450 height=200">.
Kann es jetzt mit mm und Pixel zusammenhängen?

Hab es jetzt mal hochgeladen, da sieht man auch schon die unschärfe, aber auf der Homepage sieht es nich schlimmer aus (auch verpixelt).

Vielleicht kann ja jemand einem Noob einen Rat geben was falsch gemacht wurde

Yfrog Photo : yfrog.com/5yweihnachtenqj

Lieben Gruß

Redqueen

 

[patrick_l]

AW: Gimp-Bild verpixelt beim einfügen auf Homepage

Zunächst ist einmal die Schreibweise falsch. Ich meine damit den Code-Schnipsel den du angegeben hast. Aber jetzt zum eigentlichen Problem, also was jetzt die Grafik angeht. Beim der Grafik ist es wichtig darauf zu achten in welcher Qualität man das ganze speichert. Wenn man sich für das Jpeg-Format entscheidet hat man eigentlich immer etwas Verlust. Dies fällt halt je nach Komprimierung mal mehr und mal weniger auf.



Leider gibt es den Menüpunkt "Für Web und Geräte" nur in Photoshop und nicht in Gimp.
Wenn die Grafik nicht zu groß ist besteht auch die Möglichkeit das PNG-Format zu wählen.
Die Datei wird dadurch größer, ist jedoch Verlustfrei.

Lg Otto

 

[Pixelverwender]

AW: Gimp-Bild verpixelt beim einfügen auf Homepage

Du musst das Bild vor dem Einfügen auf die geplante Endgröße verkleinern (nicht nur skalieren, sondern mit Gimp tatsächlich verändern - natürlich mit einer Kopie des Bildes, nicht das Original!)

Dein Bild, so wie es jetzt ist, hat die Abmessungen 2953px × 1754px.
Der Browser ist nicht in der Lage, das Bild so zu rendern, dass die von Dir im Quellcode angegebene Größe fehlerfrei dargestellt wird - daher entstehen Bildstörungen.

Eine andere Ursache ist (bzw. kann sein) die Qualitätsstufe, in der das Bild als jpg gespeichert wird.
Bei geringeren Qualitätsstufen entstehen sogenannte Artefakte (Farbklötzchen) - das ist dan das verpixelte, was man z.B. um die Schrift herum sehen könnte.
Das ist in diesem Fall aber nicht die Ursache, sondern die Skalierung.

Edit: Die von Dir angegeben Größe verzerrt zudem die Bildproportionen.
Maßstabsgetreu müssen es 450 x 267px sein.

Siehe hier:

Uploaded with

 

[patrick_l]

AW: Gimp-Bild verpixelt beim einfügen auf Homepage

Du musst das Bild vor dem Einfügen auf die geplante Endgröße verkleinern (nicht nur skalieren, sondern mit Gimp tatsächlich verändern - natürlich mit einer Kopie des Bildes, nicht das Original!)

Dein Bild, so wie es jetzt ist, hat die Abmessungen 2953px × 1754px.
Der Browser ist nicht in der Lage, das Bild so zu rendern, dass die von Dir im Quellcode angegebene Größe fehlerfrei dargestellt wird - daher entstehen Bildstörungen.

Da hatte ich jetzt gar nicht dran gedacht bzw. nachgeschaut.

 

[RedQueen08]

AW: Gimp-Bild verpixelt beim einfügen auf Homepage

Zunächst ist einmal die Schreibweise falsch. Ich meine damit den Code-Schnipsel den du angegeben hast.

@Otto: Magst du mir erklären was du meinst? Damit ich den Fehler nicht nochmal mache

Habe es auch mit .png gespeichert, sah auch nicht besser aus. Beim speichern in .jpg hab ich drauf geachtet die 100% zu wählen.

Was wäre denn das Optimale Format?

@Pixelverwender: Supi, danke dir, sieht schon viel besser aus
Werd ich dann mal gleich heute noch probieren

 

[patrick_l]

AW: Gimp-Bild verpixelt beim einfügen auf Homepage

Das wichtigste zu erst: Die Punkte die Pixelverwender angesprochen hat berücksichtigen.
Auch wie von mir den Punkt in Sachen Bildkomprimierung. Und was den Code angeht.

Falsch

<img src="Bildname" width=450 height=200">

Richtig

<img src="[B]images/[/B]Bildname" [B]alt="Beispiel-Bild"[/B] width="450[B]px"[/B] height="200[B]px[/B]">

Wobei eigentlich die Definitionen bzw. Angaben im Stylesheet gemacht werden sollten.
Der Alternative-Text sollte immer mit angegeben werden. Einmal für Suchmaschinen und z.B. einem Reader für Blinde.
Auch für den Fall das die Grafik nicht geladen wird. Alles im Sinne der Usability.

Als Format ist das Jpeg schon richtig. Qualität kann je nach Größe auf 80% runter gesetzt werden.
Dies Variiert jedoch immer etwas. Es kommt halt auf den Bildinhalt und die Bildgröße an. Daran entscheidet man die
Einstellungen.

 

[RedQueen08]

AW: Gimp-Bild verpixelt beim einfügen auf Homepage

Super
Danke euch Ihr habt mir sehr geholfen.
Ein klitzekleines Problem habe ich dann noch. Hat nicht ganz damit zu tun.
Aber auch das Problem das die Bilder verpixelt sind.
Wenn ich Bild und Text erstelle z.B. im Gimp oder in Inkscape und die dann in .jpg oder .png abspeicher und dann bei einem bekannten öffne der beide programme nicht hat sehen die schon anderes aus. Dann will ich die drucken und da sieht die Schrift vorallem auch sehr pixelig aus. Hat das was mit Kantenglättung zu tun?
Hoffe das geht so mit fragen oder soll ich lieber ein neuen Thread dafür aufmachen?

Bin wirklich noch anfänger in solchen sachen, aber alles mit Grafiken etc. macht mir echt spaß

 

[EuleNr2]

AW: Gimp-Bild verpixelt beim einfügen auf Homepage

Wg. "Save for Web". Es gibt für Gimp zwei gute Plugins für diesen Zweck, beide bieten eine Vorschau, um Artefakte rechtzeitig zu erkennen



RIOT liegt mittlerweile in Ver. 0.4.4. vor

 

[utnik]

AW: Gimp-Bild verpixelt beim einfügen auf Homepage

?Wenn ich Bild und Text erstelle z.B. im Gimp oder in Inkscape und die dann in .jpg oder .png abspeicher und dann bei einem bekannten öffne der beide programme nicht hat sehen die schon anderes aus?

sollte eigentlich kein problem sein, da dein bekannter sicher ein programm hat, das jpg und png darstellen kann (da reicht schon win-bild und fax-anzeige oder mac-vorschau.)

?Dann will ich die drucken und da sieht die Schrift vorallem auch sehr pixelig aus?

zum ausdrucken brauchst du eine deutlich höhere auflösung als für die (gleich grosse) bildschirmdarstellung. am bildschirm sind das 72, im druck mindestens 200, vernünftigerweise eher 300 punkte pro zoll (oder 12 pro mm) für saubere schriftdarstellung sogar das doppelte, sonst sieht das immer verpixelt aus.

gruss
utnik