0 votes
in SoSci Survey (dt.) by s171605 (530 points)

Hallo,

ich habe hier Bilder hochgeladen, mit unterschiedlichen Methoden:

Das erste Bild habe ich mit Gimp schärfer gemacht und skaliert und dann mittels drag and drop eingefügt.

Das zweit Bild lediglich verkleinert ohne es zu schärfen.
Das dritte Bild habe ich auf Sosci mittel html code eingefügt und die Größen angepasst.

https://www.soscisurvey.de/CrowdWork/?act=yXDAWpturjfxkzYLAghhNELQ

Das Problem: Je nachdem ob von welchem Bildschirm bzw. welchem Gerät aus ich die Bilder öffne werden diese scharf oder verschwommen angezeigt.

Was kann ich hiergegen machen, sodass diese immer gleich scharf dargestellt werden?

Danke und LG

1 Answer

0 votes
by SoSci Survey (302k points)

Je nachdem ob von welchem Bildschirm bzw. welchem Gerät aus ich die Bilder öffne werden diese scharf oder verschwommen angezeigt.

Willkommen im Internet :)

Die besten Chancen auf eine scharfe Darstellung haben Sie, wenn Sie das Bild in 4-facher Auflösung hochladen (also exakt 4-mal Breite und Höhe). Dann werden Retina-Displays 1:1 ausgenutzt und alle andere können sauber skalieren. Aber es wirkt (!) nach dem Skalieren wahrscheinlich trotzdem nicht so scharf als wenn der Texte direkt pixelweise umgesetzt wird.

Sie können die Qualität noch geringfügig erhöhen, wenn Sie beim Erzeugen des Bildes darauf achten, dass dort keien Subpixel-Optimierung betrieben wird. Also wirklich exportieren, kein Screenshot.

sodass diese immer gleich scharf dargestellt werden?

Eine wirklich einheitliche Darstellung können Sie nur gewährleisten, wenn Sie Ihre Teilnehmer:innen mit einheitlichen Bildschirmen ausstatten und den Zoom im Browser sperren.

Weiterhin gibt es noch die Möglichkeit, dass Sie nicht mit Bildern arbeiten, sondern die Texte als Texte einbinden und per HTML formatieren. Dann hat der Browser die optimale Grundlage für eine möglichst scharfe Darstellung.

by s171605 (530 points)
Was genau meinen Sie mit 4-mal Breite und Höhe? Das Bild würde ich dann mittels html verkleinern richtig?
by SoSci Survey (302k points)
Wenn Sie das Bild am Ende in der Größe 450x200 Pixeln darstellen möchten (Angabe im HTML-Tag), dann würden Sie das Original mit 1800x800 Pixeln abspeichern. Als Kompression ist bei Abbildungen PNG geeignet, nur bei Fotos ist JPG sinnvoll.
by s171605 (530 points)
Ich habe es jetzt mit html nachgebaut:

https://www.soscisurvey.de/CrowdWork/?act=RlUICos95OiL6759M0j53cXt

Wie kann ich hier den Abstand zwischen dem Profilbild und dem Text darunter verringern? Zusätzlich wollte ich mittig neben dem Profilbild den Namen dazuschreiben?

Vielen Dank für die Hilfe!
by SoSci Survey (302k points)
Das Profilbild ist im Moment so eingebunden:

<p><span style="font-size: 36px;"><span style="color: rgb(0, 168, 133); font-family: Times; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline; !important;"></span></span></p>

Wenn Sie kein <p> sondern ein <div> als äußeres Element verwenden, haben Sie schonmal weniger Abstand. Evtl. müssen Sie auch für das folgende Elemente ein <div> verwenden.
by s171605 (530 points)
Hat funktioniert danke!

Und bezüglich: Zusätzlich wollte ich mittig neben dem Profilbild den Namen dazuschreiben?
by SoSci Survey (302k points)
Wenn Sie den namen direkt nach dem </span> und vor dem </div> am Ende setzen, sollte er schonmal neben dem Kopf erscheinen. Mit vertical-align im <span>-Tag (da sollte eigentliches eines reichen, Sie haben das zwei) können Sie dann die vertikale Ausrichtung steuern. Mit padding auch Abstände.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...