Computing.Net > Forums > Web Development > How to decrease the dpi in an image

Computing.Net: Over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to sign up now, it's free!

How to decrease the dpi in an image

Reply to Message Icon

Original Message
Name: jdennis789
Date: August 16, 2004 at 16:55:52 Pacific
Subject: How to decrease the dpi in an image
OS: Windows XP
CPU/Ram: 256MB DDR
Comment:

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,
Jason

http://hyperlinkzservices.tripod.com/index.htm


Report Offensive Message For Removal


Response Number 1
Name: Jamie_McCoy
Date: August 16, 2004 at 17:18:59 Pacific
Reply: (edit)

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

Jaymc.co.nr


Report Offensive Follow Up For Removal

Response Number 2
Name: -Bryan-
Date: August 17, 2004 at 01:00:09 Pacific
Reply: (edit)

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.


Report Offensive Follow Up For Removal

Response Number 3
Name: Dr. Nick
Date: August 17, 2004 at 17:18:18 Pacific
Reply: (edit)

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.


Report Offensive Follow Up For Removal







Post Locked

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


Go to Web Development Forum Home








Do you have a Desktop Computer anymore?

No
Yes, but only at work
Yes, but its rarely used
Yes, and its a workhorse


View Results

Poll Finishes Today.
Discuss in The Lounge
Poll History




Data Recovery Software