Tom's Guide | Tom's Hardware | Tom's Games
![]() |
![]() |
![]() |
I was wondering, I use frontpage, how do I decrease the dpi (dots per inch) in an image to make my pages load up faster?
Thanks in advance,
Jasonhttp://hyperlinkzservices.tripod.com/index.htm

you wouldnt do it that way
use a prgram like Paint Shop Pro, click on save as, chose JPG, click settings or configure i think then adjust the slider to reduce the file size of the image

Yeah, Jamie is pretty much right on. Very rarely would you change the dpi for an image. They almost all sit around 72dpi for web-based stuff.
It can be changed in Photoshop though if you really wanted to. It's on the same menu for resizing the image.
Also, to decrease the image size, you'll want to do any of two things:
1) Decrease the physical dimensions of the image, i.e. from 1024x768 to 640x480, or whatever.
2) Increase the compression. Of course, increasing the compression (of a jpeg file for instance) will decrease the quality.
Both will work for decreasing the file size.

I've found that using Paint Shop Pro, I can drop the filesize of many images without sacrificing much if any quality. Usually changing the DPI of an image really doesn't affect much.
Try this (in PSP 8.0 [free trial]):
First, don't depend on a browser resizing an image. If you need it 100x100, make it 100x100. (Image > Resize).
Now look at colors. Odds are that if it's a small, fairly simple image you can drop the colors to 256. To do this:
Go to Image > Decrease Color Depth > 256 Colors. Play around with the settings, until you find something that is as close to the original as possible. I typically use Optimized Octree and Ordered Dither, but what you use will depend on the image you have.
Some images, such as the Computing.Net logo at the top of this page could be reduced to around 16 colors, which will drastically reduce image size. Use the tool in Images > Decrease Color Depth > X Colors. This will let you specify how many colors are in the pallette.
Once you've got the color count down, save the image as a GIF. They are almost always smaller than JPG images, and can support transparency if you need it.
Go to File > Export > GIF Optimizer. Set your Transparency options, then go to the Colors tab. Here you can have it decrease color depth if you haven't already, but I think that it does a better job if you do it before hand. Since you already did it, choose "Existing Pallette".
Hit OK and save the image someplace. As long as you paid attention to what settings you chose, the image may be up to 75% smaller than your original.
Now...
Having said all that and after looking at your page you linked to (assuming that's the page you were talking about) the images you're using in your menu are already pretty small. What you can do to speed up the MouseOver effect is to pre-cache the images when the document loads, something like this (inside a SCRIPT tag inside the HEAD of the file):
if(document.images)
{
image_1 = new Image();
image_2 = new Image();
image_1.src = "images/image_1.gif";
image_2.src = "images/image_2.gif";
}Then down in your menu, inside your A tags, do this:
[a href="whatever.html"
onMouseOver="image1.src = image_2.src;" onMouseOut="image1.src = image_1.src;"]
[img src="/images/image_1.gif" name="image1"][/a]Do that for each of your menu images, making sure that the "image1.src" is the same as the NAME attribute as the IMG you are working with.
By defining the images ahead of time you are actually loading the MouseOver images at the same time. This way, when the user puts the mouse over one of the images, it should already be downloaded to their computer.
Give that a shot and see if it works.

![]() |
![]() |
![]() |

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |