4K-Monitor und Webdesigner

Sardinien schrieb am 18.01.2020 um 08:27 Uhr

Hallo zusammen,

ich habe mit dem Webdesigner eine Webseite aufgebaut, die derzeit auf einer Seitengröße von 1920 x 1080 px (Full HD) basiert. Die Seite soll für eine Messe auf einem 32 Zoll 4K-Monitor präsentiert werden, wird aber nur lokal auf dem Rechner vor Ort exportiert und über die Index-Seite im Browser von der Festplatte aus geöffnet (also keine Veröffentlichung auf einem Webserver). Es gibt nur Text, Bilder und ein Video.

Noch konnte ich leider nicht testen, wie die Seite auf dem 4K-Monitor aussieht, wenn dieser auch durch eine 4K-fähige Grafikkarte angesteuert wird. Kann mir jemand sagen, wonach sich der Webdesigner beim Export der Bilder in Bezug auf die Auflösung der Bilder richtet? 2. Frage wäre: bleibt in der Webdesigner-Datei immer die volle Auflösung der Bilder vorhanden, auch wenn die Seite bereits einmal exportiert wurde oder wird schon beim Import der Dateien etwas runtergerechnet?

Hintergrund der Frage ist, ob sich ein Umbau der Seite auf das Pixelformat des 4K-Monitors lohnen würde, um jegliche Skalierungen zu vermeiden. Das Original-Fotomaterial ist zum Teil leider nicht besonders gut und ich muss im Vorfeld genau sehen, ob es noch brauchbar ist.

LG,
Sardinien

Kommentare

BeRo schrieb am 18.01.2020 um 10:07 Uhr

[...] bleibt in der Webdesigner-Datei immer die volle Auflösung der Bilder vorhanden [...]

Nein.

Der WD ist ja für die Erstellung von Webseiten konzipiert, die für alle möglichen Geräte- und über alle möglichen Wege auf einem Display angezeigt werden können. Eine der Prioritäten ist dabei das Datenvolumen, das so klein wie möglich gehalten wird. Damit ist klar, dass die Bildqualität nicht das Maximum haben wird... 🤓

[...] Hintergrund der Frage ist, ob sich ein Umbau der Seite auf das Pixelformat des 4K-Monitors lohnen würde [...]

Das kannst Du versuchen, denn es gibt eine Möglichkeit, den WD dazu zu bringen, die eingebauten Bilder in der Original Auflösung zu verarbeiten und anzuzeigen.
Das geht, wenn Du die Bilder nicht importierst sondern referenzierst. Du legst dazu einfach einen Link auf eine extern abgelegte Bilddatei, die der WD dann in der maximal möglichen Qualität anzeigt.

Löst das Dein Problem?

Sardinien schrieb am 18.01.2020 um 14:37 Uhr

Ich glaube, noch nicht so richtig. Wenn ich die bereits vorhandene Datei (Seitenbreite 1920 px) jetzt nehme und auf die 4K-Pixelgröße vergrößere, muss ich ja die bereits positionierten Fotos auch vergrößern. Wenn die schon beim Import klein gerechnet wurden, würde ich dann damit ja die Bildqualität verschlechtern. Ich dachte bisher immer, die Bilder werden erst beim Export als Webseite runtergerechnet. Sprich: in der WD-Seite werden nur verlinkte Vorschaubilder verwendet (ähnlich InDesign) und beim Export werden diese runtergerechnet und zusammengestellt. Das würde heißen, ich muss die komplette Webseite neu aufbauen? Und vor allem - bringt das optisch etwas? Mir ist nicht klar, ob es schon beim Import der Bilder einen Bezug zur angelegten Seitengröße gibt. Vielleicht wird es für mich klarer, wenn ich die bisherige Seite mal über 4K sehen kann. Leider kann man seit dem letzten Windows-Update meines Arbeitgebers derzeit die Auflösung nicht umstellen. Das System-Fenster lässt sich nicht mehr öffnen. Sch...Updates. 😖

Mir ist auch nicht klar, wie das Referenzieren genau funktionieren soll. Ich benötige doch zur Gestaltung die Ansicht des Bildes. Das kriege ich gerade gedanklich nicht klar.

BeRo schrieb am 18.01.2020 um 15:10 Uhr

[...] Wenn die schon beim Import klein gerechnet wurden, würde ich dann damit ja die Bildqualität verschlechtern [...]

Richtig, aber die Bilder die Du in der max. Auflösung sehen willst, werden nach einem Klick auf die Vorschau durch die extern liegenden Bilder ersetzt und dann mit der dort vorhandenen Auflösung gezeigt.

Beispiel:

Vorschau in der Website:

HiRes Bild nach dem 1. Klick

HiRes Bild nach dem 2. Klick

Im WD Editor sieht die Vorbereitung so aus:

Das Thema haben wir im Forum aber schon öfter behandelt, z. B. hier (klick). Da wird ein etwas anderes Verfahren benutzt, mit dem solche Bilder in einem Platzhalter angezeigt werden, der beliebig groß angelegt werden kann.

Schau's Dir mal an und wenn dann noch Fragen offen sind, einfach wieder melden 👍

Sardinien schrieb am 18.01.2020 um 15:22 Uhr

Top, danke Dir! Dann werde ich mir den Textbeitrag mal ansehen. Wenn ich Montag noch einen Rechner auftreiben kann, der beim letzten Update nicht im Netz hing, kann ich dann auch direkt die Vergleiche in 4k und FullHD sehen. Vielleicht reicht die Full-HD-Variante ja auch schon aus.

Bin gespannt. Wie immer ganz herzlichen Dank für die schnell Info.

LG, Sardinien

Sardinien schrieb am 19.01.2020 um 07:40 Uhr

Moin BeRo,

da habe ich gestern aber wirklich auf dem Schlauch gestanden. Die Methode kenne ich natürlich. Damit kann man ja z.B. ein PDF zum Download bereitstellen. Für eine Präsentation finde ich das aber nicht so geeignet.

Ich habe noch einmal mit einem einzelnen Foto getestet, groß und klein gezogen und dazwischen immer wieder die Seite exportiert. Ich kann bei einem PopUp keinen Qualitätsunterschied erkennen, auch wenn man das Bild nachträglich noch verändert hat. Dann hilft es nichts...ich muss erst einmal sehen, wie die Seite bisher in 4K aussieht.

Bleibt noch ein Problem: die Seite läuft ja nicht in einer Webumgebung. Bei den PopUps kommen dann Info-Texte zur Bildhandhabung in deutscher Sprache, Umlaute und ß werden durch ? ersetzt. Meine Idee wäre gerade nur: falls es bei der Installation auch eine englische Sprachvariante gibt, wäre das vermutlich kein Thema mehr.

Schönen Sonntag!

marboe schrieb am 19.01.2020 um 12:40 Uhr

Bleibt noch ein Problem: die Seite läuft ja nicht in einer Webumgebung. Bei den PopUps kommen dann Info-Texte zur Bildhandhabung in deutscher Sprache, Umlaute und ß werden durch ? ersetzt.

Dieser Bug ist leider schon sehr sehr alt.
Es wurde schon mehrfach weitergeleitet - bisher leider ohne Erfolg. Ich hatte sogar schon Extradateien angefertigt und an Magix geschickt.
Dieses "Problem" bleibt dir also mit Sicherheit erhalten. Das ist ein Codierungsproblem; kein Sprachproblem.
VG Marboe

Sardinien schrieb am 19.01.2020 um 16:58 Uhr

Ich hatte es befürchtet. Schade...macht sich nicht gut. Da die Präsentation in Indien laufen wird und auf der Messe wohl überwiegend eh nur englisch gesprochen wird...vielleicht das kleinste Übel. 😉

Aber trotzdem vielen Dank für die Info!

LG, Sardinien

BeRo schrieb am 19.01.2020 um 18:46 Uhr

[...] Ich kann bei einem PopUp keinen Qualitätsunterschied erkennen, auch wenn man das Bild nachträglich noch verändert hat. [...]

Wenn Du das Bild so eingebunden hast, wie oben beschrieben, dann siehst Du die HiRes Variante erst nach einem Klick auf das popup Bild.
Soll die hoch aufgelöste Version schon beim Öffnen der Seite zu sehen sein, was bei einer Präsentation ja sinnvoll ist, dann musst Du das Bild per iframe in einen Platzhalter einbinden. Dabei kann der Platzhalter natürlich auch auf einer popup Ebene angelegt werden.

Ganz normal, also ohne popup kann das so aussehen:

Dazu kannst Du den u. a. iframe Code übernehmen, wenn Du den Pfad- und den Namen anpasst.

<iframe src="./index_htm_files/Doppelmord.JPG" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

[...] Da die Präsentation in Indien laufen wird und auf der Messe wohl überwiegend eh nur englisch gesprochen wird... [...]

Vielleicht ist noch nicht alles verloren. 😊
Für das Umlaute Problem bei popup Ebenen hatten wir vor 2 Jahren schon einen Workaround gefunden, den Du hier nachlesen kannst (klick).
Die da als Ursache des Problems erkannte "highslide.js" Datei kannst Du alternativ zu der geschilderten Reparaturmethode auch in die englische Version verwandeln, wenn Du den "lang:" Bereich aus der englischen Version übernimmst.

So sieht das aktuell in der Datei "highslide.js" aus:

Wenn Du den vorhandenen, deutschsprachigen Text gegen den u. a. Text austauschst, sollte das Problem gelöst sein.

lang : {
    cssDirection: 'ltr',
    loadingText : 'Loading...',
    loadingTitle : 'Click to cancel',
    focusTitle : 'Click to bring to front',
    fullExpandTitle : 'Expand to actual size (f)',
    creditsText : 'Powered by <i>Highslide JS</i>',
    creditsTitle : 'Go to the Highslide JS homepage',
    previousText : 'Previous',
    nextText : 'Next',
    moveText : 'Move',
    closeText : 'Close',
    closeTitle : 'Close (esc)',
    resizeTitle : 'Resize',
    playText : 'Play',
    playTitle : 'Play slideshow (spacebar)',
    pauseText : 'Pause',
    pauseTitle : 'Pause slideshow (spacebar)',
    previousTitle : 'Previous (arrow left)',
    nextTitle : 'Next (arrow right)',
    moveTitle : 'Move',
    fullExpandText : '1:1',
    number: 'Image %1 of %2',
    restoreTitle : 'Click to close image, click and drag to move. Use arrow keys for next and previous.'
},

Die Vorgehensweise habe ich in dem oben verlinkten Thread erklärt.

Einen Versuch ist es wert. 😉

Sardinien schrieb am 22.01.2020 um 20:03 Uhr

Ohje, auf die Idee mit der iframe- Einbindung hätte ich auch selber kommen können. Zur Not tausche ich darüber noch ein paar Bilder aus. Habe schon 30 Seiten fertig, das läuft zeitlich alles etwas aus dem Ruder.

Der Tipp mit dem Austausch der englischen Texte ist genial. Ich habe noch nie nachgeschaut, was bei der Installation eigentlich alles so an Dateien entsteht. Wieso schafft es magix denn nicht, eine so simple Änderung als Standard umzusetzen? Ersetzte Umlaute sind doch für eine Software kein gutes Aushängeschild.

Wir getestet! Wenn wir euch Tüftler hier nicht hätten...

Vielen Dank für die tolle Hilfe!