homepage Welcome to WebmasterWorld Guest from 54.235.39.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
Scaling images to make them smaller..
grnidone




msg:848878
 6:29 pm on Mar 22, 2001 (gmt 0)

I am reading along in my handy dandy Fireworks Bible, and there is a tip here 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.

The problem is..when I do it, the image looks unacceptably blurry.

Is there a trick to doing this, or is this technique not a good one?

-G

 

BoneHeadicus




msg:848879
 6:44 pm on Mar 22, 2001 (gmt 0)

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

tedster pointed out a tip one time about reducing 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 2 and 3K at 80% compression. Crisp and clear.

mivox




msg:848880
 9:28 pm on Mar 22, 2001 (gmt 0)

...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 ...> ?

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...

tedster




msg:848881
 9:48 pm on Mar 22, 2001 (gmt 0)

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.

grnidone




msg:848882
 3:25 am on Mar 23, 2001 (gmt 0)

That would work fine for a vector graphic but not a bitmap.
>tedster pointed out a tip one time about reducing jpegs down to the desired size in steps and using the sharpen function.

I know, and I can't find it anywhere...Can someone point me to it.

>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.

I want to check that I get what you are saying...(I'm slow...remember)

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"?

Thanks
-G

BoneHeadicus




msg:848883
 3:44 am on Mar 23, 2001 (gmt 0)

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.

grnidone




msg:848884
 4:07 am on Mar 23, 2001 (gmt 0)

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 Bonehead, 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.

<sidenote>
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.
<sidenote>

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 AOL users out there with connections about the same speed or less than a 28.8.

G gets down off her soap box...

Tedster, I looked around and found a tip that you stated a while back about using L-a-b to make jpegs smaller.

Apparently I did it wrong...my image turned up bigger.

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?
-G

tedster




msg:848885
 4:37 am on Mar 23, 2001 (gmt 0)

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.

mivox




msg:848886
 7:01 pm on Mar 23, 2001 (gmt 0)

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.

grnidone




msg:848887
 3:30 am on Mar 24, 2001 (gmt 0)

Tedster,

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?

-G

And of course, everyone knows that E.S.T.O stands for "Equipment Superior To Operator"

tedster




msg:848888
 9:44 pm on Mar 24, 2001 (gmt 0)

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.

grnidone




msg:848889
 11:53 pm on Mar 24, 2001 (gmt 0)

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?

-G

I know this is a good rule of thumb..I just know it!

tedster




msg:848890
 12:28 am on Mar 25, 2001 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved