Resizing Images for the web.

When I resize images on my website they appear a bit small. ( )  How do I compress them down to 5Kb but keeping the image at a good viewable size?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

A V GeorgeCommented:
Use 72 dpi resolution which is quite enough for web images. You could also use 256 color jpeg format to get fairly good quality while keeping file sizes small.

Goo Luck!
zigglesAuthor Commented:
Im not very experienced in photoshop, how do I make the dpi 72?
A V GeorgeCommented:
- Open the image in Photoshop using File > Open

- Then go to Image > Size to open the Image Size options window

- Leave the Pixel Dimensions settings as they are (they will change automatically when you change the size of your image as indicated in the next step)

- To avoid distorting your image, make sure that the Constrain Proporiton checkbox is checked (has a tick mark) - this will ensure that when you enter a new value for width, the height will be automatically calculated and vice versa)

- Resample Image should also be checked (The list box next to it should display 'Bicubic')

- Enter 72 in the Resolution box under Document Size (make sure that Pixels/inch is selected in the drop down list next to the Resolution box)

- If your image was originally in a higher or lower resolution, Photoshop will calculate the new Height and Width of your image for 72 pixels per inch resolution.

- To resize your image with the resolution at 72 pixels per inch, enter the exact width that you want your image to be (you can select pixels, inches, centimetres of millimetres from the drop down list as the unit of measurement) in the Width box.

- Since Constrain Proportions is checked, Photoshop will display the corresponding height for the new width that you have entered.

- That's it. Now to save your file in the best optimized format, go File > Save for Web and click the '2-Up' tab in the Save for Web options window.

- Photoshop shows you your original image and the Optimized one in two windows with corresponding file sizes.

- From the Preset list box choose the format the you would like to use to optimize your image ('Jpeg medium' should be good enough for most photosgraphs, 'gif 64 dithered' should be good enough for logos or images with solid colours)

- You can play around with the different presets to get the best balance of quality and file size (better the quality, bigger the file size!)

- You can also adjust the Quality setting slider to fine tune your image if you like.

- When you are done, click Save and you have your optimized 72 pixel per inch file. (dpi generally referes to dots per inch in printing while ppi is the pixels per inch in a monito - not exactly the same thing but close enough not to matter)

Good Luck!

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David BruggeCommented:
If I may chime in on avgavg's excellent advice.

The REASON you want your images to be 72 dpi is so that you can tell what size they will be on the screen. You can't tell the web page to make an image 1" x 2", you tell it to be 72 pixels by 144 pixels (72 pixels to an inch)

If you send an image to the screen that is 300 dpi (a typical resolution for printing photographs) and 1" x 2", the pixel size will be 300 pixels x 600 pixels (on screen, it will be 4" x 8 1/3 " )

That is, unless you tell the screen to enlarge or reduce the image the way you have done with your USB icon.  Your USB icon  is 450 x 337 but shows on the screen at 79 x 61.  You don't ever want to to use html to resize an image.

If you enlarge an image, it will look blurry and jagged. If you reduce the image, the way you have done, the computer must download the entire image, then throw away 85% of the pixels each time the image is used.

Start by determining what size you want your image to be. 100 pixels on the shortest side is a good size to start with for thumbs. (you may end up making them a little smaller)

Then follow avgavg's step by step method to get your image to this size. When you get to the "save for the web" you can click on the jpeg preselect and move the slider all the way over to get the very smallest file. As you do this, you will see how rough and jaggy your image will be at that level.

As you move the slider back, you will see the image size at the bottom increase, but so will the quality.
If you can't get the quality you want AND the size that you need, go back and make the image a few pixels smaller and try again.

Eventually you will get the size and quality that will look best.

Best of luck,

David B.

One last suggestion. Use bicubic smoother (rather than bicubic) when you make an image smaller, then add a little bit of sharpening before you go to the "save for web" step.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.