Image reduction

[seahound]

I am a new web user and have just launched my family site at www.macnamara.biz unfortunately it takes a long time for my web page to load because of the images. I used dreamweaver to build my site.

Have access to both photoshop and fireworks but have not used yet.....which one would you recommend.

Any tutorial available ?

Regards Conor

[alphadesk]

Hi seahound,

Both are good, but if you learn photoshop you will be able to do anything you need with graphics.

Your first pic on your page is 1600x1200 pixels. If you insert that pic and then just rezise it in html editor you are still pulling the big pic. You need to rezise the pics then insert.

I've rezised it to 200x150 pixels.

[seahound]

Thankyou for your quick reply Alphadesk,

One question, did you alter this nygrill image in photoshop or am I right in thinking you launched the image on your hard drive and then alter by using HTML editor. As I work in Japanese character
set/OS where do you find HTML editor?

cheers Conor

[alphadesk]

I just right click on pic> save as. Opened on my hard drive with Corel 8 and resized.

What I mean by html editor is a program like MS FrontPage etc.

You can change the height and width of a pic in any html editor, but you cannot change the actual pixel size. You have to do that with a graphics program like photoshop or corel to bring your pics down to a manageable size. The reason your page is slow loading is that it is pulling in those huge graphics pics/files.

and as for as this.As I work in Japanese character set/OS where do you find HTML editor? I have no clue.

[dmags01]

Hi,

A rather late reply, I just signed up. Ha.

Personally I use both. Fireworks is handy for quick jobs and when your pc does not have much resources or RAM to spare at the time. It is also good for vector graphics.

Photoshop on the other hand is what I use when I need to produce high quality work. Extremely powerful, but the learning curve is steeper.

I would suggest you play with Fireworks for a short while first, then move onto Photoshop.

There are a few new posts about the tutes. They are all quite good. Have fun.

Dan

[gwissen]

Fireworks lets you "optimize" your graphics. That is macromedia lingo for making the graphic file size as small as possible without sacrificing quality. Some pictures, such as lineart, are best optimized as gifs. If you go that route, you can reduce the number of colors to those that are actually ued. Other pictures, such as photographs, are best optimized as jpgs. For these, you can set a percentage to see what it will look like. Both methods allow you to preview the output.

- Gail

[Forsteen]

The problem with just resizing is that it keeps the same amount of bytes/kbytes. Photoshop and Fireworks are good programs to resize and still keep a quality product.

[hourglass113]

glad i saw this. i am learning how to use photoshop right now, and need to know what is the average pixel a pic should be

[Forsteen]

I depends on the picture. Some pictures look better as a gif and others as a jpg.

Gif files are mainly for safe web colors. Basically ones with little variational colors. Like so below.

Jpeg are more for photo-realistic pictures with lots of different colors with different amounts of tones.

Go here for a good overview: Save for web - photoshop (http://www.webreview.com/1999/09_17/designers/09_17_99_3.shtml)

GIF:
http://forums.skylinesdownunder.co.nz/images/fundraising/donate-x.gif


JPEG: Like this: Its big so watch out:
http://www.power-integration.com/images/cyclops_witch_project.jpg

[hourglass113]

that is the problem that i have. most of my pictures are scanned through mgi photosuite. when i go to put them on webpages, they are huge. even after i use photoshop to change it, they either are still too big or they very blurry

[NMS]

pay attention to resolution...for webpage purposes use RGB, 75 dpi only and save as jpg set to about 15.

[Forsteen]

Everytime I reduce the size of the picture I go to filter>sharpen>sharpen. That will take the blurriness out.

[NMS]

If the images blur when you resize the, then there is something wrong!!

The resize (image resize) should always be used as locked, that is the width & length will move proportionally and the resolution should be kept to 75dpi.

I cannot understand why you should use the sharpen button...

Why don't you just work your graphics in real size (i.e. small)?

[Forsteen]

Unfortunately when you can an 8x10 scan can get up to 3000 pixel long. That will be normal for a lot of scanner and the software that comes with it. I import it into photoshop resize the picture to a smaller one. The blurriness is normal in photoshop. All you do is just sharpen it and it back to the quality it was before. You can tell the difference in the blurriness when scaling down a picture from a large one to a lot smaller one. Resizing from say 700 pixels wide to a 500 pixels wide you can't tell the difference.

[bettyfordclinic]

This is true people.

Photshop incurs slight blurs on some scaling. It takes a while to notice, but it's there. Apps like Debabelizer use a sine sharpen during the scaling process which counters this, producing a perfect scale everytime.

Personally I think you should take the time to learn scaling in photoshop. Just experiment with the "save for web" function and it's "scale" feature. Check jpg qualities between 20 and 70, although I'd average between 40 and 70 for the best results. The more "complex" an image, the less efficient the compression will be (city scapes versus pictures of the sky).

bfc

[hourglass113]

most of my pics get scanned and come out about 2550x3650. or whatever the automatic proportion is for 2550. i want to make sure that when ppl are looking at the pic, that is doesnt take up more than the size of their screen

[gwissen]

I think that an equally big consideration is how long it taks to display the picture ... particularly over a dial-up modem.

Gail

[Forsteen]

That is twice the size of my screen. I use 1024x768. Definitely reduce the picture down to at least 800 x 600 or small if possible.

[gwissen]

Because of the real estate taken up by browser frames and scroll bars, you really should keep the width of a picture to under 760 px. (This will also go a long way toward keeping the file size down.)

Gail

[hourglass113]

ive been doing that lately, but some of the pics are coming out a little blurred

[gwissen]

I think that's because when you reduce the size of a picture, you are actually throwing away pixels. (It's much worse when you try to enlarge a picture, because then you are trying to add pixels that aren't there.)

You might try some of the suggestions that have been made on this thread of keeping the resolution to 75px, constraining the proportions when you reduce the picture in size, and then adding a sharpen filter.

Gail

[TakeIT2]

Hi,

try to Resample as opposed to Resize and you might find the blur goes away and always mantain aspect ratio.

Paul

[omegaman66]

I get lots of picture sent to me to put on my website. First thing I do is reformat the picture so that it is something like 300 pixel high and 400 pixels wide. That is if it is going to be a huge photograph and the main attraction of that page. Small thumbnail sized pictures I usually make only 120 px tall. This depends on how big the photo is going to be but it will always be within those two sizes.

Next I save as a jpg and compress it until the image quality really starts to degrade. Then save it.

Most of my thumbnail pics which are low res are below 6k and the main pics can be anywhere from 15k on up to 30k.

Size will largely be determined by how good of quality they pictures have to be.

Just remember if you make them to big nobody is going to wait around to see them anyway.

Where possible I preload images so that it appears to load faster.

In my image galleries I will have a button for the Next Picture. While the visitor is looking at photo ten I am already loading photo eleven onto his computer. So when he hits the next button the big image is already there.