Bilder per HTML & IMG oder per CSS?

Hallo SGS,

Um die Requests kommst Du nicht drum herum. Alles was beim User im Browser angezeigt werden soll, muss übermittelt werden.

Wenn Du vernünftige TitleAttribute angibst, hilft das gewiss den Sumas.

Die Bilder die permanent(auf jeder Page) angezeigt werden, macht man besser als Sprite.
Dabei kann man ne ganze Menge Requests sparen.

Wenn man unbedingt Requests sparen möchte, sind zuerst einmal die CSS-Sprites empfehlenswert.

Um noch mehr Requests zu sparen, kann man es mit Inline Images probieren. Bei oft benutzten Bildern hilft auch hier nochmal das Auslagern der Bilder nach CSS. Eine gute (englische) Zusammenfassung findest du hier: http://www.websiteoptimization.com/speed/tweak/inline-images/

Oscar ,Kurze Zwischenfrage.

Hab ich es richtig auf dem Schirm, dass base64 1/3 mehr übertragene Datenmenge nach sich zieht, oder bin ich da "heavy on the woodway" ?

romacron, das ist richtig.

SGS: Wo Du das Bild lädst, ist egal. Ob es jetzt direkt in der HTML-Datei geladen wird oder über die CSS-Datei macht keinen Unterschied, denn es muss ja in beiden Fällen an den Client übertragen werden und ist eine einzelne, separate Datei. Um also Requests zu sparen, musst Du die Zahl der Dateien reduzieren.
Wie bereits vorgeschlagen, wären CSS-Sprites für häufig oder immer auftauchende Bilder eine gute Alternative. Damit fasst Du mehrere Bilder in einer Datei zusammen.

Inline-Images finde ich nicht so gut, sie eignen sich auch nicht für größere Bilder, die Datenmenge wächst um ca. ein Drittel an und die Wartbarkeit leidet ziemlich.

Danke Matthes,

So stimme ich Dir/Euch zu. Keine Inline base64 Bilder aber dafür Sprites für die WebseitenBasis.
Mit den Sprites spart man enorm, gerade für die kleinen Frickelsachen.

Bin gerade am Reduzieren der Datenmengen auf verschiedenen Seiten.
Mal schauen wie viel ein eigenes CDN bringt. Denke bei der x.ten joomla Installation samt Galerien usw. kann man das ruhig auslagern und Cookies sparen.

Ja, die Datenmenge steigt tatsächlich, dennoch können Inline Images Vorteile bringen. Je nach Zielgruppe ist die Datenmenge heute nicht das Maß der Dinge. Denn auch wenn man mehr Daten übertragen muss, man spart sich einen zusätzlichen Request, was die Performance im Endeffekt verbessert.
Inline Images sind weder nutzlos noch sind sie ein Allheilmittel, es hängt immer auch von der Zielgruppe und der Art des Bildes ab, eine allgemeine Aussage kann man hier nicht treffen.

@Matthias
Wenn die Wartbarkeit leidet, dann liegt das nicht an Inline Images sondern am Script. Ein ordentlich programmiertes System kennt Möglichkeiten damit umzugehen, ohne dass die Wartbarkeit leidet.
CSS-Sprites sind in Bezug auf die Wartbarkeit schon schwieriger, da es in vielen Websprachen keine Möglichkeit gibt, Bilder automatisch zusammenzufassen, es muss also immer manuell das zusammengesetzte Bild hochgeladen werden.

UFOMelkor schrieb:

ich versuche, schaffe es auch mit dem base64 und für kleine dateien finde ich ist es optimal

kann man ein base64 eingefügtes bild direkt in der html einen liink hinzufügen ?

wen ja wie? schaffe es nicht

beispiel:
[HTML]
<img src="data:image/png;base64,
R0lGODlhEAAQAOYAAFqt2P+HPf/+/Veq0/3+//9gAUuk0t3t9nS63P5nAfX8///Xumm02v/m0/5s
EP+aWf+dYvT6/P/17//z6v9kAP9iADydz/5pBv+8jv5xFf7+///9+v/59fb5+//17f9cAOHw94vF
5Hm93v9wE/1fAPb6/Pv9/lao1f9hCHO64ff6/PP5/P/XvNLs9/9jAv+we/rSufz8/Nnt9/9lAv5t
Dub1+mGw2P/v5Pv8/dDo9/9wG/90GIDB4InE4f9yEP9oCf9rCf9qC/b7/f+WUaTP55/Q6P/Utvb7
/v+zhPT5/F6v1/338v93Ir7g8v99LqXR52qz2prN522222613P+dW/2eX/9hA0ym0v+rd/+MQf9t
Cni53IPB33293qzV6j+gzf1lAPj7/f6kaOXy9/3277PY6rLZ7Lbb7fn8/kqnz/v+/vv179Po9MTk
8v9eAP5eAv9uF0Gez/x0HP/s4IbD4Xm94Ga02P/dyDic0P9wEPz7+f/7+P769v7+/v9mAP///yH5
BAAAAAAALAAAAAAQABAAAAfhgH+Cg4ImaH2EiX8EZycWeAY9SYp/QnZxIS0yRQYGMoklW0pHfwIC
fyYIAyB/E3saTQBhfA87chAcBFNdESMBMCo1Ek4fFBUfARIHUGx5Pw5UHhMZb2B+fh8YMQheeUAu
VnJIN2IXFH4FD0t0RD5aMxUoWRwNQX4JBUNkIU8jQQVMMHiAUMHFNTdY9IgocyFDlTVq5lSokAAe
jQZjpLB5cadPCwZ9FsAhQUKHkT4ieEQYFKFOCgIbFrDY8CcKAFaESjAY0EaBghw2rhygRMDMiS8W
0nBZQamPUwIdOuBwSjUQADs= alt= a target="_blank" rel="nofollow" href="http://digg.com/submit?phase=2&url=http://www.crystallized-things.ch&title=Crystallized Things - Online Shop - Veredelte Luxus Produkte mit Swarovski Kristallen&bodytext= alt="Digg it!" title="digg it!" />
[/HTML]

danke für nen ratschlag gruss andy

Hallo Andreas,
machbar ist alles nur macht es keinen Sinn.

bas64 schafft ca. 30% mehr quellcode.

Wenn ich es richtig sehe, ist es ein SozialBookmark Link. Hat man davon mehrere, bietet es sich wie folgt an:
1 Sprite mit allen Bookmark Icons erstellen.
1 durchsichtiges png erstellen.

Nun gibt man für jeden bookmarklink das transparente png innen rein.
Verpasst dem jeweilgen img noch nen alt-attribute und versieht den img-tag mit einer Css-Classe(die das jeweilige icon zeigt).

Damit hast 3 fliegen mit einer klatsche erschlagen.
1. nur 2 requests da nur 2 Bilder.
2. es reicht wenn der css classname vom icon angegben wird(kein gefummel mit bilder ordner)
3. wenn ein dienst hinzu kommt, Klebt man an das Sprite einfach nen neues icon drann.
4. Spart arbeit, jedesmal ein bild in Base umzuwandeln, ich weiss nicht recht.

Als spielerei und "was so alles geht" ist das sicher gut für mehr taugt es einfach nicht.
Selbst die ärgsten Verfechter haben das nach dem 3. mal einfach sein gelassen

romacron schrieb:

danke für den tipp

obwohl ich es einfach finde mit dem base64.. na gute werde es anders machen aber hauptfrage ist,

wie erstelle ich so ein transparentes png bil und wie müsste der code aussehen..

also das durchsichtige png wird über das vorhandene gif bild gelegt und mit nem link verseht?
weil man beim backround pics kein link einfügen kann un kein title oder alt tag ? stimmt das so???

da hab grad ich keinen plan .gibts da irgendwo ne anleitung dazu nen thread oder ähnliches..

möchte ja wenn möglich auf alles requests verzichten. deshalb mache ich keine bilder stripes. mache es anders.. aber die verlinkung nachher? ""grübbel""

das währe ja ne blöde löhsung ??

so muss ich den link extern vom bild anpreisen und anklicken!

--->Social Bookmarks<---

Digg it!