Jpeg streaming

[candidpublishinginc]

Any of you guys know how to make a jpeg streamable so when it's being downloaded, it will show on the browser bit by bit?

Right now our jpegs in our members area are only displaying when the jpeg is fully downloaded and this is not a good thing since this is a members area geared towards dialer surfers. ;)

[MrNice]

I think this depends on the browser, for example IE shows the images after download. While Netscape bit by bit (at least it used to).

Then you can of course use a low-res images which will be displayed before the high quality which gives this effect. But that increases the total download speed.

Don't take my word for it, but I am 90% sure this is the case :)

[candidpublishinginc]

No that is not the case, because I've seen jpeg images that download bit by bit, and checked if they were loading a low res version first. There must be a way to set this.

[evildick]

Also might have to do with the method of jpeg compression on your photos.

Progressive loads the whole image at once from lowest quality to highest.

Baseline compression loads from top to bottom.

Not sure if this is what is affecting your images. If it is, there should be an option for the method of jpeg compression in your photo editor.

But it could just be what he said about browsers. Not sure.

[evildick]

Actually if you are using Photoshop the option you probably want is called "interlace".

Choose the interlace option when you save the image and see if that does the trick.

They call it "progressive" in Paint Shop Pro.

[candidpublishinginc]

My guy handling the content end of things tried the progressive option in PSP and it didn't seem to work.

Oh well, I'll ask my designer tomorrow.

[Mole]

The correct term for JPEG pics is progressive.

Interlaced is used for GIF and PNG images.

Progressive JPEG images can be programmed to show different behavior. The usual one is that it'll show a low res blocky image to begin with and the image will become sharper and clearler. You may be able to set parameters on how many "layers" your JPEG will be.

Another popular method is to let it load the luminance channels first, and then the chroma channels. Doing this will generate an effect in that you'll see a black and white pic initially, and then the colours will be applied. This could be a cool effect in itself.

Different web browsers also loads progressive/interlaced pics differently. Some browsers, such as Opera, will default not show the progressive scans and only display them when they're finished loading. But this can be changed in the options.

Another advantage of using progressive JPEGs is that the pics tends to be slightly smaller than baseline. This is especially true for large JPEG files. Very small files will usually become larger if saved as progressive. But they'll usually load so fast that it's no point in saving them as progressive anyway.

I have a command line util which will mass convert your JPEGs to progressive lossless. The quality is not changed in any way. This util also has lots of other usefulness. It can also remove the comments and image previews in JPEG files, which are useless for web use. Especially Photoshop tends to write a string in JPEG files such as "Saved by Photoshop 6" and will save thumbnail information as default.
This thumbnail info may increase your JPEG file as much as 10%.

[Mole]

Hmm, I tried loading my progressive pics on IE and seems like they won't load as progressive.

Opera loaded them exactly the way they should after enabling the option.

I don't have Netscape so I won't know how it'd behave.

[WiredGuy]

First off, I don't think JPG can do it. I have only seen it on GIF files. And its simply just turning on a flag in your settings, either interlaced or progressive, one of the two. I think interlaced. It does add a small % to the file size but generally for dialup users its a good benefit.

WG

[candidpublishinginc]

WG,

I've seen it done before with JPGs. I'm going to discuss this with my web designer tomorrow.

[WiredGuy]

Huh, I guess I didn't know. If you get it setup, please let me know how you do it with JPEG's, I'd be interested in seeing their effect.

WG

[ProgGod]

You want progressive, then there is an option under progressive that is the scans. You can have it set to up to 3 i believe. That way the jpeg loads in 3 levels, which is pretty much what you have been seeing. Photoshop can save that way as well as most other image processors.

[Mole]

Whenever interlaced GIF files will be smaller or larger depends on the file.

I've seen some files which actually gets smaller when you save as interlaced. In my experience there's about 50% chance that a file might be smaller if you save as interlaced.

JPEG files however, will always have smaller file size when saved as progressive.

That's why I always save my JPEG files as progressive. The exception are small files such as image thumbnails. Those will usually get bigger when save as progressive.

[Hypo]

Actually most jpeg images download bit by bit for me. Only a few show up after loading completely. I save my jpegs in photoshop with the default settings and they show up bit by bit after uploading.