Png kompression/Layouterstellung

[ElCanario]

Hey zusammen,

ich habe auf unserer Firmenhomepage (www.plastikkarten.net) auf der Homeseite ein Hintergrundbild (Himmel) und ein Vordergrundbild (Karten etc.). Nun ist das Vordergrundbild ein .png und ganze 1,2 mb groß. Natürlcih ist das viel zu groß für die Seite, und ich finde einfach keine Möglichkeit, die Grafik zu komprimieren und gleichzeitig die Transparenz und Qualität beizubehalten.

Nun habe ich die Idee, das Vordergrundbild direkt mit dem Hintergrundbild zu verschmelzen, sprich, einen Teil des Himmels auszuschneiden und im Vordergrundbild zu hinterlegen, dadurch hätte ich keine Transparenz mehr und könnte gut als .jpg komprimieren. Allerdings müsste dann das Vordergrundbild mit dem Himmel nahtlos in das Hintergrundbild übergehen, was ich allerdings (aufgrund vermutlcih nciht vorhandener Kenntnisse) nicht hinbekomme...

Ich hoffe es ist klar geworden, wo das Problem liegt und jemand hat eine gute Idee.
Schonmal vielen Dank fürs durchlesen.

Gruß
Jonny

[SteveMoto]

wären dann 1920 x 1400 mit 96 dpi und 60% JPG = 452 KB. Allerdings scrollen dann die Wolken mit...

[guck pm]

[daniel5959]

Hallo,

ein einfarbiger Hintergrund - also Hintergrundfarbe, spart die HG-Grafik - wäre eh besser, siehe

https://www.plastikkarten.net/funktionen/barcode.html

Schrift auf Wolkenbild ist nun mal nicht so gut lesbar.

Wobei ich eher annehme, dass die Seite fehlerhaft ist und das Chaos nicht so gedacht war oder doch?

daniel5959

[ElCanario]

Hallo,

ein einfarbiger Hintergrund - also Hintergrundfarbe, spart die HG-Grafik - wäre eh besser, siehe

https://www.plastikkarten.net/funktionen/barcode.html

Schrift auf Wolkenbild ist nun mal nicht so gut lesbar.

Wobei ich eher annehme, dass die Seite fehlerhaft ist und das Chaos nicht so gedacht war oder doch?

daniel5959

Also ich habe es jetzt auf mehreren PCs ausprobiert und bei mir liegt kein Chaos vor...

wären dann 1920 x 1400 mit 96 dpi und 60% JPG = 452 KB. Allerdings scrollen dann die Wolken mit...

Vielen Dank, ich schau ob sich da was draus machen lässt.

[daniel5959]

Hallo,

bei mir (Firefox 20.0, Monitor 1280x1024px) sieht die Seite plastikkarten.net/funktionen/barcode.html so aus

>> Screenshot, siehe unten im Zitat
>> er wird irgendwann ganz gelöscht

Ich kann mir nicht vorstellen, dass so ein Murks wirklich beabsichtigt ist.

daniel5959

[ElCanario]

Hallo,

bei mir (Firefox 20.0, Monitor 1280x1024px) sieht die Seite plastikkarten.net/funktionen/barcode.html so aus



Ich kann mir nicht vorstellen, dass so ein Murks wirklich beabsichtigt ist.

daniel5959

lade die Seite mal via f5 neu..

[daniel5959]

Hallo,

nach F5 sieht die Seite ganz anders aus, auch die Inhalte sind scheinbar andere - an der CSS-Datei alleine lag es wohl nicht.

Wurde die Seite neu gemacht?

daniel5959

[mogli]

Wozu denn zwei Grafiken? Du hast doch ein Layout mit fixer Breite, da reicht dann eine 1920er Grafik völlig aus.

Sprich:

Ein JPG im Format 1920x1200 Pixel
Inhalt: Größtenteils deine Wolken, nur in der Mitte diese Plastikkarten-Geschichte (die transparente PNG aus dem bisherigen Design kannst du ja bequem in Photoshop auf die bereits fertige Wolkengrafik setzen und dann alles als ein JPG speichern).

Dürfte wohl dann etwas größer als die bisherigen 300KB werden, da mehr Action im Bild ist als nur Wolken, aber bei weitem besser als die bisherige Lösung.

Für Unterseiten, wo das zentrierte Plastikkarten-Element gar nicht auftauchen soll, kann man ja weiterhin die bestehende Wolkengrafik als Hintergrund nehmen.

Trotzdem auch hier nochmal der Hinweis, dass die Wolkengrafik wirklich extrem hochskaliert aussieht und man einzelne Artefakte etc. mit bloßem Auge erkennen kann. Das ist nicht hübsch.

[mogli]

Ach vergiss den obigen Beitrag, der Hintergrund ist ja fix und darf nicht mitscrollen.

Das Design ist aber auch sehr gewöhnungsbedürftig und mit Fallstricken belegt. Ich würde das neu-konzeptionieren.

[serious-cool]

Hallo,
mein Vorschlag wäre Querdenken:

Blauer Hintergrund nicht als Bild sondern als Farbwert mit Verlauf -> CSS3, 5 Zeilen Code mit Browser-Patch.

Eine oder zwei Wolke auf transparentem Hintergrund im Photoshop erstellen, passend auf der Leinwand platzieren, im CSS mit repeat Arbeiten. Beinhaltet das PNG auch nur die Informationen die dargestellt werden (Farbraum etc) bekommst Du den ganzen Hintergrund unter 20kb hin und dazu noch unverpixelt...

Bin allerdings kein Designer, just my 5 cents

PS: Es gibt keinen Grund ein optimiertes Bild zu komprimieren! -> 0% Ersparnis, 100% mehr Rechenaufwand...

[MonikaTS]

dieser Wolkenhintergrund lenkt total ab.

dadurch geht das was ohnehin sehr versteckt ist, nämlich die sogenannte "call to action" völlig in den "HIntergrund".

das derzeitig sichtbare Ziel dieser Seite ist sich die Wolken zu betrachten.

der "Murcks" der oben gezeigt wird, entsteht, weil das Bild so groß ist, dass gar nicht alles geladen werden kann.


ich tät das ganze Konzept der Startseite neu erfinden und vor allem diese Wolken nach Wolkenguggenhausen schicken

[ElCanario]

Danke für all eure Antworten

@Daniel: Ja die Seite wurde komplett neu gemacht.

@serious-cool: Klingt gar nicht schlecht, ich werde mal sehen ob sich das realisieren lässt und gut aussieht

@Monika: Ich muss dir leider widersprechen, der Wolkenhintergrund ist eigentlich ziemlich klar hinten an gestellt und ich hatte nie das Gefühl die Wolken würden zu stark ablenken (Zudem auch keiner dem ich die Seite gezeigt habe) .

Dass das Bild zu groß ist ist mir klar und auch unser Grundproblem.
Wir haben das jetzt so gelöst, dass wir erst ein .jpg in 200kb Größe laden lassen als Platzhalter und dann sobald die eigentliche Grafik geladen ist wird der Platzhalter durch Java Script ausgeblendet.
Das ist für den Benutzer dann Subjektiv gesehen schonmal ein gewaltiger Geschwindigkeitsboost, allerdings ist das SEO technisch totaler Müll oder? Die objektive also die Gesamtladedauer wird dadurch natürlich noch länger.

Wäre es dann möglich, die Eigentliche Grafik mit JavaScript nachzuladen sobald die Seite komplett aufgebaut ist? Oder erkennt Google das? Man versucht ja theoretisch Google auszutricksen...

Gruß
Jonny

[Geo]

Wäre es dann möglich, die Eigentliche Grafik mit JavaScript nachzuladen sobald die Seite komplett aufgebaut ist? Oder erkennt Google das? Man versucht ja theoretisch Google auszutricksen...

Wird die Seite für Google gebaut oder für den User?

Du schreibst was von hochwertigem Offsetdruck etc auf der Seite und kommst dann mit einer so ausgepixelten Hintergrundgrafik daher, auf mich macht es einen ziemlich semi-professionellen Eindruck...

[MonikaTS]

Danke für all eure Antworten


@Monika: Ich muss dir leider widersprechen, der Wolkenhintergrund ist eigentlich ziemlich klar hinten an gestellt und ich hatte nie das Gefühl die Wolken würden zu stark ablenken (Zudem auch keiner dem ich die Seite gezeigt habe) .

du magst die besten, geilsten, herrlichsten, technisch ausgereiftesten Plastikkarten an den Mann und die Frau bringen und da ist so ein Wolkenhintergrund schlichtweg falsch

und die Schrift auf den Wölkchen auch =>das wirkt "altbacken"
niemals wie ein hochwertiges Produkt.

[nerd]

Danke für all eure Antworten


@Monika: Ich muss dir leider widersprechen, der Wolkenhintergrund ist eigentlich ziemlich klar hinten an gestellt und ich hatte nie das Gefühl die Wolken würden zu stark ablenken (Zudem auch keiner dem ich die Seite gezeigt habe) .

Ich stimme monika zu. Die wolken sind "zu laut".
Es gibt viele seiten die ein bild im hintergrund haben, allerdings draengt sich das bild dabei nie bewusst auf. Entweder wird es unscharf dargestellt sodass man sich auf den text "davor" focusiert, oder der text wird auf einem teilweise transparenten div ueber die grafik gelegt, oder der hintergrund fliest gekonnt in die restliche seite mit ein - keines von dem ist bei dir der fall.

Hier ein paar beispiele wie man hintergrundbilder gut mit dem rest der seite eingebunden hat: https://webdesignledger.com/inspiration ... web-design