Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Optimizing images for the web

Status
Not open for further replies.

okpeery

Instructor
Dec 29, 2005
102
US
I optimized about 40 images for my site. They look more or less how I want them to look. I then batch processed them to make 40 thumbnails of those images. The thumbnails don't look so good. Do I need to resize each image to its thumbnail size and then optimize again? There is a noticeable difference in the thumbnail and original size quality. I thought I could get away with optimizing one time.
 
If you are going to batch process for thumbnails, do it from the originals, not from images that are already degraded

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
The files are jpgs. For my own reference is this the most likely work flow?

1. take pictures
2. batch process for regular size on site
3. batch process for thumbnail size on site
4. optimize both regular and thumbnail sizes

I thought if I did the regular size and then optimized them I could do the thumbnails from the optimized regular sized ones. I can see clearly that it won't work as the thumbnail quality is poor that way.
 
Have a look at It's a free downloadable program, you can set sizes and compression factors for processed images and thumbnails separately, set different output directories for thumbs and resized images. (just ignore the options to create webpages!)

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
No, if you are creating JPEGs then you should work from the "master" file.

The reason being that each time you save a JPEG the quality is degraded. It therfore follows that if you save your JPEG, then open it and use the degraded version to save another JPEG then the latter one will be further reduced in quality.

Can you tell me what you mean by "optimize" the image?
So long as the image is the correct size (in pixels) and is in the RGB colour space then simply by saving a JPEG you are doing the optimisation. The differing degrees of JPEG compression being equal to a level of optimisation. i.e. You want the most compression possible but still have a nice image.

What else are you doing in this optimisation process?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2
 
If you make thumbnail from large jpegs to comparatively much smaller thumbs, in one go, you're gonne loose a lot of quality in the thumb.

I've just complited a site, where the originals were ~ 2300x3500 pixels and I needed 90x90 thumbs.

I had to do it in a number of steps, enhancing/sharpening on the way to the desired thumb size (crop'ed first, to get the right aspect).

There may be a ready made tool for that?
 
dkd,
Thumbnails ARE degraded! Every transformation you make on a jpg can only degrade it further (as pointed out above by foamcow and me). You will minimise overall degradation by thumbnailing in one hit from the original (or a crop of the original if you must crop). Thumbs here are all done directly with Web Picture Creator (referenced previously)

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Degraded -certainly. In my example above, by 1:653.

However, have a look at this example:


Two approaches on a 1600x1200 thumb'ed down to 200x150.

one-step downsizing
1. Bilinear resample down to 200x150
2. Sharpen

three-step downsizing
1. Blur
2. Bilinear resample 50% (800x600)
3. Blur
4. Bilinear resample 50% (400x300)
5. Bilinear resample 50% (200x150)
6. Sharpen

I prefer the three-step downsizing.

Regards
 
One important detail -I didn't save the thumbs as jpegs until the steps were completed (that would have degraded the images even more).
 
Also, if your host gives you CPanel access, it has a built-in feature for doing this (somewhere, I don't know where)...

--- Specimen
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top