nicht angemeldet
Eine einzige Grafik anstatt vieler
Anstatt viele kleine Grafiken einzubinden/zu laden wird häufig eine Technik eingesetzt, bei der nur eine einzige Grafik geladen wird, auf der sich alle diese erforderlichen Minibilder befinden.
Hier etwa ein Beispiel aus Google Maps
http://maps.google.com/mapfiles/hpimgs12.png
Auf dieser Grafik befinden sich viele kleine Piktogramme, die dann im Browser einzeln/ausgeschnitten dargestellt werden. Der Vorteil ist offensichtlich, weil das Laden einer einzigen Grafik vermutlich schneller ist und wohl vom Browser auch schneller gerendert wird.
Aber jetzt meine Fragen: Wie nennt sich diese Technik? Wie ist sie realisierbar?
-
Aber jetzt meine Fragen: Wie nennt sich diese Technik? Wie ist sie realisierbar?
Sprite.
Mit CSS und, wenn notwendig, einer Image-replacement-Technik deiner Wahl.Ich verwende background: url() xxpx yypx no-repeat;
Realisierbar mit irgend einem Grafikprogramm.
Es liegt an dir, die Koordinaten zu dokumentieren.Alle Bilder auf eine Sprite ist selten möglich.
Du brauchst drei Sprites im Minimum:
Clip Bilder,
horizontale Backgrounds und
vertikale Backgrounds.
Eine Reduktion von 50 Requests auf 5 ist aber hinreichend effizient.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Vielen Dank für die schnelle und kompetente Antwort.
Bin schon am basteln. ;-)
Diese Technik scheint sehr sehr sehr aufwendig... -
Nochmals Danke Beat. Tolle Sache, ich bin begeistert.
Besonders Rollover-Grafiken nur mit Wechsel der background-position sollen besonders schnell sein. Aber auch sonst eine hervorragende Idee.Ich verkürze damit etwa 35 Requests an den Server auf zwei.
:-)
-
-
Hello,
Anstatt viele kleine Grafiken einzubinden/zu laden wird häufig eine Technik eingesetzt, bei der nur eine einzige Grafik geladen wird, auf der sich alle diese erforderlichen Minibilder befinden.
Hier etwa ein Beispiel aus Google Maps
http://maps.google.com/mapfiles/hpimgs12.png
Auf dieser Grafik befinden sich viele kleine Piktogramme, die dann im Browser einzeln/ausgeschnitten dargestellt werden. Der Vorteil ist offensichtlich, weil das Laden einer einzigen Grafik vermutlich schneller ist und wohl vom Browser auch schneller gerendert wird.
Aber jetzt meine Fragen: Wie nennt sich diese Technik? Wie ist sie realisierbar?
Interessante Sache. Kannte ich auch noch nicht bisher.
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>clip</title>
</head><body>
<div>
<img src="hpimgs12.png" alt="Sammelbild" style="">
</div><div style="position:absolute; top:150px; left:150px; clip:rect(0px, 25px, 20px, 4px);">
<img src="hpimgs12.png" alt="Sammelbild" style="">
</div><div style="position:absolute; top:150px; left:150px; clip:rect(0px, 45px, 20px, 20px);">
<img src="hpimgs12.png" alt="Sammelbild" style="">
</div><div style="position:absolute; top:180px; left:100px; clip:rect(0px, 87px, 20px, 66px);">
<img src="hpimgs12.png" alt="Sammelbild" style="">
</div>
</body>
</html>Funktioniert aber nicht im IE 6.0. Das liegt aber wohl am png, dass er das nicht verknusen kann.
Wie man aber die ausgesschnittenen Bildchen dann am geschicktesten gezielt plaziert, ist mir noch nicht ganz klar.Liebe Grüße aus dem Cyberspace
Tom vom Berg
-
Hello,
Funktioniert aber nicht im IE 6.0. Das liegt aber wohl am png, dass er das nicht verknusen kann.
Wie man aber die ausgesschnittenen Bildchen dann am geschicktesten gezielt plaziert, ist mir noch nicht ganz klar.steht sogar in der SelfHTML-Doku, wie es funktioniert bei IE 6.0
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clipIst ja wirklich eine pfiffige Sache.
Liebe Grüße aus dem Cyberspace
Tom vom Berg
-
Funktioniert aber nicht im IE 6.0. Das liegt aber wohl am png, dass er das nicht verknusen kann.
Wie man aber die ausgesschnittenen Bildchen dann am geschicktesten gezielt plaziert, ist mir noch nicht ganz klar.steht sogar in der SelfHTML-Doku, wie es funktioniert bei IE 6.0
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clipIch würde auf diese Art keine GUI erstellen.
clip mag für Effekte bei Gallerien gut sein. Ich bevorzuge allerdings, Sprites für CSS Background-Images zu verwenden.Sprites habe ich hier im Admin-Bereich besonders intensiv verwendet:
http://www.elcappuccino.ch/ehome-factory/admin
Bei Firefox: Rechtsklick -> Seiteninformationen anzeigen -> MedienMSIE versteht einige der Techniken nicht. Das ist aber weiter kein Problem.
Er bekommt dann halt normale List-Bullets.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-