zu große Bilder (kB) für eine HP optimieren

[OliO]

Hallo zusammen,

habe folgendes Problem: Ich habe eine HP erstellt wo ich ausschließlich versucht habe den code so klein wie möglich zu halten und auf "schnick-schnack" zu verzichten damit der Zugriff auf die Page schnell geht.

Nun musste ich feststellen, dass durch eine Schnelligkeits-Test Seite die HP die Note 6 bekommen hat wegen der Ladezeit. Grund sind die Bilder auf der HP. Undzwar fast alle.

Man soll die bilder bei ca. <50 KB halten, meine sind ab 200 (die meisten) -700 kB. Das geht natürlich nicht.

Nun hab ich versucht mit Photoshop CS die Bilder zu optimieren mit folgenden Ergebnissen:

Wenn ich die qualität des bildes um 60% senke (weniger Senkungen bringen nichts an kB) da bin ich bei ca. 70kB aaaaber... natürlich sieht das bild dann schei** aus. Verschwommen, nicht HP tauglich.

Wenn ich ein anderes Dateiformat nehme (habe es mit .gif) versucht ist es qualitätiv noch schlimmer als das runterschrauben der Quali.


Kennt jemand eine Möglichkeit wie man das am Besten hinbekommt die Datenmenge der Bilder zu reduzieren und dabei anspruchsvolle quali zu bekommen?? ich mein die anderen machen das ja auch irgendwie

Die HP lautet: (ACHTUNG: Das ist kein SPAM oder Werbung für diese HP, ich kenne den Besitzer persöhnlich und das ist lediglich ein gefallen dem ich Ihn tue also bitte nicht löschen!)

Bin für jeden Tipp dankbar da ich zwar sehr viel Grafiken erstellt habe aber nie auf dieses Thema zurückgekommen bin weil ich mit Homepages nichts am Hut hatte.

Gruß
Oli

 

[uebelduebel]

AW: zu große Bilder (kB) für eine HP optimieren

Was für ein Format haben deine Bilder denn jetzt?
und wie groß sind sie?

Was mir grad auffällt:
Des obere Bild geht über den ganzen bildschirm, aber nur das halbe bild wird verwendet.....

 

[march42]

AW: zu große Bilder (kB) für eine HP optimieren

Grund sind die Bilder auf der HP. Undzwar fast alle.

Du solltest vielleicht die Bilder skalieren und nicht nur die Größenangabe im HTML nutzen.

home.jpg hat zum Beispiel 400x200 Pixel hat 70KB und wird mit 100x30 Pixel angezeigt. Skaliere das Bild doch auf 100x30 Pixel, dann wird es nur noch 3/80 gross sein also knapp 2,7KB.

Und soweit ich das sehe hast du das bei fast allen Bildern so gemacht.

Außerdem scheinen die Bilder alle mit 4:4:4 sampling also 12Bit/Pixel gespeichert zu sein. Hier kannst du auch nochmal optimieren und 4:2:2 sampling nutzen, dann werden sie nochmal knapp halb so groß.

Gruß Marc

 

[MrBounce]

AW: zu große Bilder (kB) für eine HP optimieren

Nun hab ich versucht mit Photoshop CS die Bilder zu optimieren mit folgenden Ergebnissen:

wenn du für "web und geräte speichern machst, was zeigt er dann bei den bildern für px-maße an!? ich schätze mal, dass deine pics/grafiken viel zu groß sind. also von den maßen her und somit von den KB's!

beispiele:
- banner: 3200px x 160px (das geht gar nicht^^)
- buttons: 400px x 200 px - werden aber viel kleiner auf der seite angezeigt - ergo, mach sie auch gleich so klein

 

[Schlachtweib]

AW: zu große Bilder (kB) für eine HP optimieren

Grundsätzlich skaliert man Bilder die man auf einer Webseite einbaut nicht im Quellcode der Seite.... Ich gehe davon aus das Du den Code nicht ausm Kopf getippt hast sondern ein Programm zum erstellen der Seite verwendest. Du solltest Dir dessen bewußt sein das man Bilder, die man in einem HTML-Editor in die Seite einbaut und dort skaliert, eigentlich immernoch genausogroß sind wie sie waren, nur das sie eben nach dem Skalieren kleiner angezeigt werden.... Beispiel: Du hast ein Bild mit den Maßen 800x600 ... Du willst aber das es auf deiner Seite nur noch mit 400x300 angezeigt wird. Dann solltest du dir ein Grafikprogramm deiner Wahl schnappen und dort das Bild auf 400x300 bringen. Tust du das nicht so wird das Bild am Ende nur vom Browser verkleinert angezeigt, in Wirklichkeit wird aber das große Bild geladen.......

 

[MyBad]

AW: zu große Bilder (kB) für eine HP optimieren

Wenn du das mit den Bildern optimiert hast, hinweise hast du ja schon bekommen, solltest du dich eventuell noch mal um die komplette Seite kümmern. Da lässt sich auch noch einiges optimieren. Eventuell solltest du auch auf das Frameset verzichten.

 

[Antr4ks]

AW: zu große Bilder (kB) für eine HP optimieren

Das Richtige wurde schon gesagt. Aber mach bitte ganz einen neuen Banner. 3200px ist echt ein no-go, gerade in dem Verhältnis zu 160px. Und wirklich gut erkennen tut man da auch nichts.

 

[OliO]

AW: zu große Bilder (kB) für eine HP optimieren

Was für ein Format haben deine Bilder denn jetzt?
und wie groß sind sie?

Was mir grad auffällt:
Des obere Bild geht über den ganzen bildschirm, aber nur das halbe bild wird verwendet.....

Bilder sind .jpg und wie beschrieben 200-700kB
Ja da bin ich noch dran, das ist aber erstmal nebensache...




Danke erstmal mit den Tipps, das mit den skalieren ist ne Idee werd ich gleich mal versuchen. Hab ich gar nicht drauf geachtet dass die Bilder doch so groß sind. Für nen Button 400x200 ist schon heftig das stimmt... Gut dann hatten wir das Problem mit den Buttons gelöst, schonmal etwas

Was ich nicht verstehe ist, dass er rechts im Frame die Bilder so lange lädt, das sind 10kB Bilder und die werden als letztes dargestellt.

ich hab auch ganz vergessen dass es "für Web und Geräte speichern" gibt... Kleinigkeiten auf das man nicht achtet wenn die größe des Bildes bisher keine Rolle gespielt hat...

Aber wie gesagt danke erstmal mit dem Tipp des skalierens ich denke da spar ich mir ne Menge kB.

 

[march42]

AW: zu große Bilder (kB) für eine HP optimieren

Was ich nicht verstehe ist, dass er rechts im Frame die Bilder so lange lädt, das sind 10kB Bilder und die werden als letztes dargestellt.

Na es werden doch alle der Reihe nach geladen und da kommen erst ein paar zu große, das dauert dann eben bis die auf der rechten Seite dran sind.

Gruß Marc

 

[OliO]

AW: zu große Bilder (kB) für eine HP optimieren

okay hab ich mir gedacht dass es daran liegt danke!

was die komplette seite angeht, ja sie ist nicht toll aber darum geht es auch nicht ist ne kleine "eckkneipe" und dem besitzer reicht das volkommen. Daher ist mit optimieren (und vor allem wegen den mangelnden HP kenntnissen von mir) auch nicht viel zu machen. Geld dafür ausgeben will er auch nicht, nur ne kleine präsentation seines Ladens. Deswegen reicht ihm das.

Beispiel: Er hatte schonmal eine Seite von einem Kollegen gemacht bekommen die sah so aus: www.wintergarten-fulda.de
Und die ist ja mal total fürn Eimer *find* wobei meine nicht besonders besser ist aber ich huste mal "ansehlicher"

Okay und der Banner wird gleich heute erledigt ich seh schon der ist allen ein Dorn im Auge mit seiner Überbreite (weiss nicht was mich da geritten hat )

Ergebnisse sehe ich dann heute Abend hier hab ich nicht die Möglichkeiten der Bildbarbeitung oder geht das skalieren auch mit den Win Standard Progs?

 

[studio24]

AW: zu große Bilder (kB) für eine HP optimieren

ich hab auch ganz vergessen dass es "für Web und Geräte speichern" gibt... Kleinigkeiten auf das man nicht achtet wenn die größe des Bildes bisher keine Rolle gespielt hat...

"Für Web speichern" hat mit der Dateigröße nur in so weit zu tun, als es die Metadaten raus schmeißt. Da in deinen Bildern aber keine drin sind, bringt das keine Verkleinerung.

Die Buttons in groß erstellen, um sauberer arbeiten zu können, ist OK. Aber dann würde ich das auch proportional machen, damit der Eindruck stimmt. In deinem Fall wären das bei einer gewünschten Größe von 100 x 30 eben 400 x 120. Jetzt stauchst du deine Bilder.

 

[GoMeZ]

AW: zu große Bilder (kB) für eine HP optimieren

Hallo Oli,

Ich habe eine HP erstellt wo ich ausschließlich versucht habe den code so klein wie möglich zu halten und auf "schnick-schnack" zu verzichten

Oneclick-Eingangsseite, Javascript, Lauftext, Blinktext, Frameset ... kein Schnick-Schnack????

Mal abgesehen von den wirklich SCHRECKLICHEN Farben, der schon angesprochenen Header-Grafik (3200px, wer kommt auf sowas?) hast Du glaube ich noch ganz andere Probleme, um die Du Dich mal dringendst kümmern solltest!
Wenn das wirklich ein Design sein sollte, wann hast Du die Seite denn erstellt? In den 90ern des letzten Jahrtausends konnte man so daher kommen aber aktuell???

Gruß, der GoMeZ

edit: da war ich mal wieder zuuu langsam, aber trotzdem, auch wenn das schon die überarbeitete Version ist ...AUA!

 

[OliO]

AW: zu große Bilder (kB) für eine HP optimieren

Hallo Oli,



Oneclick-Eingangsseite, Javascript, Lauftext, Blinktext, Frameset ... kein Schnick-Schnack????

Mal abgesehen von den wirklich SCHRECKLICHEN Farben, der schon angesprochenen Header-Grafik (3200px, wer kommt auf sowas?) hast Du glaube ich noch ganz andere Probleme, um die Du Dich mal dringendst kümmern solltest!
Wenn das wirklich ein Design sein sollte, wann hast Du die Seite denn erstellt? In den 90ern des letzten Jahrtausends konnte man so daher kommen aber aktuell???

Gruß, der GoMeZ

Unter Schnick-Schnack verstehe ich was anderes wenn man 90% der Seiten heutzutage ansieht. DAS sind kleinigkeiten glaub mir

Und was das Design angeht, wie gesagt ne HP für ne Eckkneipe die kein Geld ausgeben will und nen Kumpel beauftragt der vor 8 Jahren mal HTML versucht hat zu lernen (aus eigeninitiative!) und das die Bruchstücke seines ein-halbes-jahr-versucht-zu-lernen sind. DAS verdiehnt schonmal applaus. was dabei rauskommt ist genauso viel Müll wie die HP aber hier will keiner geld mit machen also von daher wirds wohl dabei bleiben!

Aber dank an die Tipps und auch dank dir mich zu bestätigen dass aus mir nie ein webdesigner geworden wäre

 

[WebMediaService]

AW: zu große Bilder (kB) für eine HP optimieren

Für diese Seite und das, was du da machst, gibt es einen schlauen Spruch:

Es gibt kaum etwas auf dieser Welt, das nicht irgend jemand ein wenig schlechter und etwas billiger verkaufen könnte.
Und die Menschen, die sich nur am Preis orientieren, werden die gerechte Beute solcher Machenschaften.
Es ist unklug zu viel zu bezahlen!
Aber es ist noch schlechter zu wenig zu bezahlen!

Nun zu deinem Problem. Unter PS gehe auf "Datei - Automatisieren - Bild einpassen" und gebe dort die genaue größe für dein Bild an, wie es auf der HP eingebunden wird. Dann speicherst du das ganze unter "Für Web und andere Geräte" ab und zwar als png 24. Glaube mir, diese Einstellung gibt es da.

 

[outdoor_nico]

AW: zu große Bilder (kB) für eine HP optimieren

Die besten Komprimierung erreichst Du mit Fireworks, mit PS kannst Du aber wirklich auch super Ergebnisse erzielen, wie WebMediaService ja schon gesagt hat, PNG ist das Mittel der Wahl und ein Banner mit über 3000px Breite, wer soll den denn anschauen können, bei einer durschnittlichen Bildschirmauflösung von 1200 px