View Full Version : Image Optimization Tutorial

Mr Flannery
08-28-2006, 07:14 PM
Some of you need a crash course in image optimization. One of the single most integral elements to web graphics.

I'm going to avoid a lot of jargon, and skip over some things within the menus. As I said, this is a crash course. It going to keep people from having to scroll for miles across your huge images, and keep from bogging down machines.



Get your piece all finished up, and go to File > Save for Web. This opens the dialog box that I have in my graphic.

Box 1: Choose the method of display.

In box one you will find 4 tabs...

Original: Shows the PSD.
Optimized: Shows the image with current optimization settings.
2-Up: Shows the original PSD, along side the image with current optimization settings, in a 2 window split view.
4-Up: Same as 2 up, but it shows the original, and THREE versions of optimization.

Box 2: The optimization settings.

For the sake of this forum, we will work only with JPEGs. Ignore all other formats. Yeah, even PNG. If anyone argues with me about PNG, don't waste your time. PM me if you've got an argument without holes (Which I highly doubt). It's a great format...but...this isn't about that.

The first dropdown menu is called 'Preset'. Always keep that on 'JPEG High.'
Under that, and to the left, always keep that dropdown on 'JPEG.'
Under that dropdown is where the choice comes in. You've got low, medium, high, very high, and maximum. One of these presets determines a number in the 'Quality' dropdown. You can manually type in a number in Quality as well.
Choose the best setting, OR NUMBER, that is best suited for file size, quick loads, and quality. We'll get to size and loading in box 4.

Box 3: Size.

You've got 2 tabs; Color Table (which we'll ignore) and Image Size.

That little dropdown menu called 'Quality' is so overlooked it's shameful. Very important, listen up.
*If you're DOWNSIZING, set it to Bicubic Sharper*
*If you're UPSIZING, set it to Bicubic Smoother*
Although, you should avoid upsizing because Photoshop will have to literally create and compensate for missing pixels. Get into the habit of designing big, and then downsizing. A way to remember these is that BSharper is on the BOTTOM of the menu. Bottom = down. BSmoother is ABOVE Sharper. Above = bigger.

Once you have that set, you can choose dimensions for resizing.
How big do ya' want it? Here's a tip; 60+% of all PCs in the country are viewing at 1024x768. Use that as a measuring bar.

Now...should you make it exactly 1024x768? HELL NO! This image is on a page, in a forum. Scale it down so we can see your work and not have to scroll for days. I want to see the whole car, not the windshield, or a section. SIZING IS KEY!!!!
Worry more about width than height. Always keep the little chain symbol, and change your size to whatever works well. The chain icon keeps width and height preportioned so that the image doesn't get distorted.

** Once you've decide about how big you want it, YOU MUST HIT THE 'APPLY' BUTTON **

Box 4: Optimizing for speed and connections.

Contrary to popular belief - DIAL UP IS NOT DEAD! Millions of homes in this country still utilize dialup connections. We can safely assume that anyone on this forum, most likely is on cable. Make no mistake - dialup is alive and well. I do this stuff for a living, and anyone who tells you different is a jackass.

That information tells you;
The file format
File size
How long it will take to load on 'x' connection

I always have my connection listed as 28.8 for a point of reference. Use your head on this one; If it loads decently on a dialup, it's goona scream across cable. Once everything is all buttoned up, click "Save" back up at the top, and save it as a JPEG. You now have a TOTALLY INDEPENDANT JPEG copy, of your ORIGINAL PSD - without having had to resize your Photoshop file...nice eh?

The key to all of this is getting a high quality image, with a quick load time, and small file size. Experiment, work with it, explore the other options, etc.

Your fellow forum buds (this, and across the internet) will thank you for knowing how to optimize. It makes viewing pics so much more enjoyable for the end user - PLUS, we get to see your awesome work the way it was intended. Not chopped up across the screen, with miles of scrolling.

Also, don't be afraid to crop the **** out of your photo. If there is 6 inches of sky, and whitespace... get rid of it! You don't have to save it that way.

Crop it nice n' tight
Save for Web

Now you've got your nice, clean, tight, cropped and optimized JPEG for the web, and your PSD is as big as you want.

Simple dimple. ;)

08-28-2006, 07:33 PM
I don't usually do save for web unless it's a real quick/pointless informational pic I want to post to the net. It degrades the pic too much... usually.

Mr Flannery
08-28-2006, 09:07 PM
I don't usually do save for web unless it's a real quick/pointless informational pic I want to post to the net. It degrades the pic too much... usually.

You're the reason I wrote this.

I didn't even TOUCH .gifs and other stuff.

Follow the tut, and learn to use the interface. You're obviously not using it correctly.

08-28-2006, 09:28 PM
I've used it and I know how it works.... it's why I made the comment I did. :rolleyes:

11-04-2006, 01:44 AM
Every chopper should be exporting their images with "Save For Web."


There is ZERO reason not to use it.

I know photoshop better than 99% of the people here, and I'm telling you it's definately the correct way.

There is no danger in saving over your original layered file, it converts it to the correct RGB settings, you have tons of control over the filesize and dimensions, you can even crop the photo by using slices, so there's no danger in saving over your layered file post-crop.

I don't know how many times I've had people IM me at 2:30am wondering "how to get their layers back" or "how to fix something they jacked up during saving as a JPG". Save For Web would have fixed EVERY problem.

Learn to use it guys!