ALternative zur 1px Grafik

[mixmastertobsi]

Hallo,

gibt es eine alternative zur 1px Grafik, bzw. zu base64? Wenn ich kein SRC in der Grafik verwende, ist es nicht w3c konform...

Es geht zum Beispiel um den Lazy-Loader...

[Auge]

Hallo

gibt es eine alternative zur 1px Grafik, bzw. zu base64? Wenn ich kein SRC in der Grafik verwende, ist es nicht w3c konform...

Wie willst du auch eine Grafik laden, ohne sie zu laden? Das macht für die Schreiberlinge einer Standards keinen Sinn.

Es geht zum Beispiel um den Lazy-Loader...

Kannst du das bitte etwas näher erläutern? Nach Lektüre des Wikipedia-Eintrags kann ich mir keine Verbindung der beiden Themen vorstellen.

Tschö, Auge

[mixmastertobsi]

OK - war wohl etwas ungenau ;)

Ein Beispiel <img src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' data-src='$image_normal' alt='$image_normal_title'/>

Wie könnte ich mir den base64 sparen, denn dieser kommt öfters vor...und wird ja nur ausgetauscht, sobald das Bild in den Sichtbereich kommt...

[Jörg Reinholz]

Moin!

Wie könnte ich mir den base64 sparen, denn dieser kommt öfters vor...und wird ja nur ausgetauscht, sobald das Bild in den Sichtbereich kommt...

Du willst DIR den base64 sparen? Die paar Byte?

Normalerweise muss man das nicht, weil Webseiten komprimiert übertragen werden. Hinsichtlich Deiner Frage bleibt also nur Dich zu fragen, WARUM Du das willst - weil nur das dann zum WIE führen kann. Also erkläre möglichst genau das WARUM.

Jörg Reinholz

[mixmastertobsi]

Also, wenn ich nun von diesen Bildern ca. 50 auf meiner Seite habe, sind es ein paar mehr Byte. Gibt es denn hier keine Lösung, ausser das mit dem base64 und eine Link-Grafik?

[Jörg Reinholz]

Moin!

Also, wenn ich nun von diesen Bildern ca. 50 auf meiner Seite habe, sind es ein paar mehr Byte. Gibt es denn hier keine Lösung, ausser das mit dem base64 und eine Link-Grafik?

fastix@trainer:~$ echo 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' | wc -c
83
fastix@trainer:~$ echo 83*50 | bc 
4150

Byte! Von denen bei der Übertragungskomprimierung noch der größte Teil verschwindet.

Jörg Reinholz

[Der Martin]

Hi,

Gibt es denn hier keine Lösung, ausser das mit dem base64 und eine Link-Grafik?

möglicherweise schon, aber ich habe immer noch nicht verstanden, für welches Problem - geschweige denn, was du mit einer 1x1px großen Grafik bezwecken willst. Vor vielleicht 15 Jahren oder so waren die mal "in", um damit dem Seitenlayout gewisse Mindestmaße zu geben. Aber das ist hoffentlich nicht dein Ansinnen.

Ähm, und was konkret meinst du mit einer Link-Grafik?

So long,
 Martin

[mixmastertobsi]

Um Grafiken dynamisch nachzuladen... WEnn ich src weglasse, funktioniert es zwar auch, aber dann schimpft der W3C validator

[Christian Kruse]

Hallo mixmastertobsi,

Um Grafiken dynamisch nachzuladen... WEnn ich src weglasse, funktioniert es zwar auch, aber dann schimpft der W3C validator

Dann erstelle das Element doch erst später mit document.createElement und hänge es in den DOM-Baum ein?

LG,
CK

[Gunnar Bittersmann]

@@mixmastertobsi

Um Grafiken dynamisch nachzuladen... WEnn ich src weglasse, funktioniert es zwar auch, aber dann schimpft der W3C validator

Und wenn du den Bindestrich weglässt, dann schimpft der Rechtschreib-Validator.

Validierung Überprüfung (What’s the difference?) sollte nicht zum Selbstzweck verkommen. Wenn ein img ohne @src niemanden stört, dann stört es niemanden.

Anstatt einer 1px-Grafik^[1] könntest du auch eine Grafik anzeigen, die das Laden des Bildes visualisiert. Statt animiertem GIF bietet sich dafür auch SVG an.

LLAP

---

1. nicht px² ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Gerade nochmal in den Thread geschaut. Was man doch damals so für Unsinn geschrieben hat:

Man kann barrierefreie Seiten ohne @alt erstellen. Man kann mit @alt="" nicht barrierefreie Seiten erstellen.

Ob @alt Pflicht ist, hat mit Barrierefreiheit so ziemlich gar nichts zu tun.

Doch, das hat es. Wenn kein @alt da ist, liest ein Screenreader den Dateinamen vor; das ist sicher nicht das, was man will. Also bei dekorativen Grafiken oder wenn kein Alternativtext zur Verfügung steht: alt="" setzen!

LLAP

[Auge]

Hallo

Ein Beispiel <img src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' data-src='$image_normal' alt='$image_normal_title'/>

Ja, schön, was Base64 ist, weiß ich.

Wie könnte ich mir den base64 sparen, denn dieser kommt öfters vor...und wird ja nur ausgetauscht, sobald das Bild in den Sichtbereich kommt...

Nun kommen wir zum eigentlichen Thema, das du wieder nur vage anreißt. Du willst Grafiken im HTML-Dokument referenzieren, die Bilder aber erst laden, wenn sie im Browser in den Sichtbereich kommen. Stattdessen setzt du bei der Auslieferung des Dokuments in das src-Attribut der img-Elemente Platzhalter, die du dir nun auch noch sparen willst.

Habe ich das richtig verstanden?

Tschö, Auge

[mixmastertobsi]

Ja - das hast Du richtig verstanden - ich möchte mir die Platzhalter sparen...wenn möglich...

[Auge]

Hallo

Ja - das hast Du richtig verstanden - ich möchte mir die Platzhalter sparen...wenn möglich...

Ok. Das Weglassen der src-Angabe hat der Validator als Fehler bemängelt. Du brauchst also eine Source, wenn du dem von dir gewählten System folgen wisst.

1. Das Bild: Ein Bild wird, auch wenn es -zigfach referenziert wird, nur einmal geladen. Du hast also X-mal die Zeichenkette des Pfades zum Bild im HTML-Quelltext und die einmalige Übertragung des Bildes.
2. Base64: Du hast X-mal den Base64-kodierten „Quelltext“ des Bildes im HTML-Quelltext, dafür aber keine Übertragung eines Bildes vom Server.

Je öfter du dieses System nutzt, umso günstiger kommt mit großer Wahrscheinlichkeit die 1px²-Grafik. Ausnahme ist, wenn die Pfadangabe den Base64-Quellcode von der Größe her nahezu aufwiegt oder gänzlich übertrifft. Wenn nun zusätzlich davon auszugehen ist, dass dieses System von dir auf mehreren Seiten genutzt wird und die Grafikdatei bei der Benutzung ab der zweiten Seite mit großer Wahrscheinlichkeit schon im Cache liegt, überwiegen die Vorteile der Grafikdatei den Base64-Code umso mehr.

Tschö, Auge

[MudGuard]

Hi,

Wie könnte ich mir den base64 sparen, denn dieser kommt öfters vor...und wird ja nur ausgetauscht, sobald das Bild in den Sichtbereich kommt...

Wenn's Dir um ein paar Bytes geht, dann nimm statt einem gif ein svg. Da verschwendest Du zwar 4 Bytes beim mimetype (image/svg+xml statt image/gif), aber dafür sparst Du beim Bild. Wenn ich die DTD richtig lese, ist <svg/> ein gültiges svg-Dokument. Base-64-codiert ergibt das PHN2Zy8+, gesamt also

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
vs
data:image/svg+xml;base64,PHN2Zy8+

Ohne base64 müßte der Bytehaufen url-encoded werden, das ergäbe dann
data:image/svg+xml,%3Csvg/%3E
was nochmal ein kleines bißchen kürzer wär.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Base-64-codiert

Wozu?

Ohne base64 müßte der Bytehaufen url-encoded werden, das ergäbe dann
data:image/svg+xml,%3Csvg/%3E

Oh, da hat Chris Coyier wohl was übersehen.

was nochmal ein kleines bißchen kürzer wär.

Und lesbarer.

Unterstützen das denn alle Browser? Nein.

Was tun die, die das nicht unterstützen? Die zeigen das SVG nicht an. ;-)

LLAP

[MudGuard]

Hi,

Base-64-codiert Wozu?

Um einen schönen Größenvergleich zu haben. ;-) Daß es auch ohne geht, hab ich ja gezeigt.

Ohne base64 müßte der Bytehaufen url-encoded werden, das ergäbe dann
data:image/svg+xml,%3Csvg/%3E

Oh, da hat Chris Coyier wohl was übersehen.

Meinst Du das URL-Encoding?

was nochmal ein kleines bißchen kürzer wär.

Und lesbarer. Unterstützen das denn alle Browser? Nein.

Unterstützen alle Browser Bilder? Nein ... ;-)

Was tun die, die das nicht unterstützen? Die zeigen das SVG nicht an. ;-)

Gab's da nicht I rgend E inen Browser, der ein Kästchen mit einem roten Kreuzchen anzeigt?

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Oh, da hat Chris Coyier wohl was übersehen.

Meinst Du das URL-Encoding?

Genau das.

Gab's da nicht I rgend E inen Browser, der ein Kästchen mit einem roten Kreuzchen anzeigt?

Warte, ich schau mal nach. Aber jetzt ist erst mal Wochenende. So’n Mist, und montags haben die Museen zu.

LLAP

[MudGuard]

Hi,

Gab's da nicht I rgend E inen Browser, der ein Kästchen mit einem roten Kreuzchen anzeigt?

Warte, ich schau mal nach. Aber jetzt ist erst mal Wochenende. So’n Mist, und montags haben die Museen zu.

Aber nicht diesen Montag, wegen Feiertag ;-)

cu,
Andreas a/k/a MudGuard