WebSite X5Help Center

 
Guido L.
Guido L.
User

Verpixeltes Logo auf Homepage / Smartphone  de

Auteur : Guido L.
Visité 972, Followers 1, Partagé 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

Posté le
25 RéPONSES
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois 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"!

Lire plus
Posté le de Andreas S.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Versuche mal das Bild einzubinden...

Lire plus
Posté le de Andreas S.
Guido L.
Guido L.
User
Auteur

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

Lire plus
Posté le de Guido L.
Guido L.
Guido L.
User
Auteur

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.

Lire plus
Posté le de Guido L.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

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

Lire plus
Posté le de Andreas S.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois EN

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

Lire plus
Posté le de Daniel W.
Guido L.
Guido L.
User
Auteur

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

Lire plus
Posté le de 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).

Lire plus
Posté le de J. M. B.
Guido L.
Guido L.
User
Auteur

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. 

Lire plus
Posté le de 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

Lire plus
Posté le de J. M. B.
Guido L.
Guido L.
User
Auteur

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:

Lire plus
Posté le de Guido L.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

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

Lire plus
Posté le de Andreas S.
Guido L.
Guido L.
User
Auteur

Also das Microsoft Edge HTML Document ist die .svg Datei

Lire plus
Posté le de 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...

Lire plus
Posté le de Franz-Josef H.
Guido L.
Guido L.
User
Auteur

Danke ich schau mal.

Lire plus
Posté le de 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

Lire plus
Posté le de J. M. B.
Guido L.
Guido L.
User
Auteur

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.

Lire plus
Posté le de Guido L.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois 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.

Lire plus
Posté le de Andreas S.
Guido L.
Guido L.
User
Auteur

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

Lire plus
Posté le de Guido L.
Guido L.
Guido L.
User
Auteur

mit dem Namen wird jedenfalls kein Bild dargestellt. 

Lire plus
Posté le de Guido L.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois 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"

Lire plus
Posté le de Andreas S.
Guido L.
Guido L.
User
Auteur

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.

Lire plus
Posté le de Guido L.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois 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!

Lire plus
Posté le de Andreas S.
Guido L.
Guido L.
User
Auteur

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.

Lire plus
Posté le de 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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪