Bilder laden auf dem Smartphone manchmal nicht

Question

Liebes Support-Team,

ich habe in meinem Fragebogen einige Textbausteine, die auch Bilder enthalten (jeweils eine Schlagzeile mit Bild). Jeder dieser Textbausteine wird auf einer eigenen Seite angezeigt, die Seitenreihenfolge wird randomisiert. Am Laptop gibt es keine Probleme, aber wenn man den Fragebogen mit dem Smartphone bearbeitet, kommt es leider manchmal vor, dass einige Bilder nicht direkt geladen werden und stattdessen nur ein Platzhalter angezeigt wird. Wenn man die entsprechenden Seiten neu lädt, werden die Bilder geladen und korrekt angezeigt. Wie viele Bilder nicht korrekt geladen werden und welche Bilder betroffen sind, unterscheidet sich je nach Testdurchlauf. Haben Sie eine Idee, wie dieses Problem gelöst werden könnte?
Hier ist ein Pretest-Link zur ersten Seite mit Bild + Schlagzeile: https://www.soscisurvey.de/MA_psychology/?act=6r9xERtposku3IUIVEjAAk60

Liebe Grüße und vielen Dank im Voraus!

Answer 1

Schweirig zu sagen... ich kann hier mal typische Ursachen vorschlagen:

1) Die Bilder könnten zu groß sein (Dateigröße) und daher im ersten Anlauf nicht vollständig werden. Die Bilder, die ich mir im Pretest-Link angesehen habe, waren da aber unproblematisch.

2) Sie könnten die geschützt Dateiablage verwenden und ein Timingproblem haben. Allerdings wrden die Bilder ja direkt zu Beginn der Seite gezeigt und nicht erst nachträglich geladen. Also wahrschienlich auch keine Erklärung.

3) Das Smartphone hat ein generelles Netzwerkproblem.

Ich habe den Pretest-Link mal auf einem Android-Smartphone in Firefox getestet und konnte keine Ausfälle beobachten. Mit welchem Browser trat das Problem denn auf?

Comments

Vielen Dank für Ihre Antwort!
Ich habe Chrome auf einem Android-Smartphone benutzt. Zum Test habe ich mich gerade ein paar Mal in DuckDuckGo durchgeklickt und da ist das Problem nicht aufgetreten. In Chrome tritt es allerdings immer noch auf und ich habe den Eindruck, dass es davon abhängt, wie schnell ich mich durchklicke. Je schneller, desto mehr Bilder werden nicht richtig geladen.
Die Bildgrößen variieren zwischen 37,5 und 170 KB, das Problem tritt aber auch bei den kleineren Bildern auf. Alle Bilder liegen in der geschützten Dateiablage.

Hier ist der Code von einem der Textbausteine:
<div class="news-container">
    <img src="pro://Windraeder800x800.jpg" class="news-image">
    <div class="news-text">
        <h2>Energiewende in Deutschland geht voran</h2>
        <h1>Rund 60 Prozent des Stroms kamen 2024 aus erneuerbaren Energien</h1>
    </div>
</div>

<style>
    .news-container {
        display: flex;
        margin-bottom: 45px; /* Fügt den gewünschten Abstand nach unten hinzu */
    }

    .news-image {
        max-width: 33%;
        margin-right: 15px;
    }

    .news-text {
        text-align: left;
    }

    .news-text h1 {
        line-height: 1.2;
    }

    .news-text h2 {
        color: #FF0000;
    }

    @media (max-width: 600px) {
        .news-container {
            flex-direction: column;
        }

        .news-image {
            max-width: 50%;
            margin-right: 0;
            margin-bottom: 10px;
        }

        .news-text {
            width: 100%;
        }
    }
</style>

---

Der HTML-/CSS-Code sieht unauffällig aus. Ich denke nicht, dass er Probleme verursacht.

Ich habe den Pretest-Link gerade nochmal in Chrome auf einem Android-Smartphone getestet (so schnell ich konnte) und dabei keine fehlenden Bilder beobachten. Alle waren korrekt geladen.

Haben Sie mal versucht was passiert, wenn Sie den Cache des Browsers leeren?

Der nächste Schritt, um das Problem genauer zu untersuchen wäre, dass Sie Ihr Smartphone in den Developer-Modus versetzen, per USB mit dem Computer koppeln und den Chrome auf dem PC zum Debugging der verwenden. Dort würden sie dann sehen, aus welchen Gründen das Bild nicht angezeigt werden kann.

Die geschützte Dateiablage macht das Laden der Bilder ein klein wenig komplexer. Sie können optional testen, ob das Problem mit der regulären Dateiablage verschwindet.