Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 270
  • Last Modified:

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

1 Solution

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.
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.  


Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now