Problems Optimizing for web

[Liz C]

I have a large PS file....1.3MB that I need to slice up for a web site, but I am having a hard time balancing the need for low res and the need for crisp, quality images. I am not positive what I should be shooting for for total size of the web page, but I know 150K seems way too big. Yet even at that size, it looks pretty bleak. Can someone give me some pointers or point me to resources that could help me? Thanks!

[YrbkMgr]

That's a big piece of meat to chew, so to speak Liz.

What you are facing is, IMO, the dividing point between novice web developers, and aspiring pros.

You will get a lot of opinions on the details. My only advice to you would be this. Form follows function - you must balance the needs of the few against the needs of the many and decide for yourself, what route to take.

I, myself, err on the side of quality over file size. If someone has to wait a little bit, I'm going to make it worth their while with a good crisp presentation of my company. I want them to like to be there, and there are other factors that will drive them away before load time will. But that's me <shrug>.

Peace,
Tony

[John Waller]

Couple of points come to mind:
1) conventional web wisdom suggests a max page weight of around 45K-50K to
ensure a page downloads within 10 secs over a 56K dial up
2) why do you *need* to slice the image? is it part of a navigation system?

Can you post a URL showing the image and describing what you want to achieve
with it?

--
Regards

John Waller

[John Woram]

>I know 150K seems way too big.

What's the pixel dimensions of the image? Is it about 800 x 600 pixels? If so, does it have to be that big? Also, does the entire image have to be max quality? If not, maybe you could do some slicing and save small sections at high-quality, and the rest at lower quality.

[Mathias Vejerslev]

Also, it is important to understand the way compression works on GIFs and JPEGs.

If you understand, you can design for the final file format.

For instance, I rarely use a JPEG in my web design, unless it´s a photo, and my web pages rarely exceeds 50k - often the total graphics are less than 20k.

Mathias

[Paul @ Iconix]

Yes, give us a link, and I'm sure you'll get lots of great advice.

--
Paul Cowan
[url]www.iconix.biz[/url]
"Liz C" <elizabethcomeau@sbcglobal.net> wrote in message
news:1dea2cc4.-1@WebX.la2eafNXanI...

> I have a large PS file....1.3MB that I need to slice up for a web site,

but I am having a hard time balancing the need for low res and the need for
crisp, quality images. I am not positive what I should be shooting for for
total size of the web page, but I know 150K seems way too big. Yet even at
that size, it looks pretty bleak. Can someone give me some pointers or point
me to resources that could help me? Thanks!

[nospam]

I totally disagree with the 45 to 50k file size thing. It is my opinion that
as long as it isn't out rageous and doesn't turn out to be a waste of the
visitors time to wait for it that you do what needs to be done to get what
you need done.

May of my sites pages are larger than 45 or 50k and very little of that has
to do with images. I have text articles that easily exceed that on almost
all of my sites. I have yet to get a complaint.

I think the 45 to 50k thing may have been right back in the old days when we
have 2400 baud modems. But, now I don't think it is very critical. It is
like saying you have to use web safe colors. That too is a bunch of bull.

Also, add to the fact that broadband is becoming ever more popular, why I am
don't know I see little point to it for surfing the web or getting your
e-mail especially for the high price and poor service most companies offer
but any who that negates the size problem too.

What you need to ask yourself is...is the 150k image really needed? Is it an
important part of your overall message or is it eye candy? If it is eye
candy then think of another way of dressing up your site. Most times there
are other ways to make a stunning site without needing 150k images anyways.

Just my 2 cents,

R

[Colin Walls]

I think John is on the case above. First thing is what are the pixel dimensions. If they are bigger than 800x600, you have too much stuff there for starters.

[Liz C]

OK, well...thanks. The size of the page is 800x600, yes. I cannot imagine making it smaller considering what I have to put on this page. And to clear things up, the whole page...all of the images combined = 150K (less now...more like 130K). It is a site devoted to contortion videos and mpegs so it needs to be visual (lots of photos, graphics). If anyone wants to take a look:
flexflicks.com/temp/flexflicks.html

THANKS!

[YrbkMgr]

Don,

It was me who said 50K, rather 150K is not too large.

All due respect but think about it. She has VIDEOS on her site. Anyone on dialup expects to wait a bit, and the fact is, they are going to wait even longer for the content. Much much longer. So what's the benefit - they get there, the page loads quickly they're happy. They download a 1.5mb video (or larger) - you really think they'll be annoyed at the page load time? I strongly disagree.

This "conventional wisdom" thing is strange. Form follows function is a better rule.

[John Waller]

> All due respect but think about it. She has VIDEOS on her site.

True but not on the home page which is around 148KB and should be at least
halved if dial up visitors are to be encouraged to visit regularly (which I
guess is the target market for this website).

There are lots of graphics/images on the home page (which are invisible to
Search Engines) which take a long time to download via a 56K dial up. I'm
totally in favour of the good use of images on websites but the tradeoff is
download time and there is a cutoff point (which I still consider to be
around 50K).

A quick downloading page with judicious, but not spartan, use of images will
gain any site a good reputation (it's the no.1 comment I receive from my
clients) and can provide enough information so visitors know what to expect
from the site. Once they know it's going to take a while to download videos
and other media, then they have an expectation and can choose to wait for it
to download.

The "conventional wisdom" thing has been established over a number of years
by seasoned web professionals, usability studies, visitor feedback and other
metrics. Web safe colour and <font> tags may be things of the past but
download times and the use of large images are still a major issue (and
graphic designers and artists of traditional media seem to struggle with
this the most).

A fundamental issue for web designers and their clients is to decide on
their target audience and how that audience connects to the web. If it can
be established that broadband is the majority audience then 150K pages are
OK. However, dial up is still very prevalent in most markets esp. outside
the USA; it's easy to forget that fact and the frustration of waiting for
50K-100K+ pages to download, if you live in a broadband environment.

--
Regards

John Waller

[Liz C]

My goodness, I guess I have spurred on quite a controversy here, LOL. OK...to address some of your comments, I did not choose whether to make some of the graphics jpeg or gif, photoshop makes that choice, it seems, when I save for web...I know I can change the format of each visible slice in the save for web viewer, but I cannot seem to scroll down to the bottom to change them to gifs...there is no scrollbar! (this has always been a mystery to me)

Also, I did take your advice and combine some of the slices in the header, but the file size seems to be the same. I cannot combine all of the slices because I use them for buttons. Or would creating an image map be preferable to using the slices? Not very experienced at image maps, but I suppose I could learn...

Thanks guys!
P.S. If any of you know a good online tutorial or even a book about how to use PS to create web pages, I would like to know about it. Seems I have a lot more to learn. My PS books barely scratch the surface on the topic of web-designing with PS.

[John Woram]

Just to see what would happen, I did a PrtScrn of your home page, then pasted it into PS and extracted two JPG images--one for the header across the top (30Kbytes) and the other for the photo montage (18K). The HTML page was about 2.5K, but this does NOT include an image map, or the stuff at the bottom of the page. Anyway, if you don't mind getting into image maps, you could probably cut down the total file size considerably.

I don't know if it's worth the bother though. Maybe you could check the page with someone who has a slow dial-up connection--just to see how it looks.

[Liz C]

My goodness, I guess I have spurred on quite a controversy here, LOL. OK...to address some of your comments, I did not choose whether to make some of the graphics jpeg or gif, photoshop makes that choice, it seems, when I save for web...I know I can change the format of each visible slice in the save for web viewer, but I cannot seem to scroll down to the bottom to change them to gifs...there is no scrollbar! (this has always been a mystery to me)

Also, I did take your advice and combine some of the slices in the header, but the file size seems to be the same. I cannot combine all of the slices because I use them for buttons. Or would creating an image map be preferable to using the slices? Not very experienced at image maps, but I suppose I could learn...

Thanks guys!
P.S. If any of you know a good online tutorial or even a book about how to use PS to create web pages, I would like to know about it. Seems I have a lot more to learn. My PS books barely scratch the surface on the topic of web-designing with PS.

[Liz C]

By the way, thanks to everyone for their comments and assistance. Quick question: If 800x600 is way to big, what do you suggest? Can you show me samples of web pages that are smaller? Optimized well, etc? Thanks....

[Colin Walls]

800x600 need not be way too big, but how many Web pages are simply filled with one image? Usually there's some HTML "glue" that provides the structure, layout and textual content.

[John Woram]

>Quick question: If 800x600 is way to big, what do you suggest?

I think some folks (like me, for one) thought you were referring to an image of that size. But after viewing your page, I think you mean that you designed it to fill a full window on a monitor whose resolution is 800 x 600. The largest image on your home page is 723 pixels wide and 300+ high, I think. So that gives you a little white space on either side of it--and more if someone views it at 1024 x 768 or greater.

Creating a single image file and using image mapping for the buttons would reduce the file size, but may not be worth the hassle if you're not comfortable doing that.