beautiful web photos - small files - HOW

Posted on 2005-03-16
Medium Priority
Last Modified: 2010-04-03
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

Question by:linque
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Accepted Solution

evilswan666 earned 2000 total points
ID: 13558049

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.

Expert Comment

ID: 13560954
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.

LVL 17

Expert Comment

ID: 13560988
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!


Author Comment

ID: 13561894
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.  


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
The Summer 2017 Scholarship Winners have been announced!
In this tutorial viewers will learn how to correct colors in Photoshop using the Color Balance adjustment Open a photo for editing in Photoshop: Open a photo for editing in Photoshop: Select "OK" on the dialogue: The Color Balance adjustment works b…
In this tutorial viewers will learn how to create a vector texture to apply a non-rasterized texture to vector images, using Photoshop and Illustrator Open a textured image such as a scanned-in piece of cardboard in Photoshop: Convert the texture to…
Suggested Courses
Course of the Month11 days, 15 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question