BEST Pic Optimization for WebPosting. Do you Agree? HELP!

[FireWORKS! webforumsuser@macromedia.com]

I have dozens of .jpg files that I need to do whatever can be done to make them load as quickly as possible when people go to the website, BUT without sacrificing, crispness, detail, clarity, etc (or the very least degradation possible).

In my Internet Searches for the BEST way to do this, using Fireworks, I read where a person said:

THE BEST thing you can do for your site is to reduce the pixel size of your graphics down to probably 1/3 what you're using now. In other words try using pictures at say80x60 or 120x100. It sounds dinky and it is but I have learned how to make it work===the result is pix with file sizes between 2K and 3K at 80% compression. Crisp and clear.

Stil another person reccomends this: In my handy dandy Fireworks Bible, there is a tip that says an easy way to make an image file size smaller is to scale the image to 50% and then in the html page, tweak the height and width attributes to double that. Then they said the image looks unacceptably blurry and they wondered if there is there a trick to doing this, or is this technique not a good one?

A reply to this post said:

That would work fine for a vector graphic but not a bitmap and it's best to reduce jpegs down to the desired size in steps and using the sharpen function. I have found this to work well most of the time. The best thing you can do for your site however is to reduce the pixel size of your graphics down to probably 1/3 what you're using now. In other words try using pictures at say80x60 or 120x100. It sounds dinky and it is but I have learned how to make it work===the result is pix with file sizes between 2K and 3K at 80% compression. Crisp and clear.

Another recommendation: ...scale the image to 50% and then in the html page, tweak the height and width attributes to double that.

So you'd be putting a 50x50 pixel graphic on the server, but the html would say <img height=100 width=100 ...> ?

A reply:

I can't imagine any way of doing that to an JPEG or GIF without totally ruining the image display quality. With native Flash graphics I suppose it could work, since Flash is a vector format...

I can think of only one instance where this technique would give good results: if all the edges in an image are perfectly vertical and horizontal, like a Mondrian painting, or perhaps a bargraph.

With no curves or angles, there are no alti-aliasing pixels to give a blurry look. This would always be a gif image. I have used the trick in several cases, but the image is mostly a design accent, nothing more.

Yet another suggestion:

That would work fine for a vector graphic but not a bitmap.

Another suggestion:

You are saying "Modify the dimensions" (pixels wide by pixels across) not necessarily by changing the resolution ..Yes? In addition, do you change the resolution? From 72 to say, 50? (I would assume that is a no no for art sites with fine detail, but ok for other things. Please verify me one way or the other.

>It sounds dinky and it is but I have learned how to make it work

Do you make the small image link to a bigger one? Or just "work the layout"?

Another suggestion:

Of course it depends on the situation but by cutting down the size in pixels dimension wise, you can still acheive the effect the picture is intended for and keep all the good stuff "above the fold".

Thumbnails are something I intend to utilize in future versions of my work. I've learned here and abroad over the last six months some good tips about enhancing the user experience. If you have an important graphic make it a thumbnail to link to the real thing. Then you can have the "master menu" ala yahoo that hyperlinks out to all the information. And all the modem users said AMEN

A really good extension to get is the "round bitmap corners" in the Fireworks :: Links to coolness thread. It creates little radii around the edges kinda like the MSN home page pix. By using this and making the pictures smaller I still get the effect while at the same time accomplishing the task of "tightening up" and keeping more content up on the visible screen.

Another Suggestion:

You know what...thumb nails are such an "old school" thing and people have kind of gone away from.

But I have to agree with you, the simple fact of the matter is, people are thankful when you use them on your page. Designers should not have gone away from them in the first place.

In fact, there are a lot of "old school" techniques that designers have gone away from but end users still like. Text nav links at the bottom of every page so you don't have to wait for the gifs to download...simple layouts. Text that is text and not gif images so you can cut and paste it elsewhere. And of course, thumbnails.

I think as web designers/ geeks, we forget what it is like to be an end user with a dial up modem connection. We are geeks...we pay the extra money for the cable modems, ISDN lines and DSL connections. We don't have to deal with the slow.

As a consequence, we forget that there are a whole lotta users out there with connections about the same speed or less than a 28.8.

Another Suggestion:

This is what I did: Opened the image. Made it Lab format Went to the a and b layer and used a Gaussion blur of 3 (I didn't know where to start with this..)
Sharpened the L layer because that is where the detail is. Turned the whole mess back into RGB so I could save it in JPG and saved it in jpg.

Is that the basic process and I just need to tweak?

Yes, that's the process. But only the BLUR steps are helping to create a smaller file size. I just threw in the L channel sharpening as an extra bit of info -- it's not part of helping the jpg compression along.

So yes, if you sharpen in the L channel, you will be adding some file size. Only do that if you feel the image needs sharpening (increased contrast in the L channel may also bring out detail without adding as much extra file size).

If the image does need sharpening, it would have needed sharpening even without this L-a-b technique, so comparing before and after file size is not really comparing apples to apples.

We are geeks...we pay the extra money for the cable modems, ISDN lines and DSL connections.

Except for us country-dwelling geeks, who enjoy monstrously fast connections at work, and then go home to a modem connection that does not come close to utilizing the full capacity of our 33.6 modems... I couldn't get a broadband connection at home unless I paid to build the transmission lines/towers to deliver it.

I am still a big believer in text links at the bottom of the page (good for spiders, too), and using thumbnail gfx.

I have tried the technique over and over again and in every case the image with the a and b sections with a gausion blur are *bigger*.

I am convinced this technique will work, but I'll be damned if I can figure out how to make it work. In some cases, the 'treated' image is twice the size of the untreated image.

My process: I take an image from a photo cd..something where I know the image will be very sharp and clear. It is usually a jpg file. I immediately save it as a png file...that is my "control".

Then I go back to the same image on the cd and open it up and change it to an LAB. I do the gaussion blur on the a and be sections, turn the photo back to a RGB and save the mess as a png file to compare to the control.

Every time the LAB treated photo is bigger. Every time.

Is this an E.S.T.O. problem? (And of course, everyone knows that E.S.T.O stands for "Equipment Superior To Operator" )

I wonder about using PNG as a benchmark, since it's already a compressed file. I make my comparisons starting with a PSD file. That may be why we see differences.

At any rate, the file size savings are not huge, 5% or so on the same jpg settings. But I often can push the compression further without visible artifacting after the L-a-b blur, so that gives additional savings.

I read this technique (and quite a few other uses for L-a-b) a few years ago in a column in PEI magazine by Dan Margulis. He expanded his colmuns into a great book called "Makeready". It's out of print now, unfortunately, but a grat resource. Margulis is quite the PhotoShop guru, giving very expensive seminars these days - mostly focused on print applications.

OK...

the png was the problem. You MUST save as a photoshop doc, then as a jpg. If you do this trick and save the file as a png the blurred file will be bigger.

However, I didn't get the fabulous file compression savings after I did it either. The compression was roughly the same, maybe a little better, but not enough to make any difference in download times.

About how much do you have to blur when you do the gaussion blur? I usually blurred it until I juuust couldn't see the outline. What is a good rule of thumb?

I know this is a good rule of thumb..I just know it! What I do is select the channel to blur, but then click the eyeball icon on "L-a-b", the composite view, so I can preview the final effect. I just push the slider until the image degrades visibly and then back off. Blurs in the 3-4 pixel range are common.

No, this technique doesn't give huge savings, but on a big enlargement, it's helpful.

BTW, a lot of times with digital photography there is some digital noise, but it's almost always isolated to one color channel in L-a-b, making it the best place to handle such issues. Also great for fixing bad color-casts.

Thanks for reading all this! I know it?s allot, but I?m kind of new to all this and unfortunately, I don?t know which of these is the best route to try to achieve my goals. Again, my goal is this: I have dozens of .jpg files that I need to do whatever can be done to make them load as quickly as possible when people go to the website, BUT without sacrificing, crispness, detail, clarity, etc (or the very least degradation possible).

If You could consolidate all these suggestions (OR HOPEFULLY YOU KNOW A BETTER ANSWER/PROCESS) to maybe the top 2 or 3 processes to achieve my goal, I would really appreciate it.

I YOU DON'T MIND, PLEASE SEND A COPY OF YOUR REPLY TO ME AT: [email]245@vol.com[/email]

THANKS IN ADVANCE YOUR HELP!

[Lanny Chambers]

In article <bgs3h6$njv$1@forums.macromedia.com>,
"FireWORKS!" [email]webforumsuser@macromedia.com[/email] wrote:

> In my Internet Searches for the BEST way to do this, using Fireworks, I read...

....a bunch of BS from people who aren't as smart as they think they are.
Some of those "hints" were hilarious.

First, crop each image to eliminate excess background that doesn't help
tell your story.

Second, reduce the image to a reasonable size. Few photos need to be
larger than 300x200 pixels to impart useful imformation; if that seems
too small, you probably didn't crop enough. Apply a mild unsharp mask to
restore lost crispness.

Third, reduce the JPEG quality setting until you're no longer happy with
the result, then nudge it back up a tad. There's no magic "best" setting
that works on all images--each photo is different. Use the 4-up preview
to compare different settings. You'll probably end up between 50 and 70.

If you're willing to experiment, play with the Smoothing and Selective
Compression features to reduce file size. But you may not like the
result.

--
Lanny Chambers, St. Louis, USA
[url]http://www.hummingbirds.net/[/url]

[Back in Action - XP User]

Start by scaling down your ng posts. And was there a question in there?

--
Robert Lane
[email]magic@mindless.net[/email]

Spam is sent by mindless people. To reach me, try "mind.net"
To fight Spam, try Mailwasher Pro: [url]http://entier.ecosm.com/link/?obeyrp[/url]

[Ilya Razmanov]

"FireWORKS!" <webforumsuser@macromedia.com> wrote in message
news:bgs3h6$njv$1@forums.macromedia.com...

> I have dozens of .jpg files that I need to do whatever can be done to

make them load as quickly as possible when people go to the website, BUT
without sacrificing, crispness, detail, clarity, etc (or the very least
degradation possible).

<snip>

Well, quite considerable part of all this was a junk. The idea of scaling up
via img size in HTML, in particular. Remember that browsers use quickest and
roughest "nearest neighbour" interpolation, so this approach will work for
single color images or flat color rectangles over flat color background; for
anything else it will just give you pixelated "mosaic" look (i.e., each
image pixel will be shown as 2*2 pixels square. I doubt you may call it
"crispness").

Most of the "right" things are already said by Lanny. Choose a proper image
size, so it contains enough details, yet isn't too big. Proper cropping
(focusing on subject rather than including the unnecessary background parts)
is the good thing. Then choose the format (GIF for drawings or low-color
images, JPEG for full-color photos) and play with compression settings (FW
gives you enough facilities to see the result of compression in near real
time). Selective JPEG compression is very good thing as well - you may apply
more compression to "meaningless" background than to "meaningful" main
subject.

What as to selectively blurring chromaticity (the trick with Lab mode,
described for Photoshop), you may achieve the same by duplicating the image
to upper layer, applying any sort of blur and setting duplicate to "Color"
blend mode. However, the trick is equal to JPEG color subsampling so you're
not guaranteed to get any real benefit from it - it may just happen so that
JPEG subsampling does the same job anyway.

Another trick may be selectively blurring the meaningless parts of image
(kinda similar to selective JPEG compression). I personally sometimes use my
own "Shaman" plugins for that - look at
[url]http://photoshop.msk.ru/as/shamanesphoto.html[/url] and read the bottom line.
However, they are, first, Windows only, second, require some fine tuning for
every image.

All in all, there is no single recepie and no single best stettings set. If
you're after quality, you have to deal with each and every image carefully,
not counting to any batch process. You should estimate proper procedure and
settings for the particular image. That's what web designers charge money
for, apparently :-)))

Ilyich.
--------------------------------------------------------------------------
Ilya Razmanov (a.k.a. Ilyich the Toad)
[url]http://photoshop.msk.ru/[/url] - Photoshop plug-in filters
- But they're going to kill her!
- Better her than me...
Star Wars
--------------------------------------------------------------------------