|Creating a large background image in Fireworks|
question about browsers, css, etc...
| 3:57 pm on Aug 8, 2002 (gmt 0)|
Hello, I am very new to web design and have some concerns over using a large background image as the major design on the home page. I only plan to do this on the home page for initial effect. I am concerned about how the design will display. Does anyone know what screen resolution is most commonly used? (this is a site for a university department so I assume most visitors will have current equiptment). Is is ok to use an image that is 1024x768?? Is it acceptable to use a css (background-repeat: no-repeat) to prevent tiling? My final question is, can you assign a .class to the BODY tag in a css? I apologize for my ignorance!
| 4:22 pm on Aug 8, 2002 (gmt 0)|
Does the image scale well? Will it look good at both 1024 * 768 and at 800 * 600? How large is the image file? You should try to cut it around 15 - 30k if there isn't too much else on the page.
For sure, use CSS no-repeat and background-position: center; to drop the image if you want.
In your style sheet just use:
No need for a class actually inside the body tag itself.
| 7:09 pm on Aug 8, 2002 (gmt 0)|
Yes, the image seems to scale well in all settings, but with the lower settings it crops the page in a way I'm not too fond of. My screen is set to 1024x768. Is that the default setting for most? As for image size, saved as a JPEG the file size is 83k with a load time of 26 second @ 28.8kbps. Saved as a GIF, it was 120-something. I have alot to learn about images, but I thought the opposite would be true. It doesn't have many colors. Thanks for the information, and this css tips.:)
| 9:09 am on Aug 9, 2002 (gmt 0)|
Hmm. Lots of issues here, welcome to the wonderful world of web graphics.
It's not easy to find out what the most common screen setting is. The two most common are 800x600 and 1024x768. Very few people -- if any -- use 640x420 (or whatever it was) these days. But quite a few have screen resolutions set higher: these are probably graphic designers and/or people with huge monitor screens -- but they often don't maximize their browser windows anyway (especially if they're using Macs).
An 80k image is huge. As a rule of thumb, you want the whole page -- code, text, stylesheets, images, everything -- to be not more than about 100k, more like 50k or 60k if you can manage it, unless you are fortunate enough to be developing an intranet site or a kiosk application. But your question about why the JPEG is smaller than the GIF throws up a whole load of issues.
It's not so much the number of colours that make the difference. It depends on how you save the image. Of course, if you have a gradient from, say, red to pink, you might intuitively think you have two colours (red and pink), but there could in fact be dozens.
You can take any GIF, convert it to a JPEG and then compress it to a size smaller than the original. This will work best if there are no hard contrasts anywhere. But this will usually involve overcompression.
Look carefully at your JPEG, paying special attention to areas of flat colour and sharp edges in the image. If you see a blotchy, speckly effect, or colours bleeding, you have overcompressed the image. JPEG compression works by throwing out information it thinks you won't notice, so you have a choice between high quality large files and low quality small files. JPEG isn't good for flat colour hard edges type images (e.g. cartoons) because the "JPEG artefacts" are noticeable and can make the image look really ugly.
Also, look at the GIF. It could be that it is "dithered". "Dithering" is when a colour is approximated by mixing pixels of different colours: e.g., orange can be approximated by using a pattern of red and yellow pixels. This is sometimes useful, but will often increase the size of the GIF file. When you convert a graphic to GIF format, make sure any "dithering" option is turned off.
| 2:05 pm on Aug 12, 2002 (gmt 0)|
Oh boy, is there an embarassed face icon? I have so much to learn. One big problem was a photograph I had included in my background image. Once I removed it I was able to save the background image in GIF format at about 16K (as apposed to 80 something!). Then I reduced the photograph to about 30K, which was as small as I could go without seriously compromising quality, and added it to the page using a table. So my question is, how does one find out the total KB of a page, including html, images and stylesheets? It seems the html document is 5K, and all the images are about 50K at most. The style sheet is 687 bytes. Is it simply a matter of adding all these numbers together?
| 3:41 pm on Aug 13, 2002 (gmt 0)|
You just add them all together, that's right.
No need to be embarrassed, we all had to learn, too. :) (You should have seen my very first site, it was disgusting.)
| 4:11 pm on Aug 13, 2002 (gmt 0)|
Great! Thank you rewboss, and everyone who answered my many questions. It is nice to have a place where I feel safe in asking them! :) :)