zu geringe Bildauflösung auf Smartphone

  • tux4u2

    (@tux4u2)


    vor 3 Jahren, 9 Monaten

    Hallo,
    ich erzeuge über javascript eine Bildergalerie, wobei jedes Bild in einem quadratischen „Diarahmen“ von 10em steckt. Beim Anklicken eines der Bilder wird ein bildschirmfüllender Rahmen überlagert, in dem das angeklickte Bild ebenfalls (fast) bildschirmfüllend dargestellt wird. Mittels Mausrad kann man ins Bild hineinzoomen und mit gedrückter Maustaste den Ausschnitt verschieben. Das Ganze habe ich responsiv gestaltet, so dass sich der Rahmen immer der jeweiligen Bildschirmbreite und -höhe anpasst. Die Original-Bilder sind meist 2000px oder größer. Der „src“-Link zeigt immer auf das Originalbild.

    Sobald ich nun auf dem Smartphone die Einzelbilddarstellung im Rahmen aktiviere (faktisch durch Nutzung von canvas, das den src-Link verwendet), wird das Bild offenbar in der (geringen) Auflösung übernommen, die zur Darstellung im Diarahmen der Bildergalerie ausreichte. Ein nachträgliches Hineinzoomen (hier nicht per Mausrad, sondern wieder über die 2-Finger-Bewegung) zeigt ein solch schlechtes Bild, das man lieber darauf verzichtet. Die Bilder in der Galerie (von denen canvas das src-Attribut übernimmt) werden aber mit maximaler Auflösung geladen, denn mit dem 2-Finger-Zoom kann man alle Details erkennen (wobei es den Anschein hat, dass das Bild sukkzessive in höheren Auflösungen nachgeladen wird).

    Interessanterweise bekommt man mit einem Browser auf einem PC (Firefox) und der dortigen Simulation einer Smartphone-Darstellung immer das Einzelbild in maximaler Auflösung. Es ist also keine echte Smartphone-Simulation.

    Frage: wie kann ich WordPress überreden, dass nicht nur in der Bildergalerie, sondern auch im canvas der 2-Finger-zoom das Originalbild verwendet?

    Oder als Notnagel: wie kann ich programmatisch die (offenbar mögliche) Desktop-Darstellung fürs Smartphone erzwingen? Denn dort ist das Bild in Maximalauflösung verfügbar.

    Danke im Voraus für Eure Hilfe.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 5 Antworten – 1 bis 5 (von insgesamt 5)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 3 Jahren, 9 Monaten

    Die Bilder in der Galerie (von denen canvas das src-Attribut übernimmt) werden aber mit maximaler Auflösung geladen, denn mit dem 2-Finger-Zoom kann man alle Details erkennen (wobei es den Anschein hat, dass das Bild sukkzessive in höheren Auflösungen nachgeladen wird).

    Kann ich so in Firefox/Mac nicht bestätigen. Ich bekomme bereit bei geringer Vergrößerung ein unscharfes Bild angezeigt, bei stärkerer Vergrößerung arg häßliche JPEG-Artefakte:

    Screenshot Einstellungen
    (zum Vergrößern anklicken)

    Ansonsten hast du dein Problem zwar gut beschrieben, aber ohne einen Blick in den Code bleibt das trotzdem schwer nachvollziehbar.

    Wahrscheinlich bist du mit konkreten Fragen zur Programmierung auch bei Stackexchange besser aufgehoben. Für einen kostenlosen Anwender-Support sprengt das (zumindest für mich) den zeitlichen Rahmen.

    Thread-Starter tux4u2

    (@tux4u2)

    vor 3 Jahren, 9 Monaten

    Danke für Deine Antwort. Die von Dir festgestellte Unschärfe im Desktop-Browser ist m.E. darauf zurückzuführen, dass Du schon mehr als 100% ins Bild hineingezoomt hast. Vielleicht ist aber auch die von WordPress offenbar beim Media-Upload verwendete Reduzierung der Bildqualität verantwortlich.

    Nichtsdestotrotz ist die Auflösung auf dem Smartphone nochmals um Faktoren schlechter – was meine Frage ausgelöst hat.

    Ich würde mich freuen, wenn jemand das Verhalten von WordPress beim 2-Finger-zoom auf dem Smartphone beschreiben könnte, denn in der Bildergalerie bkomme ich ja die erwartete Darstellung des Originalbildes.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 3 Jahren, 9 Monaten

    Ich weiß nicht, ob dir das hilft, aber mit Firefox/Android wird das Foto „Handschuh auf Stock“ schon in Originalgröße mit heftigen Artefakten angezeigt. Die Vergrößerung des Bildes klappt … man sieht die Treppenstufen der Artefakte viel deutlicher.

    Die von Dir festgestellte Unschärfe im Desktop-Browser ist m.E. darauf zurückzuführen, dass Du schon mehr als 100% ins Bild hineingezoomt hast.

    Ja, sobald ich anfange, das Bild zu zoomen, wird es hochskaliert und sieht folglich erst unscharf und später verpixelt aus. Allerdings ist das gleich ab der ersten „Zoomstufe“ und nicht erst nach Überschreitung einer bestimmten Grenze.

    Thread-Starter tux4u2

    (@tux4u2)

    vor 3 Jahren, 9 Monaten

    Ich kann mit Firefox/Linux beim Bild „Entsorgt“ (Kaffeebecher) beim Zoom-in selbst die aufgedruckte Telefonnummer gut lesen. Auf meinem Handy (S10e) endet bei der Galeriedarstellung irgendwann der 2-Finger-zoom, so dass man die Telefonnummer nicht lesen kann. Allerdings kann man „VORSICHT HEISS“ am oberen Rand noch lesen, nicht jedoch nach dem Anklicken in der Einzelbildanzeige.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 3 Jahren, 9 Monaten

    Das kann ich so in etwa bestätigen.

    Wie gesagt: ich kenne deinen Code nicht.

    WordPress bindet Bilder üblicherweise mit dem <figure>-Tag ein und bietet so für unterschiedliche Displays auch unterschiedliche Auflösungen an, was Bandbreite spart. Das könnte ein Grund für die unterschiedliche Darstellung sein.

Ansicht von 5 Antworten – 1 bis 5 (von insgesamt 5)
  • Das Thema „zu geringe Bildauflösung auf Smartphone“ ist für neue Antworten geschlossen.