Akzeptieren

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

Was ist die beste Methode für Layout-Grafiken und kleine Bilder?

Umfrage
Frage:
Welches ist aus SEO Sicht die beste Methode?
Datei
 
2 von 11 Antworten (18%)
CSS-Sprite
 
8 von 11 Antworten (73%)
DataURL
 
1 von 11 Antworten (9%)


Verfasst am: 29. 11. 2012 [09:08]
masa8
1087 Beiträge
Selbständig
Dabei seit: 22.10.2009

✭✭ Aktiver Seitenreport Vorantreiber
Themenersteller

Beitrag hilfreich?

Es gibt verschiedene Methoden, wie man Layout Grafiken und kleine Bilder in eine Webseite integriert. Es würde mich mal interessieren, welches ihr als die beste Methode ansehen würdet.

Gruß Matthias

Mein Blog über Wordpress, SEO, interne Verlinkung und mehr
alles-mit-links
BLACKINK Webkatalog 20-25 Backlinks "Lifetime"


Verfasst am: 29. 11. 2012 [09:17]
hansen
1939 Beiträge
Dabei seit: 18.05.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo Matthias,

es kommt darauf an, ob Du auch in der Bildersuche damit gefunden werden willst, da wäre Datei zu verwenden.
Vom Code her, wäre CSS-Sprite am Sparsamsten, auch die Request reduzieren sich.
Bei Dataurl wesentlich mehr Code, aber man spart etliches an Request.

Gruß
hansen



Verfasst am: 29. 11. 2012 [15:30]
romacron
1278 Beiträge
JDev Xer
Dabei seit: 01.11.2009

✭✭ Aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo Matthias,

Wenn Bilder bums liefern sollen, dann doch am besten als img src's

Um die Seite nicht mit sinnlosem Schmückwerk wie "speichern" "senden" Grafik Buttons Seo-technisch zu verwässern, den ganzen Kram als Sprite.


Verfasst am: 29. 11. 2012 [18:03]
joerg
1984 Beiträge
Fachinformatiker Anwendungsentwicklung
Dabei seit: 09.06.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo Matthias

Ich habe zwar jetzt für Datei abgestimmt aber du hast ja auch speziell nach dem Bereich SEO gefragt.

Begründen würde ich das mit Besucher über die Bildersuche.

Das bedeutet aber nicht das ich die beiden anderen Methoden nicht einsetzen würde.

Dataurl würde ich nicht bei mehrmaligen Einbinden oder zu großer Dateigrösse einsetzen.

CSS Sprite ist im Grunde mehr dazu geeignet häufig eingesetzte Bilder zu verwenden von kleineren Icons mal abgesehen.

Gruß
Jörg



Verfasst am: 29. 11. 2012 [19:50]
kermit767
29 Beiträge
Dabei seit: 27.01.2011

Hat schonmal was geschrieben

Beitrag hilfreich?

also wenn ich die Frage richtig lese geht es um "Layout-Grafik". Also Beispielsweise der Klassiker mit abgerundete Ecken über Grafiken gelöst, wenn einem die Möglichkeiten mit border-radius etc nicht ausreichen.
in diesem Fall empfehle ich auf jeden Fall die Image-Sprites als sauberste Lösung hinsichtlich der der vermeidung der ganzen unnötigen HTTP-Requeste, die bereits von hansen hier angesprochen wurden.

Unter "kleine Bilder" verstehe ich jetzt mal icons für Menüs usw. und keine Themenrelevanten Fotos von Produkten (diese wären wohl auch nicht als "klein" bezeichnet worden). Auch hier würde ich auf jeden Fall Image-Sprites empfehlen.

Solange es sich um Icons handelt, ist somit auch die Bildersuche der Suchmaschinen nicht von Bedeutung.

Gruß



Verfasst am: 30. 11. 2012 [11:44]
abikSolutions
15 Beiträge
Webdesigner
Dabei seit: 30.01.2010

Nicht Untätiger

Beitrag hilfreich?

Icons sollte man heute als Font und nicht als Bild wiedergeben.
Diese lassen sich einfach mit Font CSS Paramentern in der Größe oder Farbei anpassen und sehen selbst auf Grund ihrer Vektorbasierender Form auf Mobilen Geräten nicht verpixelt aus.
Generell viele läßt sich heute mit css3 abbilden, wie z.b. Pfeile (da ich sie gerade hier im Breadcrumb sehen :)

http://fortawesome.github.com/Font-Awesome/


Verfasst am: 30. 11. 2012 [19:12]
joerg
1984 Beiträge
Fachinformatiker Anwendungsentwicklung
Dabei seit: 09.06.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

"abikSolutions" schrieb:

Icons sollte man heute als Font und nicht als Bild wiedergeben.
Diese lassen sich einfach mit Font CSS Paramentern in der Größe oder Farbei anpassen und sehen selbst auf Grund ihrer Vektorbasierender Form auf Mobilen Geräten nicht verpixelt aus.
Generell viele läßt sich heute mit css3 abbilden, wie z.b. Pfeile (da ich sie gerade hier im Breadcrumb sehen :)

http://fortawesome.github.com/Font-Awesome/



Hallo

Okay nette Idee und dann kommt das berüchtigte Aber.

Darstellung in unterschiedlichen Browser abhängig vom verwendeten Zeichensatz.

Ist mit Sicherheit ein gangbarer Weg wenn das entsprechende Unicode Zeichen ohne größere Unterschiede vorhanden ist.

Hatte ich persönlich mal mit den Unicode Zeichen der Sternzeichen in einer SVG Datei eingesetzt. Da gab es schon Unterschiede in verschiedenen Browsern.

Der Weg der auf der Seite angedacht ist basiert auf keinem Standardzeichensatz.
Also wird dafür auch ein Datentransfer benötigt zur einwandfreien Darstellung.

Den Download mit 1,4mb mache ich jetzt nicht um mir dann anzuschauen wieviel Daten da für ein einzelnes Zeichen benötigt werden.

Sicher wäre eine Möglichkeit aus der Navigation eine Liste zu machen und die mit
CSS
#navigation li:not(:first-child):before{content:'BA';}
zu designen.

Keine Ahnung ob der Befehl jetzt 100% sicher war wahrscheinlich nicht weil der IE8 da wegen dem not schon schlapp macht.

Also erst mal alle Stylen und für das erste Kind das zurücknehmen.

Statt dem Unicode Wert kann man auch das entsprechende Zeichen in der CSS Datei einsetzen.

Der betreffende Pfeil ist eh in der CSS Sprite und Semantische Elemente ist nicht für jeden der ausschlagende Punkt weil Design halt eben dann den Hauptausschlag gibt.

Und da es auch noch Leute gibt die den IE6 in ihre Betrachtungen einbeziehen fällt da jede Argumentation auf den Bauch neue Techniken einzusetzen.

Ja ich gebe den Weg selbst das ich Unicode Zeichen in Standard Zeichensätzen verwende. Einen speziellen Zeichensatz dafür einzusetzen halte ich für sowas von übertrieben und würde dann eher eine Grafik einsetzen.

Ja es hat Vorteile das man auf diesem Weg Semantik mit Design bei entsprechenden Ladezeiten verbinden kann.

Gruß
Jörg



Verfasst am: 05. 12. 2012 [09:12]
masa8
1087 Beiträge
Selbständig
Dabei seit: 22.10.2009

✭✭ Aktiver Seitenreport Vorantreiber
Themenersteller

Beitrag hilfreich?

Dank euch für die Antworten.

Ich habe jetzt einige Projekte mit der Variante DataURL umgesetzt, weil ich denke, dass das am effektivsten ist.

Zwar ist der Base64 Code grösser als die entsprechenden PNG Dateien, was aber durch die komprimierte Ãœbertragung von HTML und CSS wieder ausgeglichen wird.

Beispiel:
CSS mit DataURL = 19 kB

CSS mit Sprite = 12 kB + PNG mit den Bildern = 10 kB macht 22 kB.

Soweit zum Layout.

Anders ist es bei der DataURL im HTML. Hier verschlechtert sich das Verhältnis Content/Quelltext, und ob das so gut ist, bzw, ob die bessere Ladezeit das ausgleicht, muss sich noch zeigen.

Gruß Matthias



Mein Blog über Wordpress, SEO, interne Verlinkung und mehr
alles-mit-links
BLACKINK Webkatalog 20-25 Backlinks "Lifetime"


Verfasst am: 05. 12. 2012 [10:46]
hansen
1939 Beiträge
Dabei seit: 18.05.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo Matthias,

Content Delivery Network (CDN) wäre in Deinem Fall auch noch eine Ãœberlegung wert.

Gruß
hansen






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


1 Mitglied war innerhalb der letzten 15 Minuten online (9 heute gesamt):
zork2011

Administratoren und Moderatoren:
[keine]

Seitenreport hat 47724 registrierte Mitglieder, 4360 Themen und 37796 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.