When The Graphics Are "too Heavy"? bg-images and stuff

[Baniboy 3]

When are the graphics of the template too heavy? Like when it gets out of hand? 100kB? 150kB? more? How some people get so smooth jpg files with massive dimensions and small file size? How long dial-up people are willing to wait for my site load?Sooo... I was designing a template (960px wide design) for my site and when I was designing a banner. After I designed the background the banner text is going on, I saved and checked the file size hoping it'll be small, cause I used .jpg. But no, 960x200px image has a file size of 360 kB! I tried png(with maximum compression) and I got a file size of 150 kB. I also tried using more compressed jpegs, but the quality was horrible.I'm suffering from this thing, and I find that a wordpress theme(named "Eos") has a jpg background image sized 5000x300px(sliced image) and it's file size is only 66 kB with good quality! How the hell is that possible? Can I do that?

[rayzoredge 2]

It's too heavy when your intended audience has to wait too long for your pages to load. Too long is a subjective time period, but all end with the same consequence: when they stop viewing your page and just give up by closing the window or moving on to something else. Most people have some sort of high-speed connection nowadays, but there are a fair amount of people who go by 56K still, whether they are physically or financially incapable of attaining high-speed solutions.

Cater to at least DSL customers so that you keep your possible audience as large as possible, then offer a "lite" or text-only version, or even a mobile version, for those that suffer with 56K or around that bandwidth limitation.

JPEGs are great for compressing images, but they're not that great in displaying things as you intend for them to be displayed. The JPEG format introduces "artifacts" and doesn't show an image in the best quality possible, but you can compress the crap out of it... which leads to faster load times. You would use JPEGs for photos, large images that aren't affected too much (or if you don't mind) by pixelation and JPEG artifacts, or even full backgrounds, and for the most part, they would only get as large as 300KB or so, depending on how large the image is in dimension.

For smaller graphics, depending on what you want to showcase, you would want to go with GIFs or PNGs. GIFs are limited to 256 colors and are capable of animation, and in my opinion, PNGs are awesome with the combination of display quality and compression. (However, PNGs can still get quite large, which then you would use JPEGs for applications in large-image territory.)

When you design an image or graphic, save it in those three separate formats and visually compare them. Weed out any obvious degradation and then choose by file size.

There used to be a site called Web Site Garage or something, but Googling for it tells me that they shut it down a while back. I used to use it for my older websites to make sure that my pages loaded up quickly without too much of a slowdown when I added dynamic content to it. I'm not sure what's out there now to gauge web site loads, but I'm sure you could find some sort of optimization tool to help you get an idea of what a 56Kbps user would see in contrast to a 7.0Mbps user. (Adobe Flash is awesome with bandwidth restriction, allowing you to see if that cool Flash intro you made would be viable for a DSL or even T1 connection and forcing you to optimize your SWF for the sake of your viewers.)

Addendum: Found something in your lane. It's a pretty awesome tool and probably will help a TON of web designers/developers out when trying to optimize for their audiences. It's kind of outdated as the fastest connection is a 1.44Mbps T1, but hey, it works... and it provides lots of information akin to the Web Site Garage program I used years ago.

Edited September 18, 2009 by rayzoredge (see edit history)

[rpgsearcherz 5]

I would say that the total graphics being loaded on a main page (I say main because sub-pages can have disclaimers to allow visitors to know ahead of time they are graphically intensive) would be around 400 KB. This includes everything needed to load it - text, graphics, background, etc.Keeping it at around that speed helps dial-up users because many people do not want to wait forever to load. At 400 KB's it should take a dial-up user around 10 seconds to load which is already cutting it quite close.

[truefusion 3]

One common mistake i've seen people do is use images where HTML and CSS would have done the job. Another mistake, though rare, is using multiple images that all display the same thing when they only need to display one of the images. Another mistake is designing a layout that doesn't match the purpose of the site. Do you need a layout that looks good or that makes your website do the job of a website? Take out what you don't need. If you were inspired by another website, don't try to do everything they've done though it may be in your own way.

Is a complex banner really needed? What do you want people to remember, your site's name or how the banner looks like? I'm not sure what the site is about or if the template is made to be suitable for all kinds of sites, but it's better if you design with the purpose of your site, or a specific kind of site, in mind. I should point you to a few pages concerning optimization: 1, 2, 3. Although a user who is really interested in your site would most likely wait as long as needed for the site to load, a website that isn't as popular as it could be would not have many visitors like that. You should also note that optimization isn't limited to how fast the user can download the image, it also concerns the website's bandwidth. While browsers tend to cache stuff, that starts becoming irrelevant when you have multiple users visiting your site.

[Baniboy 3]

Thanks for the replies and optimization links.@Ray: 400KB in 10 seconds with dial-up? How did you calculate that one? 56kbits is 7kB/s and 400 divided by 7 is 50. It would take 50 seconds.I've decided to make a site with the graphics load of around 100 kB or less if possible. First I was going with a design with rounded corners and stuff, but tf poin about what the site is for woke me up, I don't need a fancy looking site. I'll just spice things up with a few gradients and I'm done.Thanks all.Could anyone who owns their own site here post their size of their graphics load in a standard page(just interested)

[inverse_bloom 0]

I'd probably suggest GIF images if you are creating "graphics" for your website. When you begin playing around with these you find that can get substantially small file sizes for images that are quite large on screen. As rayzoredge mentioned they start at 256 colors, but that doesnt stop you from cutting out additional color information. By decreasing color information to say 30-40 colors for a general graphic you get very close to "optimum" compression (15kb for a BIG graphic).While taking color information out you pay attention to pixelation around "color" borders within the image. Although after saying all that GIF images are no good if your graphic has a lot of tonal graduations. In which case PNG or JPG maybe the best option. If you use JPG then saving or exporting the image with certain options can increase quality and also reduce file size, if you have the option to do so encoding a JPEG as: optimized, sub format - optional (4:4:4) at a compression rate of 6-12% from the original is ideal. (sounds like a mouthful but is worth looking into).Your about right, 100 kb or less is ideal if you want people with traditional modems to feel good about accessing your site. About 7 years ago 60 kb was the ideal so 100 kb now is definitely good. As truefusion mentioned CSS is a great way to get page size down, especially appropriate if its used soley on the nav bar. As trufusion mentioned if you can cut out unnecessary graphics out of your page this will decrease size and will enhance your sites appeal. Also instead of gradients you may be better off choosing well chosen whole colors instead, unless of course your gradients are slight and are slightly superimposed over a color (like what Adobe has done to spice up their welcome screens on their products initial load ups ).