Verpixeltes Logo auf Homepage / Smartphone
Autor: Guido L.
Visited 971,
Followers 1,
Udostępniony 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
Posted on the
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"!
Versuche mal das Bild einzubinden...
Autor
Hi Andreas, vielen Dank. Ich geh gleich mal dran und versuche es an der englischen Seite.
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.
Besser geht es nicht, denn das Originalbild ist nicht hochauflösend und wenn man deines verkleinert, dann verpickselt es sich so stark!
Was wäre, wenn man das Bild in groß als HTML-Code einfügt und es per HTML-Code verkleinert?
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.
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).
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.
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
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:
Du solltest in deinem Windows die "DAteiendungen" sichtbar machen, damit wir sehen welche Dateien du bekommen hast. Anleitung im Internet suchen.
Autor
Also das Microsoft Edge HTML Document ist die .svg Datei
Ein ähnliches Problem wurd hier schon mal behandelt. Ob die Lösung gewirkthat hat der damalige Autor aber nicht vermerkt...
Autor
Danke ich schau mal.
Stopp, halt, gemach, warte!
Schön, dass dir dein Logo nun als Vektorgrafik vorliegt, aber vergiss die Einbettung mittels Verlinkung, es geht wirklich ganz einfach!
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. 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:
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++):
Im Anschluss besteht außerdem die Möglichkeit das Aussehen, die Größe usw. via CSS zu verfeinern:
Ich hoffe, das hilft dir weiter. Bei weiteren Fragen: fragen!
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.
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.
Autor
Was genau muss zwischen die "Anführungsstiche"? Der Ornerpfad oder nur der Name?
Autor
mit dem Namen wird jedenfalls kein Bild dargestellt.
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"
Autor
Oh man, ich probiere hier rum aber blicke ich nicht so richtig
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.
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!
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.
(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
.