Perfekte "runde Ecken" - kleine Datei ( Alternative zu PNG 24 ? )

[Tasnal]

Tag zusammen,

für eine Website habe ich vor mehrere Thumbnails ( die nach einem Klick darauf dann das Bild per Java-Script sichtbar machen ) zu erstellen. Diese sollen "runde Ecken" haben. Die Größe der einzelnen Thumbnails beträgt 130x122 Pixel.

Was optisch bisher ganz gut funktioniert hat : Die Thumbnails als rechteckige Bilder ( JPG ) einsetzen und die "runden Ecken" per Photoshop in der Hintergrundfarbe der Website "simulieren".

Allerdings möchte ich flexibler in der Gestaltung des Hintergrunds sein und somit brauche ich vermutlich transparente "runde Ecken". Also Gif oder PNG.

Mein Problem: Perfekte, astreine "runde Ecken" bekomme ich nur hin, wenn ich das Bild als PNG 24 abspeichere. Gif oder PNG 8 erzeugt selbst in den besten Einstellungen leicht ausgefranste Ecken. Das Ergebnis ist zwar besser, als die Ergebnisse mancher "abgerundete Ecken" - Tutorials im Netz, allerdings sind die PNG 24 Ecken so perfekt, dass rein optisch Gif oder PNG 8 nichts mehr hermachen.

Während ich das PNG 8 Bild auf ca. 7KB komprimieren kann, hat das PNG 24 Bild eine Größe von knapp 45KB. Bei ca. 20 Thumbnails auf einer Seite ist das nicht akzeptabel. Dabei unterscheidet sich das PNG 8 Bild vom PNG 24 Bild hauptsächlich in den perfekten Rundungen - das "Innenleben" ist relativ gleich

Hat jemand eine Idee, wie ich dieses Problem lösen kann oder gibt es hier keinen Kompromiss zwischen Dateigröße und Qualität der Rundungen ?

Anscheinend besteht auch die Möglichkeit, Ecken von Bildern direkt per CSS zu erzeugen, aber erstens vermute ich, dass die Qualität nicht besser als die PNG8- oder Gif-Geschichte ist und zweitens klingt das nach unnötigen Mengen an Code.

Dank und Grüße,

Tasnal

 

[pixelflat]

Du könntest nur den Rahmen einmal als PNG speichern und per CSS über die Thumbnails legen.

Die

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

Eigenschaft von CSS wäre - gerade für kleine Radien an vielen Stellen - mein Favorit. Aber ältere Browser bleiben da halt außen vor. An sich auch kein Problem, wenn man sicherstellt, dass es auch mit Ecken anständig aussieht...

CSS hat aber den Vorteil, dass du gar keine Grafiken brauchst und wesentlich flexibler bist.

 

[Tasnal]

Schon mal Danke für die Antwort,

ich hatte auch schon überlegt, nur den sauberen Rahmen als PNG 24 zu speichern und über die Thumbnails zu legen. Ich muss mal testen, wie sich das auf die Datenmenge auswirkt ( also Thumbnail + Rahmen ). Allerdings wird es auch kein Spaß sein, zwanzig und mehr Rahmen per genauer Positionsangabe an die richtigen Stellen zu bringen.

Bei der Border-Radius-Geschichte bin ich mir nicht sicher, ob das mit Bildern funktioniert. Einen Div-Container rund zu machen ist soweit kein Thema. Einen Rahmen mit abgerundeten Ecken um ein Bilder herumlegen ist auch kein Problem. Aber ein Bild per CSS rund "beschneiden" ?

Prinzipiell wären die Thumbnails als PNG 24 Bilder schon ideal : Die Grafik des Thumbnails brauche ich sowieso und der saubere Rahmen wäre dann Bestandteil der Grafik.

Grüße,

Tasnal

 

[pixelflat]

Naja, was gibts da auszuprobieren? 20 x 7kb + 45kb = 185kb, im Vergleich zu 20 x 45kb = 900kb.

Die Rahmen zu positionieren sollte auch keine große Arbeit machen, wenn du dich nicht all zu dumm anstellst (also zB alles mit position:absolute irgendwie hin verschieben wäre sehr dumm). Für sowas gibts ja Klassen...

Warum genau sind denn eigentlich die 900kb für 20 Bilder zu viel? Die Bilder werden ja nur einmal geladen und sind dann im Cache. Wenn du HTTP Requests sparen willst könntest du ein Sprite verwenden (alle Thumbnails in einem Bild). Macht aber dann mehr Arbeit einzelne Grafiken auszutauschen...

 

[xXxJulianxXx]

<style type="text/css">
.pic{    
    border:1px solid black;
    border-radius: 10px;
    height:200px;width:200px;
    background-image:url(bild.png);
    }
</style>

<div class="pic"></div>

Wo ist das Problem ?

 

[Tasnal]

Die Möglichkeit, die entsprechenden Thumbnails als Hintergrundbild für ein Div Tag zu verwenden und dann mit Border-Radius zu arbeiten, funktioniert rein optisch eigentlich ganz gut.

Von Julians Code abweichend, habe ich den Background-Parameter gleich im jeweiligen Div Element drinnenstehen. Der Style bestimmt also nur die Rundungen.

Allerdings habe ich dann noch das Problem, dass jeder Thumbnail einen Hyperlink beinhalten soll. Vermutlich werde ich da mit <a href nicht weit kommen ? Anscheinend lösen das die meisten mit Hilfe eines Javascripts.

Mir wächst das ehrlich gesagt ein wenig über den Kopf. Ich beschäftige mich jetzt vielleicht gerade mal 3 Tage mit dem Websiten-Bau und versuche mangels Ahnung alles so einfach wie möglich zu halten. Die Vorstellung, einfach nur pro Thumbnail ein PNG mit einem Hyperlink zu versehen, fand ich recht attraktiv.

Die Geschichte mit den Sprites überfordert mich total. Das lasse ich erstmal bleiben.

Einen PNG-Rahmen mittels Div Tag über den fransigen Thumbnail zu legen beinhaltet dann vermutlich wieder das Problem, dass die Hyperlinks durch das Div-Tag nicht anklickbar sein dürften. Da würde ich gleich die Lösung per Border-Radius und Background vorziehen.

Die Thumbnails wirklich als PNG 24 Bilder anzulegen kommt auf Grund der Datengröße nicht in Frage. Auf der Website wird es ca. 4 Unterseiten mit diesen Thumbnail-Ansammlungen geben. Außerdem werden aus den 20 Thumbnails pro Seite eventuell in Zukunft bis zu 30. Über 1 MB pro Seite nur für die Thumbnails möchte ich dann doch keinem zumuten. Ganz abgesehen davon wohne ich hier in einem Gebiet, in dem DSL-Light stellenweise das maximal Machbare ist.

Sollte es eine einfache Lösung für das Hyperlink-Problem geben, so würde ich die Thumbnails per Border-Radius und Background gestalten.

Falls nicht, bleibe ich vermutlich bei den Thumbnails mit eingefärbtem Rahmen.

Grüße,

Tasnal

 

[xXxJulianxXx]

<style type="text/css">
.pic{    
    border:1px solid black;
    border-radius: 10px;
    height:200px;width:200px;
    }
</style>

<a href="dein_link"><div style="background-image:url(bild.png);" class="pic"></div></a>

oder

<div onclick="window.location.href = 'dein_link';" style="background-image:url(bild.png);" class="pic"></div>

Ich persönlich, würde die erste Variante verwenden.

 

[Tasnal]

Danke für den Codevorschlag !

Was ist denn mit dieser Geschichte, dass man ein Blockelement ala Div Tag nicht mit <a als Hyperlink festlegen soll ?

Laut diversen Foreneinträgen scheint das eine ähnliche Sünde wie die Verwendung von Tabellen für´s Layout zu sein ( nur nebenbei: Ich fand Tabellen zum Layouten eigentlich auch ganz praktisch ). Die Diskussionen darüber gehen hin bis zu "Man darf ein Div Tag niemals als Links missbrauchen !!!"

Trotzdem: Der Code funktioniert. Die Bilder haben saubere, "runde Ecken" und können als Link angeklickt werden.

Was will man mehr bzw. wieso den Umweg über Javascript und Co gehen ?

Grüße,

Tasnal

 

[Tasnal]

So - mittlerweile habe ich noch eine recht gute Lösung gefunden.

Die relativ großen PNG24-Dateien lassen sich über "Tontrennung" ( in Photoshop ) deutlich verkleinern. Wenn keine feinen Farbverläufe im Bild vorkommen, reicht ein Wert von ca. 20 aus. Andernfalls muss man auch schon mal auf 50-70 hochgehen. Trotzdem: Je nach PNG24-Thumbnail lässt sich die Endgröße teils ohne sichtbaren Qualitätsverlust um bis zu 50% senken.