Grafik-Volumen bzw. Ladezeiten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeiten
balken
bild
code
dank
datei
design
einsparen
format
gedanke
grafik
grund
image
klasse positionieren
nutzen
positionieren
target
transparenz
verlaufen
verwenden
-
Hi Lima-City!
Ich arbeite zur Zeit an einer Homepage und setze zur Layoutgestaltung das erste mal Grafiken ein.
Bisher habe ich rein mit HTML-Tabellen alles gestaltet ohne Grafiken zu verwenden, weshalb alles oft sehr langweilig aussah...
Nun habe ich bedenken die Grafiken wären evtl zu groß oder im falschen Format.
Kann man mir da evtl grundlegende Tips geben was man beachten muss?
Was meine Fragen diesbezüglich angeht wären das Folgende:
- Sollte ich die Homepage komplett als Grafik designen und mit Slices arbeiten für die verschiedenen Frames oder ist es eher ratsam jede benötigte Grafik einzeln zu designen?
- Wie groß darf so eine Homepage dann maximal werden mit Grafiken bzw. wie groß sollten die Grafiken maximal sein damit die beim aufrufen der Homepage nicht ewig lange laden?
- Welches Format wäre am besten geeignet und welche auflösung?
Bisher habe ich im .png Format garbeitet mit einer auflösung von 72.
Die Grafiken sind so 1 bis 7 KB groß bis auf das Banner da es eine animierte Grafik ist und daher .gif (495 kb)..
ist das aktzeptabel?
Oder sollte ich mir über sowas nicht so große Gedanken machen?
danke! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo,
zu deiner ersten frage, du solltest auf jeden fall zuerst das design machen und es dann slicen.
zur zweiten frage, du solltest halt schauen, dass die grafiken so klein wie möglich sind, es macht keinen sinn wenn ich dir hier sage, max so groß dürfen sie sein, es ist immer situationabhängig wie groß sie werden.
Es muss nicht immer .png sein, du kannst auch ohne weiteres .gif verwenden, wichtig ist, bei den hintergundgrafiken nicht immer das gesamte bild als hintergrund rein legen, sondern nur einen streifen machen mit 5px mal der höhe die die grafik hat und dann in der css datei background-image: repeat x oder y, damit sparst du schon mal eine menge grafikgröße.
Die auflösung mit 72 ist ok das kannst du auf jedenfall so machen.
Auch solltest du viel mit <div>´s arbeiten, weil diese sehr schön mit css formatierbar sind und sich klasse positionieren lassen.
ich hoffe dir etwas geholfen zu haben.
LG
-
Danke das hat mir auf jeden Fall weitergeholfen.
Bisher habe ich meine Seiten immer mit Framesets gemacht damit ich bei links nicht immer die gesamte Seite neu laden muss und ich das target bestimmen konnte auf zb die hauptframe.
also sowas<a href="news.php" target="inhalt">News</a>
geht das mit div layern auch?`
habe auch schon einmal versucht mit div zu arbeiten und wollte als background image ein bild positionieren und zwar fixed damit es nicht mitscrollt. das war ein balken der rechts und links an der seite positioniert werden sollte aber der balken wurde nicht mehr angezeigt sobald ich
background-attachment: fixed;
hinzugefügt hatte :(
Beitrag zuletzt geändert: 22.6.2010 20:41:02 von nicko -
Üblicherweise geh ich so vor:
Zuerst kommt das komplette Design in Photoshop.
Dann siehst du ja direkt, wo du was einsparen kannst.
Für einen grauen Hintergrund brauchst du kein Bild.
Für einen Verlauf am Ende der Seite brauchst du kein Bild über die ganze Seite.
Für eine dünne Linie um dein ganzen Layout kannst du auch die CSS Eigenschaft Border nutzen.
Oft unterteilt sich ja ein Design eh in Kopf Inhalt und Footer, was schonmal eine grobe Eingrenzung beim Slicen darstellt.
Je exotischer die Ansprüche sind, desto mehr Grafiken, ich würde auf Grund der Dateigröße kein png nutzen,
nur wenn es von Nöten ist, auf Grund von Transparenz.
Normalerweise (nicht immer[logisch]) kannst du ein Design in jpg Dateien speichern, die bis auf 49% runterreduziert wurden (Photoshop kannste das einstellen beim Abspeichern).
usw usf
LG sneppa -
Hi!
Cool, also kann ich mit jpeg wohl noch eine wenig an Traffic einsparen.
Habe nur ein paar Grafiken wo ich Transparenz brauche und hatte bisher alles mit .png gemacht.
Ich weiß nur nicht wo genau du das mit den 49% meinst..
was bedeutet usf?
das mit dem target und div hat sich geklärt und das mit dem
auch!background-attachment: fixed;
LG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
