Sprite-Generator gesucht. Empfehlungen?

Verfasst am: 10. 06. 2012 [15:34]
rdombach
616 Beiträge
Security-Admin
Dabei seit: 02.08.2009

✶ Sehr aktiver Content Bringer
Themenersteller

Beitrag hilfreich?

Hallo alle miteinander,

wie bekannt soll man ja die Anzahl der Webseiten-Requests reduzieren. Probates Mittel ist die Nutzung einer großen Bild-Datei, in der alle kleineren Bilddateien enthalten sind - Sprites eben.

Kann jemand einen (Online) Sprite-Generator empfehlen, der die einzelnen Images nicht nur in einer Richtung ausrichtet (vertikal oder horizontal), sondern alle Bilder platzsparend ausrichtet (vertikal UND horizontal) und somit das große Image von der Größe her besser ausnutzt.

Mein Problem ist, das ich unterschiedliche Bildgrößen habe und bei horizontaler oder vertikaler Ausrichtung immer jede Menge ungenutzter Füllraum entsteht, der das große Image auf die doppelte bis dreifache Speichergröße als die Summe der Einzebilder aufbläht.
Was kontraproduktiv ist, da ich zwar dann Requests reduziere aber die Download-Menge verdopple.
Besten Dank vorab!

Grüße
Ralph



Bitte nicht vergessen, Virenscanner und Co. zu aktualisieren!
SecuTipp: GRATIS Security-Informationen für die eigene Webseite und http://www.seitenreport.de/twitter_icon_small.png


Verfasst am: 10. 06. 2012 [16:40]
seitenreport
1931 Beiträge
Seitenreport Inhaber
TYPO3 Senior Developer
Dabei seit: 28.03.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo Ralph,

versuchs mal mit dem SpritePad.

Beste Grüße,
Matthias

Matthias Gläßner. TYPO3 Senior Developer, war u.a. Chefentwickler
beim FOCUS-Campus Nachfolger WHIZKID, Senior Entwickler bei Maybelline New York, Statoil und bei s.Oliver /
Inhaber von Seitenreport, der SEO und Website Analyse


Verfasst am: 10. 06. 2012 [17:23]
joerg
1984 Beiträge
Fachinformatiker Anwendungsentwicklung
Dabei seit: 09.06.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo Ralph

Also öffentlich kenne ich keinen solchen Generator.

Das müsste ich mir selbst auch erstmal programmieren.

Oder halt eben auch händisch setzen, wenn es ein einmaliger Vorgang sein sollte.

Mit den Funktionen zu den normalen Bildformaten ist theorethisch alles möglich.

Ãœber diese Theorie hatte ich mich mit Oskar schon mal unterhalten. Möglich das er sowas parat hat und er nur noch wissen müsste welche Bilder da alle rein sollen.

Reduzieren oder halt eben mit Ajax auf einen späteren Zeitpunkt verlagern wäre auch noch eine Möglichkeit den ersten Datentransfer zu minimieren.

Händisch hatte ich so ein Sprite vor längeren mal erstellt. Hat zumindest den kleinen Vorteil du hast dann für das CSS die betreffenden Koordinaten auch parat.

PHP
<?php
header('Content-Type: image/jpeg');
 
$prsks = imagecreatetruecolor(720,360);
 
$farbe = ImageColorAllocate ($prsks,255,255,255);
imagefill($prsks,0,0,$farbe);
 
$width = 110;
$height = 78;
 
$image = imagecreatefromjpeg('heft_50_der_einsame_der_zeit_v_ak.jpg');
imagecopy($prsks,$image,0,0,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_51_jagd_nach_dem_leben_v_ak.jpg');
imagecopy($prsks,$image,120,0,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_52_der_falsche_inspekteur_v_ak.jpg');
imagecopy($prsks,$image,240,0,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_53_die_verdammten_von_isan_v_ak.jpg');
imagecopy($prsks,$image,360,0,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_54_der_zweikampf_v_ak.jpg');
imagecopy($prsks,$image,480,0,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_55_der_schatten_des_overhead_v_ak.jpg');
imagecopy($prsks,$image,600,0,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_56_die_toten_leben_v_ak.jpg');
imagecopy($prsks,$image,0,90,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_57_die_attentaeter_v_ak.jpg');
imagecopy($prsks,$image,120,90,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_58_attacke_aus_dem_unsichtbaren_v_ak.jpg');
imagecopy($prsks,$image,240,90,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_59_rueckkehr_aus_dem_nichts_v_ak.jpg');
imagecopy($prsks,$image,360,90,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_60_festung_atlantis_v_ak.jpg');
imagecopy($prsks,$image,480,90,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_61_der_robot_spion_v_ak.jpg');
imagecopy($prsks,$image,600,90,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_62_die_blauen_zwerge_v_ak.jpg');
imagecopy($prsks,$image,0,180,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_63_die_mikro_techniker_v_ak.jpg');
imagecopy($prsks,$image,120,180,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_64_im_zeit_gefaengnis_v_ak.jpg');
imagecopy($prsks,$image,240,180,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_65_ein_hauch_ewigkeit_v_ak.jpg');
imagecopy($prsks,$image,360,180,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_66_waechter_der_verbannten_v_ak.jpg');
imagecopy($prsks,$image,480,180,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_67_zwischenspiel_auf_siliko_v_v_ak.jpg');
imagecopy($prsks,$image,600,180,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_68_hetzjagd_durch_die_dimensionen_v_ak.jpg');
imagecopy($prsks,$image,0,270,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_69_im_halbraum_lauert_der_tod_v_ak.jpg');
imagecopy($prsks,$image,120,270,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_70_die_letzten_tage_von_atlantis_v_ak.jpg');
imagecopy($prsks,$image,240,270,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_71_fehlsprung_der_tigris_v_ak.jpg');
imagecopy($prsks,$image,360,270,0,0,$width,$height);
$image = imagecreatefromjpeg('heft_72_die_gesandten_von_aurigel_v_ak.jpg');
imagecopy($prsks,$image,480,270,0,0,$width,$height);
 
imagejpeg($prsks);
imagedestroy($prsks);
?>


Wenn ich sowas jetzt händisch machen würde wäre wohl der Ansatz das ich SVG einsetze um das alles zu positionieren. Und mir es danach in das betreffende Bildformat umwandeln würde.

Das könnte man dann auch automatisieren.

Um wieviel Dateien geht es denn überhaupt? Vielleicht kann ich mich morgen mal kurz hinsetzen und dir das Sprite auf diesem Weg bauen.

Eigentlich ist dann nicht mehr nötig als ein Array was die URL und die gewünschten Koordinaten enthält.

Wenn man das dann noch automatisieren wollte müsste man die Weite oder Höhe des Sprites zumindest vorgeben auch etwaige Abstände und auch einen gewünschten Hintergrund.

Langsam reizt mich der Gedanke ohne Dateien per Formular zu laden sondern nur Urls diese in einem SVG automatisch zu positionieren und in dem betreffenden Format was ausgegeben werden soll als dataurl einfach auszugaben.

Dann könnte der andere danach sich diesen String holen.

Gruß
Jörg



Verfasst am: 10. 06. 2012 [18:22]
rdombach
616 Beiträge
Security-Admin
Dabei seit: 02.08.2009

✶ Sehr aktiver Content Bringer
Themenersteller

Beitrag hilfreich?

Hallo Matthias, hallo Jörk,

danke für euere prompte Unterstützung!

@Matthias
"SpritePpad" habe ich mal probiert, aber ich bekomme Drag'n Drop nicht hin! Sicherlich mein Fehler.

@Jörg
Ich denke Dein Ansatz hat durchaus was für sich. Wenn man dann z.B. ein Verzeichnis als angeben kann, welches abzuarbeiten ist, klappt das sicher. Aber für die komprimierte Positionierung, bei unterschiedlichen Grafik-Größen, brauchst Du dann wieder etwas Logik. In Deinem Beispiel hattest Du einheitliche Image-Größen, da ist es dann etwas einfacher.

Ich werde mich jetzt mal an Jörg's Beispiel orientieren und versuchen, meine Grafiken von der Größe her einheitlicher zu gestalten. Denn dann kann man 2-3 Sprite-Files machen und einheitlich dimensionierte Bilder zusammenfassen und verschwendet keinen Platz.
Alternativ schaue ich aber auch mal noch http://spritegenerator.codeplex.com/ an. Denn dieser Generator unterstützt variable Größen - "Nachteil", es ist ein Tool, welches man auf dem PC installieren muß.

Besten Dank und Grüße!

Ralph



Bitte nicht vergessen, Virenscanner und Co. zu aktualisieren!
SecuTipp: GRATIS Security-Informationen für die eigene Webseite und http://www.seitenreport.de/twitter_icon_small.png


Verfasst am: 10. 06. 2012 [19:13]
joerg
1984 Beiträge
Fachinformatiker Anwendungsentwicklung
Dabei seit: 09.06.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo Ralph

Du wenn du mich noch etwas basteln lässt dann denke ich das ich schon einen guten Ansatz gefunden habe.

Deshalb hatte ich auch geschrieben das ich das Ganze mit SVG aufbauen würde.

Vielleicht hilft dir ja auf die schnelle folgendes Beispiel.

Wenn du das entsprechend modifiziert hast so wie du dir das vorstellst kann ich es dir immer noch in ein Format deiner Wahl verwandeln.

Also die Bilder waren nur ein einem einheitlichem Format weil sie so bereits vorlagen. Sonst hätte ich das Ganze halt entsprechend modifiziert.

PHP
<?php$weite = '1000';
$hoehe = '1000';
 
$test = '/bild/ich.jpg,100,100,100,100
/bild/ich.jpg,200,150,100,200
/bild/ich.jpg,100,300,200,100
/artikel/seo/mammuthanull.svg,100,300,200,100
/bild/ich.jpg,500,100,100,100
/artikel/seo/mammuthanull.svg,500,500,300,300';
 
$bild = preg_match_all('#([^\s]+),([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})#',$test,$treffer);
 
$u = $treffer[1];
$x = $treffer[2];
$y = $treffer[3];
$w = $treffer[4];
$h = $treffer[5];
 
$anzahl = count($x);
 
$sprite = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 '.$weite.' '.$hoehe.'" xml:lang="de">';
$sprite .= '<rect fill="rgba(100,100,100,0.2)" x="0" y="0" width="'.$weite.'" height="'.$hoehe.'" />';
for ($i = 0;$i<$anzahl;$i++) {
$sprite .= '<image x="'.$x[$i].'" y="'.$y[$i].'" width="'.$w[$i].'" height="'.$h[$i].'" xlink:href="'.$u[$i].'" />';}
$sprite .= '</svg>';
?>


Vorteil des Ganzen für mich ich kann damit dann nicht nur positionieren sondern auch gleichzeitig strecken.

Als Angabe brauche ich halt dabei eine Komma separierte Liste momentan die als erste Angabe die URL enthält. Dann die Position X und Y koordinaten und dann die Weite und Hoehe des Bildes.

Dann könnte man auch Textpassagen drüberlegen und einen Hintergrund bestimmen momentan zuerst mal farblich und mit Angaben zur Transparenz aber da ist noch mehr möglich.

Momentan schränke ich das Ganze darauf ein maximale Werte von 999 in der Hoehe und der Breite zu haben.

Die Idee hat etwas mal sehen wie weit ich sie entwickle. Wer das Beispiel jetzt nachvollziehen möchte müsste halt eben die URL entsprechend modifizieren.
Also ich habe jetzt nicht geschaut wo ich an Performance noch gewinnen kann.

Zumindest sollte dabei dann jedes Graphikformat theorethisch möglich sein einzubinden.

Und ich kann mir vorher anschauen welche Formate ich erlaube oder auch nicht.

Gruß
Jörg

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 10.06.2012 um 19:14.]



Verfasst am: 10. 06. 2012 [20:16]
hansen
1937 Beiträge
Dabei seit: 18.05.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo Ralph,

gut bewertet:
http://de.spritegen.website-performance.org/

ansonsten
http://css-sprit.es/
http://csssprites.com/
http://spriteme.org/

Gruß
hansen



Verfasst am: 10. 06. 2012 [22:46]
ptra
461 Beiträge
Designerin (Print & Web)
Dabei seit: 22.09.2010

✭ Aktiver Content Bringer

Beitrag hilfreich?

Hm Ralph,
im Photoshop selber basteln ist keine Alternative? Das ist das, was mir jetzt so einfällt. Hat man ständig dieselben kleinen Grafiken, dann kann man Sprite und dazugehöriges CSS immer wieder einsetzen.

Gruß. Petra wink.gif

Gegen die Infamitäten des Lebens... (siehe Hermann Hesse) http://www.universoom.de





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 (4 heute gesamt):
[keine]

Administratoren und Moderatoren:
[keine]

Seitenreport hat 45795 registrierte Mitglieder, 4288 Themen und 37434 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 6 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.