Bilder per HTML & IMG oder per CSS?

Verfasst am: 08. 07. 2010 [18:01]
Beitrag hilfreich?
SGS
Themenersteller
Dabei seit: 21.05.2009
Beiträge: 194
 Hallo,

um die Anzahl der Request zu verringern, möchte ich Bilder per CSS einbinden.

1) Alte Lösung:
HTML
<img src="Bild.jpg" alt="Text1" title="Text2" width="125" height="50" />


2) Neue Lösung:
HTML
<div class="Bild" title="Text2"></div>

CSS
.Bild {background:url(Bild.jpg) no-repeat; width:125px; height:50px}

Ist die neue Lösung überhaupt sinnvoll? Hat sie Nachteile?

Gruß

SGS

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 08.07.2010 um 18:04.]
http://www.cdl-rlp.de
Profil
WWW
 
Verfasst am: 08. 07. 2010 [18:54]
Beitrag hilfreich?
Gelöschter Benutzer 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.
 
Verfasst am: 09. 07. 2010 [01:06]
Beitrag hilfreich?
UFOMelkor
Dabei seit: 20.10.2009
Beiträge: 336
 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/
Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community
Profil
WWW
 
Verfasst am: 09. 07. 2010 [10:13]
Beitrag hilfreich?
Gelöschter Benutzer 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" ?
 
Verfasst am: 09. 07. 2010 [14:00]
Beitrag hilfreich?
Matthes
Dabei seit: 08.05.2010
Beiträge: 174
 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.
Mal: "May have been the losing side. Still not convinced it was the wrong one."
Profil
WWW
 
Verfasst am: 09. 07. 2010 [14:06]
Beitrag hilfreich?
Gelöschter Benutzer 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.
 
Verfasst am: 09. 07. 2010 [18:01]
Beitrag hilfreich?
UFOMelkor
Dabei seit: 20.10.2009
Beiträge: 336
 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.
Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community
Profil
WWW
 
Verfasst am: 15. 12. 2010 [22:33]
Beitrag hilfreich?
Gelöschter Benutzer
UFOMelkor schrieb:



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

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

wen ja wie? schaffe es nicht icon_frown.gif

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!" />


danke für nen ratschlag gruss andy
 
Verfasst am: 15. 12. 2010 [22:54]
Beitrag hilfreich?
Gelöschter Benutzer 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

 
Verfasst am: 16. 12. 2010 [14:36]
Beitrag hilfreich?
Gelöschter Benutzer
romacron schrieb:



danke für den tipp wink.gif

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""
 




Du bist nicht eingeloggt. Bitte beachte, dass Du eingeloggt sein musst, um Themen zu erstellen oder auf Beiträge zu antworten.

RSS Feed abonnieren

Werde in Echtzeit über neue Foren-Beiträge informiert:

RSS Feed abonnieren »


15 Mitglieder Mitglieder waren innerhalb der letzten 15 Minuten (315 heute gesamt) online:
70hi70, anjstr, awagner, BrautstudioTimm, Buzzi-Club, demon-x, Marccs, MatthiasHuehr, mosaik_dresden, Noahndertaler, ralf_rd, StrokeSport, targa1234, topgeschenkewelt

Administratoren und Moderatoren:
seitenreport

Seitenreport hat 16339 registrierte Mitglieder, 2862 Themen und 28000 Beiträge.
Seitenreport hat einen Mitgliederzuwachs von durchschnittlich 24 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 3 neue Themen und 17 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

SEO und Website-Analyse

Seitenreport ist eine der bekanntesten Website-Analyse-Dienste im WEB. Über 9.200 registrierte Mitglieder (keine Freemailer-Accounts), 1/4 Millionen Seitenaufrufe pro Monat, über 100 Premium-Kunden und namhafte Referenzen sprechen für sich. Seitenreport gibt es seit 2007. Wie Du davon profitierst? Hier kannst Du sicher sein, dass es um Qualität und Beständigkeit geht!

Seitenreport auf Facebook!

238 unserer Mitglieder sind bereits Seitenreport Fan auf Facebook. Dein Vorteil: Schnellere Kenntnis von neuen Features, News in Echtzeit, Tipps und Tricks für SEO und Web. Du kannst unsere Beiträge auch kommentieren und dadurch Deine Besucherzahlen und das Interesse an Deinem Account erhöhen. Folge Seitenreport auf Facebook!

Seitenreport Partnerprogramm

Eines der wenigen Partnerprogramm im Bereich SEO und WEB. Erhalte 12% Lifetime Provision auf alle Buchungen von Dir geworbener neuer Mitglieder! Jedes von Dir geworbene Mitglied wird dauerhaft mit Deinem Partnerkonto verknüpft und bei jeder kostenpflichtigen Buchung mit 12% provisioniert. Lifetime - so lange es Seitenreport gibt!
Seitenreport Partnerprogramm

* = Partnerlinks