[olePigeon]

www.wreckcenter.com/new

I'm designing a steampunk theme for the gaming PC part of my business. These are just some test elements thrown together with Photoshop and iWeb.

One problem I've encountered is that the webpage quickly approached 1MB in size just for the graphics alone. With over 50% of America on dialup, I'm worried about the size. On the other hand the website is targeted for PC gamers, I'd assume most of them would at least be using DSL.

[MrsLarry]

It was a bit of a slow load on my T3 connection.

It's a good start. I'd like to see the header, the name of the place, brightened up a bit, it's SO dark. Keep us posted as you make changes.

[andi*pandi]

(In before Besson tells you to use textedit and css...) It looks really cool!

However, even on a speedy intel powermac with t1 line, your page took a long time to load. Like, sitting and waiting with a blank screen waiting.

I would try and create the borders/backgrounds etc to be repeating graphics, which will maybe not look as cool, but be smaller.

Your info in the bubbles should be in html text so it's visible even if people shut off graphics, are viewing on mobiles, etc.

How are you optimizing your images?

[mduell]

Unacceptably slow, 9.24s to load 2.3MB of mostly pngs.

[besson3c]

I'll take my cue from Andi that I'm a little too predictable when it comes to my pickiness about the quality of the code, although I will point out that your code will impact your search engine rankings...

What I'm also wondering is what happens when you have a page where the content exceeds the height of the background paper? Were you intending to provide scrollbars for these pages?

Unless you can be absolutely *certain* that you'll never have content that tall, that people won't be enlarging your fonts in their browser, and that all of this will never change, you're sort of painting yourself into a corner with this design.

[olePigeon]

Originally Posted by andi*pandi 

However, even on a speedy intel powermac with t1 line, your page took a long time to load. Like, sitting and waiting with a blank screen waiting.

Not all of those elements will be on one page. The two CRT screens, for example, will be on their own page. The website is currently bigger than it needs to be.

Originally Posted by andi*pandi 

I would try and create the borders/backgrounds etc to be repeating graphics, which will maybe not look as cool, but be smaller.

This has been a constant struggle between sh*tty graphics that are small, or nice graphics that are big.

Originally Posted by andi*pandi 

Your info in the bubbles should be in html text so it's visible even if people shut off graphics, are viewing on mobiles, etc.

I couldn't find anything in iWeb to allow me to assign alt tags. I may have to comb through it manually later.

Originally Posted by andi*pandi 

How are you optimizing your images?

The background images are 6-bit, indexed PNGs. PNG resulted in a slightly smaller file than an 6-bit indexed GIF. Those aren't my problem because I'm able to easily reduce the number of colors to a reasonable amount so it still looks nice, but the image file size is small.

The logo, gears, and CRTs are 24-bit PNGs. I couldn't find any other way to make an anti-aliased graphic with transparency.

I'm not worried about mobile phones because I'm going to make a second page formatted just for those.

[olePigeon]

Apparently I can do an indexed PNG with an alpha transparency, but I can't figure out how to do that in CS3. If I can figure that out, I could reduce the size dramatically.

[besson3c]

Originally Posted by olePigeon 

I couldn't find anything in iWeb to allow me to assign alt tags. I may have to comb through it manually later.

Even better than alt tags would be making those elements background images too. You can describe the images with text enclosed within your div tags, and set it to text-indent:-5000px so that this text is off the page. Anything that is a part of your basic page template or design for any page of your site would be best served as background-images for a number of reasons: it makes it easy to swap out graphics just by altering your CSS so that the markup remains more a semantic definition of the layout of your site but isn't responsible for actually rendering content, it will probably improve for pageranks for this text to be included with the rest of your content (I don't think regular Google searches weigh stuff in alt tags very highly), and it will also make your markup more compact.

The logo, gears, and CRTs are 24-bit PNGs. I couldn't find any other way to make an anti-aliased graphic with transparency.

Just so you are aware, IE 6 doesn't do transparent PNGs. You don't need transparent PNGs for any of this anyway.

[besson3c]

Originally Posted by olePigeon 

Apparently I can do an indexed PNG with an alpha transparency, but I can't figure out how to do that in CS3. If I can figure that out, I could reduce the size dramatically.

I don't see anything there which requires transparent PNGs, I think you are just creating more stuff which has to be loaded this way.

[olePigeon]

Originally Posted by besson3c 

Just so you are aware, IE 6 doesn't do transparent PNGs. You don't need transparent PNGs for any of this anyway.

IE doesn't but DirectX does. I have a JavaScript that I got to work on my other webpage that renders PNGs under IE using DirectX instead of the IE image handler.

I've made about 2 websites in my life, so I've been approaching this from a Photoshop standpoint. Obviously very different worlds.

[besson3c]

Originally Posted by olePigeon 

IE doesn't but DirectX does. I have a JavaScript that I got to work on my other webpage that renders PNGs under IE using DirectX instead of the IE image handler.

I've made about 2 websites in my life, so I've been approaching this from a Photoshop standpoint. Obviously very different worlds.

Fair enough, although I would bet that there would be other benefits from not relying on transparent PNGs, namely faster page loads.

[MrsLarry]

There's a quick, easy Javascript that resolves the transparent PNG issue in older versions of IE.

I have it somewhere, I'll see if I can find it.

[Chuckit]

IE7?

[shifuimam]

There's no reason to make your header image several different images. Make it one image instead of three. The same goes for your content area (the parchment and the background behind it).

There is a fix for transparent PNGs in IE 6 and 7, but it will slow things down considerably if you use it with large images or with too many images on the page.

JPEG will make a much smaller file than PNG in this case. You don't HAVE to use PNG - JPEG at 60% quality looks pretty damn good:



That also gets the total file size of your header down to only 82.24KB. If you're that set on using PNGs, the file size goes up to 471KB - which is still smaller than using individual images for every component of the page. Also, transparency data makes the file size goes up. Use a solid black background for the header image, like my screenshot above.

[besson3c]

What is supposed to happen when the content is taller than the background paper graphic?

[olePigeon]

Originally Posted by shifuimam 

There's no reason to make your header image several different images. Make it one image instead of three. The same goes for your content area (the parchment and the background behind it).

I'll play around with those options.

Originally Posted by shifuimam 

JPEG will make a much smaller file than PNG in this case. You don't HAVE to use PNG - JPEG at 60% quality looks pretty damn good:

The problem I had with JPEG is the inconsistency of the compression. It looks good by itself, but when I put it next to something else as a continuation, there's a noticeable break between images.

Maybe I need to work with the compression slider more.

[olePigeon]

Originally Posted by besson3c 

What is supposed to happen when the content is taller than the background paper graphic?

It won't be.

[olePigeon]

I just realized that I was using the wrong paper file on the website. It was loading an uncompressed file over 1MB in size. Oops. I'll compress it.

[shifuimam]

Originally Posted by olePigeon 

The problem I had with JPEG is the inconsistency of the compression. It looks good by itself, but when I put it next to something else as a continuation, there's a noticeable break between images.

Maybe I need to work with the compression slider more.

That's understandable.

You can use PNGs, but don't use layers like you're doing now. You've got a solid background, so just take your original master PSD and break it up into pieces. Use CSS to align everything correctly, and you should be all right on the load times. The transparency is definitely part of what's making your PNGs so big.

[olePigeon]

I did some serious compression and optimization. I reduced the size of the website by 1/3. Looks pretty similar to the first version.

[msuper69]

Loads in about 2 seconds on a 2nd generation 1.83GHZ MacBook Air.

[olePigeon]

I guess that's much better than 9 seconds.

[Oisín]

Originally Posted by msuper69 

Loads in about 2 seconds on a 2nd generation 1.83GHZ MacBook Air.

Sure you’ve nothing cached?

Takes about 10 seconds here. The ‘metre’ thingies looked like they were cached, as they both appeared pretty much instantaneously; the rest of the site drudged away for 10 or so seconds before being done.

[olePigeon]

The meter thingies are only 144 KiBs. They shouldn't make that much of a difference.
The entire website is 1050 KiBs. Is your download limited to 128 Kb?

(I removed the meter thingies because they're not supposed to be on the front page, but they'll be on one of the others.)

[Thorzdad]

Download took about 10 seconds here, too.

[Oisín]

Originally Posted by olePigeon 

The meter thingies are only 144 KiBs. They shouldn't make that much of a difference.
The entire website is 1050 KiBs. Is your download limited to 128 Kb?

(I removed the meter thingies because they're not supposed to be on the front page, but they'll be on one of the others.)

Nope, 20 Mbit (in theory—about 15 in practice).

1 MB for an entire site is on the heavy side, but not unacceptable these days. Shouldn’t take that long for just 1 MB.

[msuper69]

Originally Posted by Oisín 

Sure you’ve nothing cached?
...

First time I ever visited the site so I'm sure.

[olePigeon]

Mine only takes about 2 seconds from work and from home, and that's after I've reset Safari. I'm not sure why it's taking some people 10 seconds or more.

[Oisín]

Could just be really long ping times for each item? Though ping times here don’t seem that bad:

Code:
PING wreckcenter.com (64.71.177.233): 56 data bytes
64 bytes from 64.71.177.233: icmp_seq=0 ttl=53 time=223.295 ms
64 bytes from 64.71.177.233: icmp_seq=1 ttl=53 time=220.233 ms
64 bytes from 64.71.177.233: icmp_seq=2 ttl=53 time=220.494 ms
64 bytes from 64.71.177.233: icmp_seq=3 ttl=53 time=220.385 ms
64 bytes from 64.71.177.233: icmp_seq=4 ttl=53 time=221.492 ms

--- wreckcenter.com ping statistics ---
5 packets transmitted, 5 packets received, 0% packet loss
round-trip min/avg/max/stddev = 220.233/221.180/223.295/1.146 ms

[futuretechnology]

The background is cool. I like what you've done with it. Loading was a little slow for me, but I have the slower DSL.

[shifuimam]

It's still loading slowly for me on a 20mbps FiOS connection.

You don't even need to be using multiple images. I redid your site with one image and got it down to under 400Kb total by making it an 8-bit PNG. The style of your image is grainy, so cutting it down from 24-bit to 8-bit color actually works well for it and will significantly cut down on your file size.

You can look at it here:

Untitled Document

Also, you can see the difference in load times here:

Your version - http://tools.pingdom.com/?url=http:/...&save=true
My version - http://tools.pingdom.com/?url=http:/...&save=true

[olePigeon]

I don't seem to have the load time issue, but many of you do, so I'll take your advice. Your version does look good. I think I'll compose the page in Photoshop, then export the entire thing as an indexed PNG and just set it as a background like you did. Then layer my text and links over it. Seems like the best way to do this.

Thanks for the help everyone. I hope to get this webpage up soon.

[olePigeon]

OK, website should be really speedy now. I fiddled with the advanced JPEG options and got the image down to just over 160KBs. I set it as my page background. Looks nearly identical to the original. If I need to make any changes, I modify my composite file in Photoshop and just save it as JPEG again.

[shifuimam]

Looks good. Is there any reason why you're using a different copy of the image for each page? I'm guessing it has to do with using iWeb to design your site, but it means that the image has to re-cache every time the user clicks a link (for the first time; it's cached after that).

[olePigeon]

It's still loading really slow. I'm guessing it's because of iWeb and its liberal use of JavaScript for everything?

[olePigeon]

Originally Posted by shifuimam 

Looks good. Is there any reason why you're using a different copy of the image for each page? I'm guessing it has to do with using iWeb to design your site, but it means that the image has to re-cache every time the user clicks a link (for the first time; it's cached after that).

It must be iWeb. I'm using the same picture.

[Oisín]

Originally Posted by olePigeon 

It's still loading really slow. I'm guessing it's because of iWeb and its liberal use of JavaScript for everything?

Not exactly Snappy™, but it’s definitely acceptable now. Takes about three seconds to finish loading completely now, and stuff actually shows up from the get-go (which it didn’t to begin with—it was just a white screen where everything just popped up at once after 10 seconds).

[olePigeon]

The entire website isn't even 200 KB. I think iWeb is messing it up.

[shifuimam]

This is a pretty simple layout to code with XHTML and CSS by hand - why don't you give it a shot? You can look at the example I made to see how I did it. Your site will likely load a bit faster then, too.

[olePigeon]

I'll give it a try. I've never coded XHTML or CSS in my entire life. I'm HTML3 strict.

[shifuimam]

If you run into any problems, feel free to IM me at shifuimam via all channels (MSN, Yahoo, Gtalk, AIM).

[besson3c]

You will also fare better with the search engines having clean, semantically correct code.

[olePigeon]

Yay. I found a nifty website with lots of examples and way for me to just fiddle around with CSS and see the changes immediately.

So I was able to create my navigation menu in CSS just by replacing the elements in their example. Turned out pretty good, I think.

I'm having loading time issues still, but I think it's my webserver.

[olePigeon]

Why is it taking 9 seconds to load not even 200 KBs of data?

[besson3c]

Originally Posted by olePigeon 

Why is it taking 9 seconds to load not even 200 KBs of data?

If your website is indeed 200 kb, it could be a number of things, but none of them actionable unless you admin the server.

[Oisín]

Originally Posted by olePigeon 

Why is it taking 9 seconds to load not even 200 KBs of data?

Who’s your host?

[olePigeon]

Originally Posted by Oisín 

Who’s your host?

It's my friend's private server. I'll just have to send him an email. He upgraded it which killed PHP. I'm guessing there are other problems.

Meh, it's free.

[olePigeon]

I need to figure out why my Nav bar lines up correctly in Safari but no Firefox.

Oh, I figured it out. It's "absolute," regardless of the window size. I guess I need to make it relative somehow.

[besson3c]

You need a CSS reset library so that all of the defaults that the browsers preset are eliminated so that they are each on a level playing field. I like the Yahoo YUI CSS reset library, myself. This advice is general, I haven't look your the CSS for this particular site, but I can if you'd like.

You really should also move your CSS to a separate file and reference it with a <link> tag. In general, you never want inline stuff - be it Javascript or CSS. You will get better search results when Google is able to find your content easily, preferably near the top of the page. Anything that is not specific to your content that Google doesn't care about such as CSS and Javascript should be moved to external files.

[olePigeon]

My nav bar was outside the "main" div part of the website. I just moved it inside and now it works.

I don't know about linking. I guess I'll look it up.