nicht angemeldet
Optimales Format (jpg, png, gif...) Grafik / Banner auf Webseite
AugeGuten morgen,
ich möchte auf einer Webseite zum einen ein Logo und zum anderen einige grafische Slider einbauen.
Welche Format sollte ich für das Logo und die Banner verwenden?
jpg?, pnp?, gif? sonstwas und vor allem warum?
-
Moin,
Das kommt ganz darauf an wie dein Logo aussieht. Am günstigsten ist SVG. Denn das kannst du ohne Verlust skalieren.
Wenn das Logo Grafik enthält, kommt es auf die Farbtiefe an. GIF ist in der Farbtiefe begrenzt, was PNG auch sein kann. Beide bieten Zudem die Möglichkeit von Transparenzen.
Bei True-Color-Bildern empfiehlt sich ein Format was dies auch entsprechend darstellt. Also z.B. JPG oder PNG als TrueColor.
Also. Deine Frage abschließend zu beantworten: Es kommt auf das einzubindende Bild an.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Eine Grafik mit 10.500 x 1.812 Pixeln wird als png auf dem PC super scharf dargestellt, auch dann wenn ich ganz nah ran zoome. Wenn ich die Grafik jedoch ins Wordpress-System hochlade wird diese unscharf dargestellt. Wie kann das sein?
-
Moin,
Dann wird das Bild beim upload komprimiert.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Wie kann man die Komprimierung unterbinden?
-
Moin,
Du kennst google? Du weißt jetzt nach was du suchen musst. Gibt es genügend Treffer.
Na dann los... du schaffst das...
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Du kannst es per FTP hochladen (wp-content/uploads/). Aber bedenke, wenn die Datein größer als 125kb sind wird es unfair für Mobilnutzer die immer knapp an Traffic sind.
PS: Kann auch am Template liegen wenn hier eine andere Auflösung gewählt wird.
-
-
-
-
Hallo
Eine Grafik mit 10.500 x 1.812 Pixeln wird als png auf dem PC super scharf dargestellt, auch dann wenn ich ganz nah ran zoome. Wenn ich die Grafik jedoch ins Wordpress-System hochlade wird diese unscharf dargestellt. Wie kann das sein?
Die Grafik wird beim Upload eventuell skaliert, wie bobby sagte. Ich vermute aber anderes. Wenn eine Grafik so derart groß ist (bei dir 10.500 x 1.812), wird sie im Browser herunterskaliert, weil die Anzeigefläche im Browser (in deinem Fall bei weitem) nicht so groß ist, wie es die Grafik ist. Dabei treten Unschärfen auf, das ist soweit normal.
Davon abgesehen dürfte die Dateigröße, gerade bei PNG (wenn nicht farbreduziert) unangemessen groß sein. Ich möchte das wegen eines Seitenbesuchs nicht herunterladen müssen.
Tschö, Auge
--
Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
Kleine freie Männer von Terry Pratchett-
Moin,
Oh... ja... ich hatte nicht über 10000 Pixel gelesen sondern nur knapp über 1000 .... dann wird das bild in der Anzeige wahrscheinlich skaliert.
Da solltw man das Bild vorher in einem Grafikprogramm anpassen. Das ist ja riesig.
Wie kommt man zu so einem riesigen Bild?
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:) -
Die Grafik wird beim Upload eventuell skaliert, wie bobby sagte. Ich vermute aber anderes. Wenn eine Grafik so derart groß ist (bei dir 10.500 x 1.812), wird sie im Browser herunterskaliert, weil die Anzeigefläche im Browser (in deinem Fall bei weitem) nicht so groß ist, wie es die Grafik ist. Dabei treten Unschärfen auf, das ist soweit normal.
Was wäre denn die optimale Pixelgröße der Grafik?
Habe die Grafik mal auf dem PC runter skaliert, dummerweise wird die Grafik beim runterskalieren auf dem PC unscharf. Wie kann ich eine Grafik runterskalieren ohne das Sie unscharf wird?
-
Moin,
Da gibt es Freewaretools die das für dich übernehmen. Einfach mal google anwerfen. "DIE" optimale Größe gibts nicht, da man auch an Retina-Displays denken muss.
Aber 10TSD Pixel ist definitiv zu groß
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:) -
Hallo
Wenn eine Grafik so derart groß ist (bei dir 10.500 x 1.812), wird sie im Browser herunterskaliert, weil die Anzeigefläche im Browser … nicht so groß ist, wie es die Grafik ist. Dabei treten Unschärfen auf, das ist soweit normal.
Was wäre denn die optimale Pixelgröße der Grafik?
Das kommt auf die Anzeigefläche im Ausgabemedium an. Du kannst dir eine Website auf einem Smartphone mit 400px Breite anzeigen, auch auf einem Full-HD Bildschirm mit 1920px oder genauso auf einem UHD-Display mit einer Breite von 3840px oder irgendwas dazwischen. Das ganze, zumindest bei den letzten beiden Beispielauflösungen, entweder im Vollbild, wobei die Auflösung bis auf etwaige Fensterränder vollständig genutzt wird, oder in einem beliebig großen und breiten Fenster, dessen Größe du als Seitenautor nicht kennst, nicht kennen kannst und nicht kennen musst.
Um damit umzugehen und für unterschiedliche Anzeigegrößen Bilder unterschiedliche Auflösungen des gleichen Bildes oder gar unterschiedliche Bilder bereitzustellen, gibt es in HTML mehrere Techniken. Für unterschiedliche Auflösungen des gleichen Bildes gibt es für
imgdas Attributsrcsetund für unterschiedliche Bilder für unterschiedliche Anzeigegrößen die Elementepictureundsource. Beide Techniken können auch kombiniert werden, wie es in diesem Beispiel beschrieben wird.Habe die Grafik mal auf dem PC runter skaliert, dummerweise wird die Grafik beim runterskalieren auf dem PC unscharf. Wie kann ich eine Grafik runterskalieren ohne das Sie unscharf wird?
Um was für Grafiken handelt es sich denn überhaupt? Ist es ein Foto oder ein Logo mit scharf voneinader abgegrenzten Linien und Flächen? Je nach Art des Bildes eignen sich unterschiedliche (Raster)-Grafikformate (JPEG, PNG, GIF), eventuell auch Vektorgrafiken (SVG), mit denen Skalierung keine Rolle mehr spielt.
Tschö, Auge
--
Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
Kleine freie Männer von Terry Pratchett
-
-
-
-
-
Wenn die Größe des Bilds dann mal feststeht und du noch nicht sicher bist welches Format du nehmen solltest, speichere das Bild in allen drei Formaten ab und schau dir die Dateigröße an.
Für png gibt es Komprimierer die vielleicht noch mehr rausholen als dein Grafikprogramm es kann. Das ist verlustfrei. Suchen und ausprobieren! Gibts auch als online Version, d.h. Bild hochladen und komprimiert wieder runterladen. Und dabei dran denken dass du dein Bild dazu irgendwo hochlädst…
jpg kann man in verschiedener Qualität speichern, das beeinflusst auch wesentlich die Dateigröße. Auch damit kannst du spielen und dir die Ergebnisse ansehen. Da kann man je nach Bild beachtliche Einsparungen erzielen, bei nur wenig sichtbaren Qualitätseinbußen.