View Full Version : Optimizing my images for the web

02-02-2007, 12:01 AM
I have created images for my webpage, they seem to be fairly big for what they are. As a result that are taking ages to load, how can I reduce the file size without it having an impact on the quality of the image?

02-02-2007, 03:42 AM
With Photoshop:
File + Save for web + reduce Quality or Colors

Without Photoshop (Online Image Optimizer):

Karen S. Garvin
02-02-2007, 07:08 PM
1) Before you even save your file, make sure your resolution is 72 dpi

2) Set your color space to RGB (not CMYK or LAB). Indexed color is okay, too.

3) Get rid of layers, masks, and alpha channels.

4) Crop the art so that you are only using the portion of the image that you need. Don't resize it in the HTML file.

5) Then save as otaku149 suggested -- AND -- decide whether you need a JPEG or GIF or PNG file format. JPEG and PNG are good for photographs; GIF or PNG are good for line art or cartoon-style art that doesn't have many colors.

02-03-2007, 12:02 PM
Im currently using Fireworks to optimize my images. It reduces a 40Kb to around 1-3Kb. Im saving all my graphics in PNG format too.

02-03-2007, 12:30 PM
There are different considerations to make when optimizing graphics for the web. PNG can be quite large if you have large graphics (in terms of dimensions) and depending on the color depth (8/24/32 bit) and alpha transparency. I usually try to use 8 bit PNG if it has less than 256 colors (or is still looking reasonably good with an adaptive palette) or GIF if that would be a smaller file size. If there are more than 256 colors I'm checking how it would look as JPEG with a different quality (always having on eye on the file size). Sometimes PNG 24 is smaller at better quality and sometimes it is not.
With large graphics it might be better to save them as JPEG.

But if your 40KB graphic is reduced to 1-3KB then this is a pretty good optimization... or am I wrong here? Do you mean it just reduces it by 1-3 KB, meaning from 40KB to 37KB?

02-04-2007, 12:55 AM
It reduces from 40Kb all the way down to a total size of 1-3Kb. Majority of my images are PNG 8, using the adaptative palette, the images hardly change in terms of qualty. Im sure if i use GIF format the images may reduce further, but it may have an impact on the quality.

I like the way fireworks chooses the most appropiate PNG type automatically after analysing the colours in the image. Though, Im sure this feature is available on other graphic software, such as photohop.

Im going to run the page on the web server and see how it loads.

Karen S. Garvin
02-05-2007, 03:30 PM
With file sizes in the 1-3K range, it doesn't sound like they should be taking along time to load. Have you included file sizes in your HTML? Perhaps the delay is the browser doing size calculations...