WebSite X5Help Center

 
Guido L.
Guido L.
User

Verpixeltes Logo auf Homepage / Smartphone  de

Autor: Guido L.
Besucht 968, Followers 1, Geteilt 0  

Hi Zusammen,

ich stehe vor folgendem und wahrscheinlich einfach zu lösendem Problem. Daher bitte ich um euren Rat.

www.hand-kunst-werk.com & www.guidolautsch.com

Auf beiden URLs ist das kleine Logo oben links auf den einzelnen Seiten (nicht das große auf Home) sehr verpixelt. D.h. wenn man es am Smartphone vergrößert sieht es nicht besonders schön aus. Ich habe es als Bild in einem Textfeld eingefügt. Eigentlich wäre eine Vektordatei am besten. Allerdings habe ich eine recht alte Version und kann dazu nichts finden.

Kann mir vielleicht jemand einen Tip geben wie ich das Logo richtig scharf bekomme? Gibt es vielleicht ein Zusatzobjekt im Marketplace?

Besten Dank vorab und viele Grüße,

Guido

Gepostet am
25 ANTWORTEN
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Das "Original" Bild (wenn ich es mir runterlade) ist sehr verpickselt und in einem Text-Objekt als PNG eingefügt.

Am besten wäre es als jpg Bild und mit hoher Auflösung speichern und dann in einem Bild-Objekt einfügen wäre die ideale Lösung!  Das auf der Startseite ist jedenfalls ein jpg und richtig eingebunden und deshalb "scharf"!

Mehr lesen
Gepostet am von Andreas S.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Versuche mal das Bild einzubinden...

Mehr lesen
Gepostet am von Andreas S.
Guido L.
Guido L.
User
Autor

Hi Andreas, vielen Dank. Ich geh gleich mal dran und versuche es an der englischen Seite.

Mehr lesen
Gepostet am von Guido L.
Guido L.
Guido L.
User
Autor

https://www.guidolautsch.com/car-ring-gallery.html

Der Effekt ist der gleiche. Zudem kann ich das Logo und den Text nicht nebeneinandersetzen und ganz links platzieren. Mittig oben wäre ok, aber leider auch eingefügtes Bild unscharf.

Mehr lesen
Gepostet am von Guido L.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Besser geht es nicht, denn das Originalbild ist nicht hochauflösend und wenn man deines verkleinert, dann verpickselt es sich so stark!

Mehr lesen
Gepostet am von Andreas S.
Daniel W.
Daniel W.
User
Nutzer des Monats EN

Was wäre, wenn man das Bild in groß als HTML-Code einfügt und es per HTML-Code verkleinert?

Mehr lesen
Gepostet am von Daniel W.
Guido L.
Guido L.
User
Autor

Hi Daniel, HTML-Codes kann man einfügen. Von daher wäre das vielleicht eine Möglichkeit. Leider habe ich sowas noch nie gemacht.

Mehr lesen
Gepostet am von Guido L.
J. M. B.
J. M. B.
User

Ich würde dir empfehlen, das Logo als Vektorgrafik (.svg) einzubinden. Sollte dir eine solche noch nicht vorliegen, lass sie dir von einem Grafiker erstellen. Dein Logo ist so schön schlicht gehalten, dass das eine Sache von max. einer Arbeitsstunde sein sollte.

Vektordateien haben den großen Vorteil, dass sie beliebig skalierbar sind, ohne an Qualität einzubüßen (die Darstellung wird quasi on the fly vom Browser errechnet und sieht daher bei jeder Auflösung knackscharf aus).

Mehr lesen
Gepostet am von J. M. B.
Guido L.
Guido L.
User
Autor

Hi J.M.B., vielen Dank auch für deine Nachricht. Das wurde mir tatsächlich auch so empfohlen. Ich habe dann das Logo als PDF umgewandelt (ist ja auch eine Vektor) aber das ging nicht zum einfügen. Weißt du zufällig, wie ich die Vektordatei dann einbinden kann? In einem Texfeld oder als Bild ging es nicht. 

Mehr lesen
Gepostet am von Guido L.
J. M. B.
J. M. B.
User

Hi Guido

Ein PDF kann zwar Vektorgrafiken enthalten, die Konvertierung eines Bildes in ein PDF bettet dieses jedoch lediglich ein, eine Vektorisierung erfolgt dadurch nicht!

Um dein Logo ins benötigte SVG-Format zu überführen, muss es in einem vektorbasierten Programm wie Illustrator oder Inkscape geöffnet und dort mit sog. Pfaden nachgezeichnet werden. Alternativ gibt es auch Online-Tools wie dieses hier, die das automatisch erledigen (wenn auch nicht ganz so akkurat, wie das ein Grafiker könnte).

So oder so erhältst du am Ende des Vorgangs eine SVG-Datei, die du ganz einfach über das Bildobjekt in WebSiteX5 auswählen und einbinden könntest.
Oder du öffnest die Vektordatei zuerst in einem Texteditor, kopierst den angezeigten Quellcode und fügst diesen in das HTML-Objekt in X5 ein; auch dann wird dein Logo angezeigt werden – und du könntest es zudem per CSS weiter manipulieren (z.B. was die Größe, Farbe oder exakte Position betrifft).

Good Luck!

JMB

Mehr lesen
Gepostet am von J. M. B.
Guido L.
Guido L.
User
Autor

Vielen Dank erneut für deine ausführliche Antwort und deine Zeit.

Ich habe nun das Logo von einem grafiker ändern lassen. Allerdings kann ich es nicht einfügen. Wenn ich es als Bild oder im Textfeld einfügen möchte, wird es gar nicht als als Möglichkeit vorgeschlagen. D.h. Website erkennt nur JPG Dateien, alles andere wird ausgeblendet.

Ich habe das Logo in folgenden Formaten bekommen:

Mehr lesen
Gepostet am von Guido L.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Du solltest in deinem Windows die "DAteiendungen" sichtbar machen, damit wir sehen welche Dateien du bekommen hast. Anleitung im Internet suchen.

Mehr lesen
Gepostet am von Andreas S.
Guido L.
Guido L.
User
Autor

Also das Microsoft Edge HTML Document ist die .svg Datei

Mehr lesen
Gepostet am von Guido L.
Franz-Josef H.
Franz-Josef H.
Moderator

Ein ähnliches Problem wurd hier schon mal behandelt. Ob die Lösung gewirkthat hat der damalige Autor aber nicht vermerkt...

Mehr lesen
Gepostet am von Franz-Josef H.
Guido L.
Guido L.
User
Autor

Danke ich schau mal.

Mehr lesen
Gepostet am von Guido L.
J. M. B.
J. M. B.
User

Stopp, halt, gemach, warte! wink

Schön, dass dir dein Logo nun als Vektorgrafik vorliegt, aber vergiss die Einbettung mittels Verlinkung, es geht wirklich ganz einfach!

Guido L.
Ich habe nun das Logo von einem grafiker ändern lassen. Allerdings kann ich es nicht einfügen. Wenn ich es als Bild oder im Textfeld einfügen möchte, wird es gar nicht als als Möglichkeit vorgeschlagen.

Das liegt daran, dass WebSiteX5 die direkte Integration von SVG noch nicht lange beherrscht und man offenbar vergessen hat dieses Dateiformat in den Auswahldialog zu integrieren.undecided Aber: Du kannst das ganz leicht ändern, indem du im Bild-Objekt vor dem Klick auf das Ordnersymboldie Strg-Taste drückst, dann öffnet sich nämlich der Systemdialog und dieser zeigt auch SVG-Grafiken an!

Vorausgesetzt, du nutzt die aktuelle Programmversion, musst du die Datei jetzt nur noch auswählen und sie wird wie ein JPEG oder PNG ganz normal angezeigt:

SVG-Auswahl im Bild-Objekt


Solltest du zusätzliche Formatierungsmöglichkeiten benötigen, kannst du wie schon gesagt auch das HTML-Code-Objekt nutzen und den Quelltext der SVG-Grafik direkt eintragen (dafür die Datei wie oben beschrieben zuvor in einem Texteditor öffnen, z.B. in Notepad++):

SVG-Quellcode im HTML-Code-Objekt einfügen


Im Anschluss besteht außerdem die Möglichkeit das Aussehen, die Größe usw. via CSS zu verfeinern:

SVG im HTML-Code-Objekt per CSS ansteuern


Ich hoffe, das hilft dir weiter. Bei weiteren Fragen: fragen! smile

Mehr lesen
Gepostet am von J. M. B.
Guido L.
Guido L.
User
Autor

Hey danke für den tollen Tipp. Leider ist meine Version schon recht alt. Vielleicht besorge ich mir diese aber noch und werden dann alles umsetzen. Leider hatte ich mit HTML noch nie etwas gemacht und bräuchte da eine sehr detaillierte Anleitung. Aber das sprengt wahrscheinlich den Rahmen.

Mehr lesen
Gepostet am von Guido L.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Versuche mal das mit der SVG Datei

Wenn du auf der Seite ein HTML-Objekt eingefügt hast, dann kannst du dieses verwenden um die DAtei automatisch hochzuladen. Beim Reiter "Erweitert" kannst du unten die svg Datei z.B. in den Ordner "bilder" laden.  Wenn du kein HTML-Objekt eingefügt hast, dann gehe unter "1" Statistik& Code beim Reiter "Code" kannst du auch unten die Datei hochladen.

Dann gehst du in das Text-Objekt und gibst folgenden Code rein.

<img src="bilder/name.svg" />

Dann aktivierst du im Text-Objekt oben den HTML-Code mit dem <>Button!  Den "Namen" musst du natürlich mit deinem Dateinamen ersetzen und wenn du ein anderes Verzeichnis genommen hast z.B. "files" gelassen hast, musst du es auch ausbessern.

Mehr lesen
Gepostet am von Andreas S.
Guido L.
Guido L.
User
Autor

Was genau muss zwischen die "Anführungsstiche"? Der Ornerpfad oder nur der Name?

Mehr lesen
Gepostet am von Guido L.
Guido L.
Guido L.
User
Autor

mit dem Namen wird jedenfalls kein Bild dargestellt. 

Mehr lesen
Gepostet am von Guido L.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Es sollten keine Leerzeichnen und Sonderzeichen im Dateinamen sein!

Wenn dann die Datei umbenennen in g_logo_edit.svg  oder glogoedit.svg

dann wäre der Pfad "bilder/g_logo_edit.svg"  oder "bilder/glogoedit.svg"

Mehr lesen
Gepostet am von Andreas S.
Guido L.
Guido L.
User
Autor

Oh man, ich probiere hier rum aber blicke ich nicht so richtig sealed

Da wäre der Dateiname und der Pfard. Dann muß doch in die Klammern:

<img src="C:\Benutzer\guido\Bilder\GLlogo.svg" />   oder nicht?

Jedenfalls zeigt er kein Bild an in der vorschau.

Mehr lesen
Gepostet am von Guido L.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Kann deine Website auf deinen PC zugreifen?  Das kann wahrscheinlich nur ein Blackhat!

Deshalb habe ich dir auch geschrieben, dass du die Datei vorher einbinden musst in dein Projekt über den Codeteil.  Deshalb ist das Bild dann nur im Ordner "bilder" drinnen!

Mehr lesen
Gepostet am von Andreas S.
Guido L.
Guido L.
User
Autor

Hi, zusammen. Nochmals Danke für eure Tipps. Vorerst gibt es wohl erstmal keine direkte Lösung. Aber ich denke ich kann es erstmal so lassen und gut damit leben wie es ist.

Mehr lesen
Gepostet am von Guido L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

(It > De) ... Ihr Logo ist nicht schlecht, aber es ist im JPG-Format; ... es würde besser aussehen, wenn es in PNG wäre und in den Originalgrößen verwendet würde ...
... da es sich um ein sehr einfaches und stilisiertes Logo handelt, wäre es sehr einfach, es im SVG-Vektorformat zu erstellen ...
...Sie können es aber auch so lassen, das, was Sie jetzt verwenden, ist gut genug:

.

ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪