Akzeptieren

Diese Website verwendet Cookies. Durch die Nutzung dieser Webseite erklären Sie sich damit einverstanden, dass Cookies gesetzt werden. Mehr erfahren

Bilder per HTML & IMG oder per CSS?

Verfasst am: 08. 07. 2010 [18:01]
SGS
226 Beiträge
Ingenieur
Dabei seit: 21.05.2009

Sehr aktiver Schreiber
Themenersteller

Beitrag hilfreich?

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.]



Verfasst am: 08. 07. 2010 [18:54]
romacron
1278 Beiträge
JDev Xer
Dabei seit: 01.11.2009

✭✭ Aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

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]
UFOMelkor
353 Beiträge
Student
Dabei seit: 20.10.2009

☆ Content Bringer

Beitrag hilfreich?

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/



Verfasst am: 09. 07. 2010 [10:13]
romacron
1278 Beiträge
JDev Xer
Dabei seit: 01.11.2009

✭✭ Aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

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]
Matthes
981 Beiträge
Evil Genius
Dabei seit: 08.05.2010

✓ Seitenreport Vorantreiber

Beitrag hilfreich?

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.

Make Seitenreport great again!


Verfasst am: 09. 07. 2010 [14:06]
romacron
1278 Beiträge
JDev Xer
Dabei seit: 01.11.2009

✭✭ Aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

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]
UFOMelkor
353 Beiträge
Student
Dabei seit: 20.10.2009

☆ Content Bringer

Beitrag hilfreich?

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.



Verfasst am: 15. 12. 2010 [22:33]
Gelöschter Benutzer
Beitrag hilfreich?

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]
romacron
1278 Beiträge
JDev Xer
Dabei seit: 01.11.2009

✭✭ Aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

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]
Gelöschter Benutzer
Beitrag hilfreich?

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




to Top to Top

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


0 Mitglieder waren innerhalb der letzten 15 Minuten online (5 heute gesamt):
[keine]

Administratoren und Moderatoren:
[keine]

Seitenreport hat 47724 registrierte Mitglieder, 4358 Themen und 37794 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 0 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 0 neue Themen und 0 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Seitenreport API

Verfolge die SERP Positionen Deiner Keywords und erhalte Informationen über verwendete Mikroformate, frage die Ergebnisse unserer Analysen live ab oder greife auf unsere History-Datenbank zu. Dies alles bietet Dir die neue Seitenreport API. Kontaktiere uns, um weitere Infos zu erhalten.