Problems Optimizing for web

LC
Posted By
Liz C
Aug 3, 2003
Views
554
Replies
16
Status
Closed
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!

Must-have mockup pack for every graphic designer πŸ”₯πŸ”₯πŸ”₯

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Y
YrbkMgr
Aug 3, 2003
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
JW
John Waller
Aug 3, 2003
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
JW
John Woram
Aug 3, 2003
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.
MV
Mathias Vejerslev
Aug 3, 2003
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
P
paul
Aug 3, 2003
Yes, give us a link, and I’m sure you’ll get lots of great advice.


Paul Cowan
www.iconix.biz
"Liz C" wrote in message
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!
R
Roberto
Aug 3, 2003
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
CW
Colin Walls
Aug 3, 2003
I think John is on the case above. First thing is what are the pixel dimensions. If they are bigger than 800×600, you have too much stuff there for starters.
LC
Liz C
Aug 3, 2003
OK, well…thanks. The size of the page is 800×600, 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!
Y
YrbkMgr
Aug 4, 2003
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.
JW
John Waller
Aug 4, 2003
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
LC
Liz C
Aug 4, 2003
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.
JW
John Woram
Aug 4, 2003
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.
LC
Liz C
Aug 4, 2003
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.
LC
Liz C
Aug 4, 2003
By the way, thanks to everyone for their comments and assistance. Quick question: If 800×600 is way to big, what do you suggest? Can you show me samples of web pages that are smaller? Optimized well, etc? Thanks….
CW
Colin Walls
Aug 4, 2003
800×600 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.
JW
John Woram
Aug 4, 2003
Quick question: If 800×600 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.

MacBook Pro 16” Mockups πŸ”₯

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections