grösse der hintergrundgrafik
Autor: mitapita
Datum: 02.03.2010 13:53:21
Schönen Guten Tag,
ich möchte eine HP für eine Schule mit Kindergarten erstellen. Damit das ganz lebendig aussieht, möchte ich als Hintergrund ein mit Wasserfarben gemaltes und eingescanntes Bild nehmen. Auf diesem ist ein Haus zu sehen und die Elemente wie Inhalt und Menü sind in das Haus integriert.
Nun kann man sich sicher schon denken, dass das Bild recht gross ist, wenn es nicht pixelig sein soll. Als JPG hat es im Moment eine Grösse von 245kb, Abmessungen sind 1000 x 1114px. Dabei ist es aber immernoch recht pixelig.
Wie kann ich also das Bild so darstellen, dass es schnell geladen wird und dabei noch gut aussieht?
Für jeden (möglichst schnellen) Vorschlag bin ich sehr dankbar.
liebe Grüsse
benita
Re: grösse der hintergrundgrafik
Autor: reporter
Datum: 02.03.2010 14:23:48
Hallo,
> Als JPG hat es im Moment eine Grösse von 245kb
Nehme das Bildformat 'PNG'. Achte darauf das keine Transparenz eingestellt ist. Eventuell die Kompression auf 9 stellen. Im Gegensatz zu jpg erfolgt kein Qualitätsverlust.
> Abmessungen sind 1000 x 1114px. Dabei ist es aber immernoch
> recht pixelig.
Prüfe dann ob im HTML-Quellkode das Bild selber nicht noch in seinen Abmessungen verändert wird.
Re: grösse der hintergrundgrafik
Autor: PointedEars
Datum: 06.03.2010 11:26:25
> > Als JPG hat es im Moment eine Grösse von
> > 245kb
>
> Nehme das Bildformat 'PNG'. Achte darauf das
> keine Transparenz eingestellt ist. Eventuell die
> Kompression auf 9 stellen. Im Gegensatz zu jpg
> erfolgt kein Qualitätsverlust.
Im Gegensatz zu JEPG ist ein solches Bild als PNG aber auch selbst bei maximaler Kompression um ein Vielfaches grösser. Das ist also keine gute Idee.
> > Abmessungen sind 1000 x 1114px. Dabei ist es
> > aber immernoch recht pixelig.
>
> Prüfe dann ob im HTML-Quellkode das Bild selber
> nicht noch in seinen Abmessungen verändert wird.
Skalierung von Hintergrundbildern ist erst ab CSS3 definiert, und ich kenne keine Layout-Engine, die dieses Feature unterstützt. Du?
PointedEars
Re: grösse der hintergrundgrafik
Autor: PointedEars
Datum: 06.03.2010 11:47:32
> ich möchte eine HP für eine Schule mit
> Kindergarten erstellen. Damit das ganz lebendig
> aussieht, möchte ich als Hintergrund ein mit
> Wasserfarben gemaltes und eingescanntes Bild
> nehmen. Auf diesem ist ein Haus zu sehen und die
> Elemente wie Inhalt und Menü sind in das Haus
> integriert.
>
> Nun kann man sich sicher schon denken, dass das
> Bild recht gross ist, wenn es nicht pixelig sein
> soll. Als JPG hat es im Moment eine Grösse von
> 245kb, Abmessungen sind 1000 x 1114px. Dabei ist
> es aber immernoch recht pixelig.
Wenn es pixelig ist, hast Du entweder beim Einscannen was falsch gemacht (Auflösung zu gering usw.) Oder Du hast etwas bezüglich Web grundsätzlich Richtiges gemacht (Auflösung des Bildes reduziert oder Kompressionsrate erhöht), dabei aber möglicherweise etwas übertrieben.
> Wie kann ich also das Bild so darstellen, dass es
> schnell geladen wird und dabei noch gut
> aussieht?
Wenn Du die Bildauflösung erhöhst oder die Kompressionsrate senkst, nimmt die Qualität zwar zu, aber die Dateigrösse nimmt auch zu und das Laden bräuchte noch länger als jetzt.
Wenn Du die Bildauflösung noch weiter reduzierst, oder die JPEG-Kompressionsrate erhöhst, sinkt zwar die Dateigrösse, aber auch gleichzeitig die Bildqualität.
Und mit PNG kannst Du hier keinen Blumentopf gewinnen: Ein Beispielbild von der NASA mit 1500x1500 Pixel ist im JPEG-Original 1.7 MiB gross; mit GIMP 2.6.8 als PNG mit max. Kompression [9] gespeichert schon 2.6 MiB.
Sollte sich also kein ausgewogenes Verhältnis zwischen diesen Parametern finden lassen, bleibt Dir wohl nur noch, das Bild zu kacheln oder auf das Hintergrundbild ganz oder teilweise zu verzichten.
HTH
PointedEars
Re: grösse der hintergrundgrafik
Autor: gaby
Datum: 06.03.2010 13:42:06
> Skalierung von Hintergrundbildern ist erst ab
> CSS3 definiert, und ich kenne keine
> Layout-Engine, die dieses Feature
> unterstützt. Du?
Der Safari auf dem iPhone beherrscht schon (teilweise) CSS3-Eigenschaften, u.a. auch das Skalieren von Hintergrundbildern.
Allerdings gibt es hier auch die Einschränkung, daß nicht jedes bg-Bild beliebig skaliert werden kann, sondern nur im festen Verhältnis von ca 30% seiner Originalgröße.
http://www.vorsprungdurchwebstandards.de/theory/faq-websites-fuer-das-iphone-gestalten/
(Wie zoomt das iPhone?)
Grüße
gaby
Re: grösse der hintergrundgrafik
Autor: PointedEars
Datum: 06.03.2010 19:11:54
> > Skalierung von Hintergrundbildern ist erst
> > ab CSS3 definiert, und ich kenne keine
> > Layout-Engine, die dieses Feature
> > unterstützt. Du?
>
> Der Safari auf dem iPhone beherrscht schon
> (teilweise) CSS3-Eigenschaften, u.a. auch das
> Skalieren von Hintergrundbildern.
> Allerdings gibt es hier auch die Einschränkung,
> daß nicht jedes bg-Bild beliebig skaliert werden
> kann, sondern nur im festen Verhältnis von ca 30%
> seiner Originalgröße.
>
> http://www.vorsprungdurchwebstandards.de/theory/faq-websites-fuer-das-iphone-gestalten/
> (Wie zoomt das iPhone?)
Nachdem ich den Artikel gelesen und den Links bis ins Wiki gefolgt bin, sowie auf meinem iPhone 3G mit Firmware 3.1.3 und Safari 4.0 getestet habe, bin ich zu 97% sicher, dass Du da etwas falcsh verstanden hast.
Es ging mir hier um die *viewport-unabhängige* Skalierung von Hintergrundbildern in der Box ihrer Elemente mittels der in CSS3 Backgrounds and Borders (CR) definierten "background-size"-Eigenschaft. AFAICS unterstützt Safari 4.0 für iPhone dieses Feature nicht. Es ist auch nicht zu erwarten, dass das auf dem iPhone jemals unterstützt werden wird, denn dynamische Bildskalierung erfordert einiges an Rechenleistung.
PointedEars
Re: grösse der hintergrundgrafik
Autor: PointedEars
Datum: 06.03.2010 19:11:57
> > Skalierung von Hintergrundbildern ist erst
> > ab CSS3 definiert, und ich kenne keine
> > Layout-Engine, die dieses Feature
> > unterstützt. Du?
>
> Der Safari auf dem iPhone beherrscht schon
> (teilweise) CSS3-Eigenschaften, u.a. auch das
> Skalieren von Hintergrundbildern.
> Allerdings gibt es hier auch die Einschränkung,
> daß nicht jedes bg-Bild beliebig skaliert werden
> kann, sondern nur im festen Verhältnis von ca 30%
> seiner Originalgröße.
>
> http://www.vorsprungdurchwebstandards.de/theory/faq-websites-fuer-das-iphone-gestalten/
> (Wie zoomt das iPhone?)
Nachdem ich den Artikel gelesen und den Links bis ins Wiki gefolgt bin, sowie auf meinem iPhone 3G mit Firmware 3.1.3 und Safari 4.0 getestet habe, bin ich zu 97% sicher, dass Du da etwas falcsh verstanden hast.
Es ging mir hier um die *viewport-unabhängige* Skalierung von Hintergrundbildern in der Box ihrer Elemente mittels der in CSS3 Backgrounds and Borders (CR) definierten "background-size"-Eigenschaft. AFAICS unterstützt Safari 4.0 für iPhone dieses Feature nicht. Es ist auch nicht zu erwarten, dass das auf dem iPhone jemals unterstützt werden wird, denn dynamische Bildskalierung erfordert einiges an Rechenleistung.
PointedEars
Re: grösse der hintergrundgrafik
Autor: PointedEars
Datum: 06.03.2010 19:13:23
> > Skalierung von Hintergrundbildern ist erst
> > ab CSS3 definiert, und ich kenne keine
> > Layout-Engine, die dieses Feature
> > unterstützt. Du?
>
> Der Safari auf dem iPhone beherrscht schon
> (teilweise) CSS3-Eigenschaften, u.a. auch das
> Skalieren von Hintergrundbildern.
> Allerdings gibt es hier auch die Einschränkung,
> daß nicht jedes bg-Bild beliebig skaliert werden
> kann, sondern nur im festen Verhältnis von ca 30%
> seiner Originalgröße.
>
> http://www.vorsprungdurchwebstandards.de/theory/faq-websites-fuer-das-iphone-gestalten/
> (Wie zoomt das iPhone?)
Nachdem ich den Artikel gelesen und den Links bis ins Wiki gefolgt bin, sowie auf meinem iPhone 3G mit Firmware 3.1.3 und Safari 4.0 getestet habe, bin ich zu 97% sicher, dass Du da etwas falcsh verstanden hast.
Es ging mir hier um die *viewport-unabhängige* Skalierung von Hintergrundbildern in der Box ihrer Elemente mittels der in CSS3 Backgrounds and Borders (CR) definierten "background-size"-Eigenschaft. AFAICS unterstützt Safari 4.0 für iPhone dieses Feature nicht. Es ist auch nicht zu erwarten, dass das auf dem iPhone jemals unterstützt werden wird, denn dynamische Bildskalierung erfordert einiges an Rechenleistung.
PointedEars
Posting-Bug? [was: grösse der hintergrundgrafik]
Autor: PointedEars
Datum: 06.03.2010 19:17:09
JFTR: Ich habe bei meinen Postings immer nur einmal auf Absenden geklickt, trotzdem erscheinen die Postings neuerdings mehrfach.
PointedEars
Posting-Bug? [was: grösse der hintergrundgrafik]
Autor: PointedEars
Datum: 06.03.2010 19:17:13
JFTR: Ich habe bei meinen Postings immer nur einmal auf Absenden geklickt, trotzdem erscheinen die Postings neuerdings mehrfach.
PointedEars
Re: Posting-Bug? [was: grösse der hintergrundgrafik]
Autor: gaby
Datum: 06.03.2010 22:48:21
> JFTR: Ich habe bei meinen Postings immer nur
> einmal auf Absenden geklickt, trotzdem erscheinen
> die Postings neuerdings mehrfach.
Hast Du vielleicht auf "Aktualisieren" geklickt, während Dein neu geschriebener Beitrag noch im Browserfenster stand?
Dann wird nämlich das Posting ein zweites Mal abgeschickt.
Grüße
gaby
Re: Posting-Bug? [was: grösse der hintergrundgrafik]
Autor: PointedEars
Datum: 06.03.2010 23:14:09
> > JFTR: Ich habe bei meinen Postings immer
> > nur einmal auf Absenden geklickt, trotzdem
> > erscheinen die Postings neuerdings mehrfach.
>
> Hast Du vielleicht auf "Aktualisieren" geklickt,
> während Dein neu geschriebener Beitrag noch im
> Browserfenster stand?
Nein. Ich bin zwar heute etwas müde, aber nicht *so* müde.
Mal schauen, ob ich es reproduzieren kann. *click* (1x)
PointedEars
Skalieren mit dem iPhone (was: grösse der hintergrundgrafik)
Autor: gaby
Datum: 07.03.2010 12:20:49
> Es ging mir hier um die *viewport-unabhängige*
> Skalierung von Hintergrundbildern in der Box
> ihrer Elemente mittels der in CSS3 Backgrounds
> and Borders (CR) definierten
> "background-size"-Eigenschaft. AFAICS
> unterstützt Safari 4.0 für iPhone dieses Feature
> nicht.
OK, da hast Du Recht. Die CSS-3-Eigenschaften und deren Werte für Hintergrundbilder ünterstützt der iPhone-Safari natürlich nicht.
Aber immerhin skaliert er wenigstens viewport-abhängig auf das Breit- oder Hoch-Format.
Mich würde aber mal interessieren, ob man hier
http://gaby77.ga.funpic.de/
die Google-Grafik und das Element mit dem Boot-Hintergrundbild größer ziehen kann, und vor allem, was mit dem Eselsohr-Hintergrundbild passiert, wenn man den Text vergrößert.
Passt sich dann das bg-Bild der vergrößerten Box an?
Grüße
gaby
Re: Skalieren mit dem iPhone
Autor: PointedEars
Datum: 08.03.2010 23:58:15
> OK, da hast Du Recht. Die CSS-3-Eigenschaften und
> deren Werte für Hintergrundbilder ünterstützt der
> iPhone-Safari natürlich nicht.
>
> Aber immerhin skaliert er wenigstens
> viewport-abhängig auf das Breit- oder
> Hoch-Format.
-v
> Mich würde aber mal interessieren, ob man hier
>
> http://gaby77.ga.funpic.de/
>
> die Google-Grafik und das Element mit dem
> Boot-Hintergrundbild größer ziehen kann, und vor
> allem, was mit dem Eselsohr-Hintergrundbild
> passiert, wenn man den Text vergrößert.
> Passt sich dann das bg-Bild der vergrößerten Box
> an?
| No suitable nodes are available to serve your request.
PointedEars
Re: Skalieren mit dem iPhone
Autor: gaby
Datum: 09.03.2010 15:37:52
> | No suitable nodes are available to serve your request.
Da mein Server immer noch wegen "Überlastung nicht verfügbar" ist, hat mir Tobias Asyl gewährt. Die Datei befindet sich nun hier:
http://www.tobiasjung.net/storage/bgpics/
Mich würde nun interessieren,
- ob man eine Grafik mit Fingertipp oder Auseinanderziehen ebenfalls vergrößern kann (Google-Bild)
- ob sich die Hintergrundgrafik auf Bild 2 + 3 ebenfalls vergrößert, wenn man die Box breiterzieht
- ob sich der Text (und somit auch die sie umgebende Box) automatisch vergrößert, wenn man beim iPhone vom Hoch- in das Breitformat wechselt.
Es wäre sehr nett, wenn einer der iPhone-Besitzer mir da mal Auskunft geben könnte.
Falls jemand statt langer Erklärungen zu geben, mir lieber Screenshots schicken möchte, habe ich dafür einen Mail-Link rechts oben eingerichtet. ;-)
Die Screenshots würde ich dann hier für die Allgemeinheit veröffentlichen.
Grüße
gaby
Re: Skalieren mit dem iPhone
Autor: PointedEars
Datum: 11.03.2010 03:17:31
> http://www.tobiasjung.net/storage/bgpics/ ;
>
> Mich würde nun interessieren,
>
> - ob man eine Grafik mit Fingertipp oder
> Auseinanderziehen ebenfalls vergrößern kann
> (Google-Bild)
Ja, natürlich.
> - ob sich die Hintergrundgrafik auf Bild 2 + 3
> ebenfalls vergrößert, wenn man die Box
> breiterzieht
Ja, natürlich.
> - ob sich der Text (und somit auch die sie
> umgebende Box) automatisch vergrößert, wenn man
> beim iPhone vom Hoch- in das Breitformat
> wechselt.
Ja.
> Es wäre sehr nett, wenn einer der iPhone-Besitzer
> mir da mal Auskunft geben könnte.
Gern geschehen. Obwohl ich finde, dass Du Dir das auch denken bzw. selbst hättest herausfinden können (ohne ein iPhone zu kaufen).
> Falls jemand statt langer Erklärungen zu geben,
> mir lieber Screenshots schicken möchte, habe ich
> dafür einen Mail-Link rechts oben eingerichtet.
> ;-)
> Die Screenshots würde ich dann hier für die
> Allgemeinheit veröffentlichen.
Screenshots vom iPhone wären dann aber echte Screenshots, d.h. Fotos vom Display. Jedenfalls ist mir keine App bekannt, die sowas innerhalb Mobile Safari macht.
BTW: Das Forum lässt sich mit Mobile Safari in akzeptabler Weise nutzen.
PointedEars
Re: Skalieren mit dem iPhone
Autor: gaby
Datum: 19.03.2010 02:55:45
Danke fürs Nachgucken und Antworten. :-)
> Obwohl ich finde, dass Du Dir das
> auch denken bzw. selbst hättest herausfinden
> können (ohne ein iPhone zu kaufen).
'Selbst herausfinden' ist nicht so einfach.
Es gibt zwar einen Screenshot-Service für die Darstellung von Webseiten auf dem iPhone, aber der soll für Windows-User nicht besonders realistisch sein.
> Screenshots vom iPhone wären dann aber echte
> Screenshots, d.h. Fotos vom Display. Jedenfalls
> ist mir keine App bekannt, die sowas innerhalb
> Mobile Safari macht.
Auf dieser Seite gabs es mal eine Beschreibung dazu:
http://wowbagger.de/tutorials/iphone-screenshot-machen.html
Die Seite ist nun leider gelöscht, verschoben oder umbenannt worden, aber zum Glück wurde daraus mal zitiert, sodaß ich den Wortlaut nun wiedergeben kann:
| 5 Schritte zum iPhone-Screenshot
|
| 1. iPhone anschalten (sonst geht’s natürlich nicht)
| 2. gewünschten Screen / Software öffnen
| 3. Home-Button drücken
| 4. gleichzeitig dabei kurz den Ein-/Ausschalter
| des iPhones drücken (Der Screen des iPhones fadet
| kurz zu weiss, wenn es geklappt hat.)
| 5. Der Screenshot erscheint dann in den Fotos unter Aufnahmen.
> BTW: Das Forum lässt sich mit Mobile Safari in
> akzeptabler Weise nutzen.
Danke!
Ich nehme es mal als unbeabsichtigtes Kompliment. *g*
Grüße
gaby
Re: Skalieren mit dem iPhone
Autor: PointedEars
Datum: 21.03.2010 00:51:31
> Danke fürs Nachgucken und Antworten. :-)
Null problemo.
> > Obwohl ich finde, dass Du Dir das
> > auch denken bzw. selbst hättest
> > herausfinden
> > können (ohne ein iPhone zu kaufen).
>
> 'Selbst herausfinden' ist nicht so einfach.
> Es gibt zwar einen Screenshot-Service für die
> Darstellung von Webseiten auf
> dem iPhone, aber der soll für
> Windows-User nicht besonders realistisch sein.
Kann man denn in Deutschland nicht das iPhone im Laden testen?
> > Screenshots vom iPhone wären dann aber
> > echte Screenshots, d.h. Fotos vom Display.
> > Jedenfalls ist mir keine App bekannt, die
> > sowas innerhalb Mobile Safari macht.
>
> Auf dieser Seite gabs es mal eine Beschreibung
> dazu:
>
>
> http://wowbagger.de/tutorials/iphone-screenshot-machen.html
>
>
> Die Seite ist nun leider gelöscht, verschoben
> oder umbenannt worden,
Normalerweise gips für sowas ja http://web.archive.org/ u.ä., aber dort ist in diesem Fall auch nix zu finden.
> aber zum Glück wurde daraus mal zitiert, sodaß ich den
> wortlaut nun wiedergeben kann:
> [...]
Funktioniert sehr gut -- danke!
Ausserdem hab' ich inzwischen noch die App "WebCapture" gefunden. Damit kann man in einem abgespeckten Mobile Safari Screenshots von Websites machen. Ist natürlich nicht so vielseitig wie der Shortcut.
> > BTW: Das Forum lässt sich mit Mobile Safari
> > in akzeptabler Weise nutzen.
>
> Danke!
> Ich nehme es mal als unbeabsichtigtes Kompliment.
> *g*
Das darfst Du ruhig mal als beabsichtigtes Kompliment verstehen ;-)
PointedEars
