Graphics are slow

[janeth]

When I build a page that has graphics and pictures in it, the pages are very slow to come up. Is there a way to make the pages come up faster? Does it make a difference if there are two pictures side by side? What about one on top of the other.

[Bi4Be]

Well, I can think of 3 things right now:
ONE, get a program or go to http://www.gifoptimizer.com . They will reduce the number of colors used in your image, that can reduce the size of it by TONS.

TWO, I know somewhere on AOTA.net there is a proggie called Image Dicer (or something like that) that will dice up a BIG, LARGE image into smaller ones.

THREE, you can increase load time by putting WIDTH="NUMBER HERE" and HEIGHT="NUMBER HERE" in the IMG tags. That speeds it up some, I don't know how, but it does. (could someone step in and explain? I have always wondered how myself)

-Bi4Be

===
Wooooooo Hoooooooooo!
I got my site up! Tell me what you think! http://www.bid4beanies.com

[Deb]

The image dicer can be found at www.aota.net/Tools/ (http://www.aota.net/Tools/) It's important to note that doing this does *not* decrease load time -- in some cases it can even increase the load time by a second or two. The thing it does do is make the visitor feel like something is happening because they are seeing the images load rather then waiting for the big one... It's a "mental enhancement" not a real one http://www.aota.net/ubb/wink.gif

When a browser sees an image tag and needs to place the image on the page it has to also 'stop and think' about how much room the image needs.. e.g. how tall and wide is the image so that it shows it correctly. By putting the height and width tag with the image you take that task away for the browser and allow it to use those miliseconds toward the rest of the page rather then measuring your image http://www.aota.net/ubb/smile.gif "Somebody has to figure out the size of the image" tis better for you to do it once in the code then for "Someone else" to have to do it every time the page is loaded http://www.aota.net/ubb/smile.gif

Make sense?

Deb

[This message has been edited by Deb (edited 02-28-99).]

[Bi4Be]

It's all coming back to me now!
I figured it was something like that!

Thanks Deb,
-Bi4Be

[LeafWind]

Another reason that height and width tags speed up load time is that if you have both text and images on the page, even though load time for text is very fast, Netscape won't show the text until it knows where to put it, and so it will download the images first before putting the text below and beside it. If you put the height and width tags in, then Netscape knows how much space to leave, and will put the text up so your visitors have something to read while waiting for the images. IE, on the other hand, will put the text up without loading the images, but then as the images load, it moves the text, which can cause an unplesant "flicker" effect if there are several images loading and causing the text to move.

For large images with lots of colors, JPGs are often smaller than GIFs, but because of the way the image info is stored, JPGs have a lot of "overhead" information, so JPG filesizes will be bigger than GIFs for small images (like buttons and bullets).

Saving GIFs as 89a interlaced format makes them load "fuzzy" at first and then get clearer, which means your visitors will see something sooner, rather than waiting for the clear image to load line by line. However, I've read that making a transparent GIF interlaced can cause some older browsers to crash. But if you don't *need* transparency, your file sizes will probably be a bit smaller if you don't save them as transparent.

The way GIFs compress file size is by saving "areas" of the same color as copies of the same pixel -- if you've got a block of your image that's 50 pixels by 50 pixels, it will save the color infor for the first pixel, then say "do the same for 49 pixels across" then for the next 49 rows beneath that, it will just say "do the same as row 1" -- which saves lots and lots of bits of file size. So if you can create images with large areas of the same flat colour, your file size will be much smaller than a similar image that has areas of patterns and textures instead of flat color.

Hope this helps!

Bekariso


------------------
www.LeafWind.com (http://www.LeafWind.com)
Growing web sites that thrive in the winds of change.

[Bi4Be]

Whoa... how do you know all of that!?!?!? http://www.aota.net/ubb/smile.gif
Now that we are on the topic of graphics and gifs, I have a question:
Alot of times, when viewing people's sites, the gif's or gif animation's show black area's where all the "transparency" is supposed to be. Why's that? I'd love to know how to fix it, it drives me crazy all day long! Grrrrrrrrrr....
http://www.aota.net/ubb/smile.gif
-Bi4Be

PS: My apologies Janeth, I seem to have taken over your Topic! http://www.aota.net/ubb/biggrin.gif

[hearts]

my guess on this would be .. and don't assume I am right, cuz alot of times, i just guess! http://www.aota.net/ubb/wink.gif

It could be that the image was not saved in the correct format when created. As Bekariso mentioned, it is best to save gif's in the format of 89a.

I don't know about the quality decrease with gif's but I do know the jpg's lose their quality if altered and saved over and over.

When I work with images, not animations, I save them as .tif and then do what i need to with them, and then when saving i chose "save image as" and then call it a .gif or .jpg. Main reason I do this is for resizing, it seems to help from jagged edges if I am decreasing an image and helps an image from blurring if i increase its size.

SO.. how hard is it to use this dicer tool? I am curious! http://www.aota.net/ubb/wink.gif

------------------
~~~ hearts ~~~

Heartistic Designs www.heartisticdesigns.com (http://www.heartisticdesigns.com)

Hearts www.heartsangels.com/hearts (http://www.heartsangels.com/hearts)

Heartistic Wishes www.heartsweb.com/heartisticwishes (http://www.heartsweb.com/heartisticwishes)

















[This message has been edited by hearts (edited 02-28-99).]

[LeafWind]

You asked where I learned all that stuff about graphics?

Mostly from Ask Dr. Web at http://zeldman.com/abtgraph.html , and other similar design tutorials and essays. As recently as a year and a half ago, I was using a "old standards" 28.8 modem that I had to set as 14.4 for my ISP to communicate with it, and when it was raining outside, it would only work at 9.6 -- so I'm still very sensitive to load time and I don't want to put my visitors through that "long hard stare at nothing" that I had to get used to.

I don't think interlaced makes the file size any smaller than non-interlaced ones, or vice versa, it's just a psychological effect that makes people think the image is downloading faster. Personally, I prefer to do without the fuzz, too. ;-)

A pet peeve of mine is sites that are entirely graphics -- all the text will be a big graphic, too. They take forever to load and there's NOTHING to see while you're waiting for the images. Sure, visitors will see your text formated exactly how you want it, no matter what their browser -- if they bother to wait that long. I think if you really want to go that route, at least put a "text version" link at the top of the page for those with slow modems, or even for visually impaired surfers (who can get browsers that read the text on the page to them, but the browsers can't read the text on a graphic).

I really don't know what's with the gifs with the black areas where they're supposed to be transparent -- I don't think I've seen that myself (except in my own images when I'm working too fast or too tired and I make the wrong colour transparent - doh!). Are you using a standard browser? If you see it on many pages, it might be a glitch in the browser's interpretation of the image files, rather than the way the people are saving them. But I really don't know. If it's really bugging you, you could try downloading a new version of your browser.

Bekariso


------------------
www.LeafWind.com (http://www.LeafWind.com)
Growing web sites that thrive in the winds of change.

[Jacob Stetser]

Boohoo http://www.aota.net/ubb/frown.gif

Image Dicer is only for Windoze http://www.aota.net/ubb/frown.gif

Oh well.. guess I can do it myself in Photoslop!

jake

[pqwabbit]

I don't think interlaced makes the file size any smaller than non-interlaced ones, or vice versa, it's just a psychological effect that makes people think the image is downloading faster.

figures it would have the opposite effect on somene as psychologoically messed as me! hehehe - interlacing alwasy makes me think its loading a lot slower I dunno why -
Lea

------------------
I can only please one person per day.
Today is not your day.
Tomorrow doesn't look good either.
------------------
www.massey.i-p-d.com/index.shtml (http://www.massey.i-p-d.com/index.shtml)

[pqwabbit]

about interlacing - is an interlaced image smaller than one thats not interlaced? Does it make a difference - My personal preference is not to interlace- it messes with my head watching that fuzzy picture coem onthe screeen adn it seems to tkae longer than a non interlaced image - but that could be my perception - any thought?

What your url? I an tell ya exactly why they're slow loaders if I could see the site http://www.aota.net/ubb/smile.gif Optimizing graphics was how I ended up neck deep in managing rabbitrescue.org (oh man dont even get me started about the graphiucs before I got hold of em! yeeeesh! monsters!)
Lea

------------------
I can only please one person per day.
Today is not your day.
Tomorrow doesn't look good either.
------------------
www.massey.i-p-d.com/index.shtml (http://www.massey.i-p-d.com/index.shtml)





[This message has been edited by pqwabbit (edited 03-01-99).]

[Del]

Don't forget the lowsrc attribute to the img tag. You can build two images, the big slow one, and a smaller one, and use them both with it;

<img src='hires.gif' lowsrc='lowres.gif' height=blah width=blah>

When the page loads, it'll load the lowsrc image first, so there's actually something there for the user to see while the bigger image loads. Quite often I've seen the lowres graphic being something like [Loading Images...] or just a lower resolution version of the big one. It helps grab the viewers eye without them having to wait forever, and you don't have to use the headache causing interlaced gifs.

Del

[LeafWind]

Hey Del . . .

I've been wondering about the lowsrc tag. Mainly, I want to know is, if you have a solid (not transparent) images as the lowsrc tag, and then load another image over top (scr=whatever.gif) which *is* transparent, will the lowsrc image show through as a background? If this does work at all, does it work in all/most browsers? I was just wondering a while back, but ended up doing something else instead of trying it, but I'd still like to know.

Thanks!

Bekariso


------------------
www.LeafWind.com (http://www.LeafWind.com)
Growing web sites that thrive in the winds of change.

[Justin]

I don't think you will see the low res image through the bigger one - don't quote me - but I think the low one disappears. Also, I do know that the older browsers simply will not recognize the lowsrc tag and will ignore it, although I don't know what versions support it.


------------------
Justin Nelson, SFE Software
www.vdj.net (http://www.vdj.net)

[janeth]

Thanks guys. You all have given me lots of information that I know will be helpful.

[jenili]

Jacob, Adobe's ImageReady does image slicing too and is available for Mac and PC.

FWIW: My basic technique for reducing GIF file sizes is pretty simple, but can have dramatic results with some images. Here's how it goes in Photoshop.
1. Image | Mode | Indexed. Web palette, no dithering.
2. Image | Mode | RGB.
3. Image | Mode | Exact.

This usually reduces the color depth by quite a bit, because you're remapping all existing colors to the Web palette and you seldom use all 216 of 'em in one image.

WRT hearts' comment about image quality decreasing with JPG and staying the same with GIF, JPG is a "lossy" compression scheme, meaning some image information is lost in the save. It infers the colors of some pixels from the colors of surrounding pixels, and doesn't save information from every single pixel. So yes, repeated saves could actually degrade the image, especially if there's any manipulation of the image first. GIF, OTOH, is "lossless". It saves color information for every single pixel (well, it saves the variations in color -- that's why an image with a large block of color saves down well in GIF). 'Course it's limited to 256 colors, so it's not going to give you the same smooth color transitions you'll get with a JPG. That's part of the rationale for saving photos in JPG.

</geek>
jeni