HTML: Low-Res-Image-Version als Base64-Fallback senden

Question

Ist es möglich, ein HTML img-Tag mit einer URL-Quelle und eine Low-Res-Version Base-64 encoded zu haben?

Mein Anwendungsfall ist a push message an eine Anwendung gesendet, die eine schlechte Internetverbindung haben könnte. Die Push-Nachricht enthält HTML-Text, der auf dem mobilen Gerät innerhalb einer App angezeigt werden muss webview.

Die Nutzlastgröße einer Push-Nachricht ist auf 4k begrenzt. Die Metadaten und HTML nehmen ungefähr 1.5k, also ich habe ungefähr 2.k frei.

Wenn ich eine minimierte Version des Bildes schicken könnte, kann ich die Bildgröße auf 2,5k reduzieren und es als Inline senden src:

, die wie ein ziemlich gutes Platzhalter scheint, wenn sie gedehnt Narr Größe:

Und dann kann der Benutzer einige Sekunden, bis die volle Bild Lasten warten:

Gibt es eine standardisierte Möglichkeit einen Link auf die hochauflösende Version eines Inline-low-res eines HTML-Bild und senden senden geladen werden, wenn die Verbindung es erlaubt?

Answer 1

Ich habe eine Teillösung (funktioniert im Browser, aber nicht so gut in E-Mail-Client). Ich stelle die base64-Version als Hintergrund für das div ein und innerhalb der div stelle ich den Link auf die hi-res-Datei. Ich habe auch einen Inline-Code eingefügt, um das beschädigte Bild auszublenden, wenn die Datei nicht verfügbar ist.

<div width="500" height="375" style="width: 500px; height: 375px; background-size: 100% 100%; background-repeat: no-repeat; background-image: url('data:image/jpeg;base64,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');"> 
    <img width="500" height="375" style="width: 500px; height: 375px;" src="http://i.stack.imgur.com/VRBmC.jpg" onerror="this.style.display='none'; this.onerror = null;"> 
</div> 

Der E-Mail-Client-Support ist jedoch sehr begrenzt. Viele von ihnen strippen das base64-Bild, also kein Fallback-Bild, wenn das verlinkte Bild nicht geladen wird. Sie können mehr herausfinden HERE. Javascript-Unterstützung ist noch schlimmer (ich habe gelesen, dass Outlook & OE könnte es unterstützen), so dass das gebrochene Bild vor dem Fallback-Bild schließlich zeigt.

Ich habe nur auf Google Mail (kein Fallback Bild) und auf Thunderbird (kein Javascript) getestet, aber Sie haben vielleicht mehr Glück.

Meine Lösung basiert auf THIS und THIS Antwort, bitte upvote sie auch.

Alternativ können Sie Javascript verwenden, um das Bild nur zu laden, wenn es verfügbar ist, also würde es kein gebrochenes Bild geben, aber mit so schlechter js Unterstützung wie wir, würde das hochauflösende Bild sehr selten laden.

Ich würde wirklich gerne eine voll funktionsfähige Lösung sehen, oder eine Verbesserung gegenüber meiner.

Answer 2

Es gibt ein schönes Beispiel, das jquery oder reines Javascript verwendet, um 2 Fotos zu laden, (paralleles Laden) kann es Ihnen helfen, nicht sicher darüber: |

werfen Sie einen Blick darauf here. Sie verwenden nicht spezielle HTML-Tags, um es zu tun ... nur Javascript. Hoffe es hilft.