beautiful web photos - small files - HOW

I've been putting up graphics and photos on the web for a long time.  Right now I am starting on a new website that has a gallery of photos.  Still, after all of this time I think I am failing to do justice to these photos.  I most often just pick the photo, use Save for Web .. figure out which is better looking jpg or gif and consider the file size and save it.

I've read about optimizing photos in different areas within a picture, but to be honest, I'm trying to wear a lot of hats and this is not the only thing I do, so time is important in getting a photo ready.  Still I yearn for that crystal clear photo that seems to come up so quickly on a web page.  Therefore I'd like to ask photoshop users (since that is my software of choice) if there is something obvious I might be able to do to improve on this skill right off the bat.  Is there a plugin that would help?  I know it's a general question but i'm seeking some direction in this matter.  Thanks

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


hello! first of all i'd say that you need to be using jpg almost totally for photos. Graphics and other images with solid areas of colour can be saved as gif for a good file size, but jpg really helps retain some of the texture and detail that gif ignores (and does this, basically, by faking it!).

the first and obvious thing i'd say to look at is: pixel size!

if your images don't need to be big, then reduce them in size. if they're destined for the web then remember that people only have a certain amount of monitor to play with when you take into account the browser and the many toolbars people have installed these days. i use 700 x 500 as my rule of thumb. So, there's nothing wrong with resizing your image down to 400 x 300.

a smaller image is always a better starting point and means you don't have to apply as much compression.

lets explore the save for web dialog box:

open an photo and resize it if necessary, then choose save for web.
select "2up" from the top line of tabs so you get the original and optimised side by side.
choose jpg high from the preset dropdown.
note the filesize in the bottom left of the optimised panel, and drop the quality slider by increments of 5 or so until the quality starts to look unacceptable then bring it back up slightly.

now the dark art.. look at your original and back at your optimised and make the judgement call - does it need to be higher quality... can i get away with this filesize? only you can decide this!

also, bear in mind that more and more people are getting DSL or cable and that filesize can be made more generous as time goes by.

lastly, you could learn how to slice the image up in imageready, and then output the page as an html table with images of differing quality on the same web page. this is a great technique but fairly time consuming if you have a lot of images!

good luck!

-the swan.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Hi linque,
    Just for info, when I do my web stuff, I always use Photoshop to optimize my jpegs. When you save JPEG, you can choose what "quality" to save at. The degradation at levels is not that bad, yet file size becomes drastically smaller. Ideally, I use this to scale it (make sure it doesn't save thumbnails of it to save space).
    Additionally, the main difference between GIF and JPG is color. 256 vs. thousands of colors makes a real difference but depends greatly what your picture is. A solid color in GIF is a lot smaller than one in JPEG.
    Finally, like evilswan said, cut up pics. Its tends to load faster. Enjoy.

Hi  linque,

One easy and quick way to make your photos look sharper is by using the Auto adjustments in Photoshop. Open the Image>Adjustments menu and select Auto Contrast or Auto Levels to sharpen your image, the results of these simple tools can be fantastic.

Also, as Evilswan suggests, forget about GIF for photos; stick to JPG and use as little compression as possible. Another thing is, when working on your images, try to use the PSD format while you work and only Save As JPG for the final pic. The reason is that if you work in JPG format, every time you Save the image it'll compress more and more and it'll degrade.

That should get you started.

Good Vibes!

linqueAuthor Commented:
Thank you all very much!  I've been working on these "galleries" as they are called today and I will be implementing these ideas.  I had not tried the Auto Contrast or Auto Levels.  I have been selecting areas and using the brightness and contrast sliders since saving for the web seems to make the pics a lot darker.  

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Creative Suite CS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.