Printable View
Hello all, I'm new to this forum and new to website design. My website is www.txslipi.com
I'm wondering if someone can help with my graphics. They seem to load very slowly. The largest graphics file (all are gif) is 47KB. All gif files have been compressed and were saved with a resolution of 96.
Do I need to attach my default or index file so that you can help?
Please help!
Your TX SLI PI
Hi,
Firstly, regarding your graphics, They seem only slightly slow to me. this may be your server (or my connection). You could try preloading the images, but....
Secondly, your page is wriiten in VML (Vector Markup Language) a Microsoft only style of web page, which means your website cannot be viewed in any other browser and I don't know if preloading can be done on your pages.
:)
Bob90,
Sorry, but as a "newbie", how do I "preload"? I can take care of the VML issue. It is a simple click on my template.
And, thanks for your reply! :)
P.S. - Bob90
My provider is OMNIS...any comments?
Regards,
TX SLI PI
To preload an image first create a new (empty) image object
Then give that image a source fileCode:image1 = new Image();
That image will the be loaded int the browsers memory.Code:image1.src = "image1.gif";
To contiue with more images use different names
This is just a very simple image preloader, that requires you type out each image individually, but seeing as you have less than 10 images to preload it will be fine.Code:image2 = new Image();
image2.src = "image2.gif";
As for your provider, I know nothing. Sorry, but I'm new.
:)
Well, it does work -- it just looks rubbish :) It's also completely invalid.
A simple preloading function:Bob90: The rest of Things of Beauty is interesting as well. :)Code:function preloadImages() {
for(var i = 0; i < arguments.length; ++i)
(preloadImages.store[preloadImages.store.length] = new Image()).src = arguments[i];
}
preloadImages.store = [];
preloadImages("image1.jpg", "image2.png", "image3.gif" /*, ... */);
Preloading won't speed it up... it'll just preload in the same time then show them. Not sure what the advantage is there.
If you have images... yes, it'll take a little longer. But that's all you can do. If you save the .gifs with fewer colors or more compression, they'd be smaller, but also lower quality, which might or might not be noticable. Also, you could try .jpg and .png to see if either is better.
urrggghhh. Office.
No Office there.
But your <body> tag is a little off. You shouldn't have two, and since when do we put CSS right in the middle of a tag (not inside a style attribute, at least)?
You also don't have a DOCTYPE.
Your largest image is 47KB?! That's insane! As a general rule of thumb, you should keep all of the graphics on each page of your site to a COMBINED MAXIMUM of 60KB (i.e. the index page can be 60KB, and each sub page can also be its own 60KB worth of images). This is with the exception of photo albums.
I optimize my images using GIF format for images with text or lines, as JPEGs will put compression fractals around them. When using GIF, you can usually customize your color pallette - what I do is start with the default 256 colors, and try taking the pallette down to 200 colors. If it still looks good at 200 colors, I'll drop it to 150, if it's still good, I'll drop it again to 100. If it looks bad at 100, I'll up it to 120. If it's good at 120 colors, I'll try upping the loss level on it a bit. It's a process of trial and error until you find just the right number of colors, and just the right loss setting to minimize the filesize while keeping the quality nearly perfect. In many cases, I've been able to cut vertor images down to a color pallette of 5 or 6 colors, with absolutely no loss of quality whatsoever - but I've managed to shave 30KB off the image!
Don't ever save a bitmap (photograph), or heavily shaded vector as a GIF though, it usually won't come out very good, as most of them require more than 256 colors. If it's text over a bitmap or shaded vector, save it as a JPEG without the text on it, set it as a DIV background image, and hard code the text on top of it. If it needs a special font, save the text as a separate image (GIF... many times text images can be a 3-4 color pallette) with a transparent background, set the JPEG as your DIV BG, and code your transparent text image on top of it.
My aplologies if this sounds confusing, but I'm trying to explain the best I can. Image optimization can be somewhat of an advanced topic, especially if you're talking about using special techniques which may require at least intermediate CSS knowledge to properly implement in the actual website. The best way to learn is to experiment on your own for a while until you are comfortable. Hopefully this is at least enough info to get you started, and headed in the right direction to finding the info you need.