How to shrink your pictures (plus other cool image tips)

[redbeacon]

Lately, I've been seeing lots of people struggling to put pictures on the web. Some are too small and distorted, others are gigantic, sometimes stretching the whole page itself.

 

Wouldn't look nice if you have to scroll beyond to the right side of the page to read somebody's document because one of his oversized pictures are on the page itself.

 

I've not only seen it here, it also happens on other websites as well. That is what makes websites ugly and distorted -- a nightmare for website developer, so to speak

 

I thought it would be of help if I share some tips with you on how to go about working with your nice digital pictures. From the renowned Photoshop to the many freebie image manipulation software on the web, when you understand how it works, you can harness their power to churn out beautiful pictures, and even make it small sized as well!

 

I'll begin my first tip on the next post

[redbeacon]

How to shrink down your pictures (Part 1)

 

The problem with digital pictures is that, for instance, you have your lovely picture from that brand spanking 8? no, 10? nah...multi megapixel camera. Sure, it looks nice on your computer screen but there's a problem: It's probably sized at 3000 by 2000++ pixels. This thousand-pixel size would be of concern if you have to send your lovely pictures via e-mail, or display this on the Internet.

 

** Pixel is the measure of "dots" on a computer screen. Just like how we have Centimetres, inches, etc...to measure stuff. And no, "pixel" is not a name of a gnome, or your favourite Smurf cartoon character.

 

The Photoshop way

 

For those who can afford to bomb $1300++ on Adobe Photoshop CS3, this may be useful for you. If not, skip this section.

 

 

[step 1]

Begin by right clicking the titlebar of your image and select "Image Size..."

http://i73.photobucket.com/albums/i210/msniner/photoshop101%20-%20shrink%20pics/resize1-clicky.jpg

 

 

[step 2]

Gettin your hands dirty:

http://i73.photobucket.com/albums/i210/msniner/photoshop101%20-%20shrink%20pics/resize2-thedialogbox.jpg

 

Let me take the time to explain each function in this dialog box:

 

Width

is the size of the picture, from left to right

Height

is the size of the picture, from top to bottom

 

You don't touch the Width and Height in the "Document Size" area because this only applies to when you print out your pictures.

 

Constrain Proportions

means that you are asking Photoshop to automatically calculate the height, when you enter in the Width only. Or vice versa.

This basically means when you shrink your photos, it will not be "squashed" disproportionately. The width and height will harmoniously shrink together.

 

Resample Image

tells Photoshop how it should deal with the shrunk image to make it nicer. This is optional

In our case, use "Bicubic Sharper." It will sharpen the image once you shrink it.

 

 

[step 3]

Save It!

http://i73.photobucket.com/albums/i210/msniner/photoshop101%20-%20shrink%20pics/resize3-saveclicky.jpg

 

[step 4]

Make your picture much more efficient, lessen viewers' waiting times on the Internet.

http://i73.photobucket.com/albums/i210/msniner/photoshop101%20-%20shrink%20pics/resize4-save4webdialog.jpg

 

In Photoshop, the Save for Web and Devices tool lets you "slim down" your picture for Internet viewing...or even on portable devices such as handphones or PDA's too.

 

You can play with these options:

 

- For pictures taken with a digital camera, select

JPEG

(shown)

 

- Where the "Low" selection is, you can change it to "Low", "Medium", "High", "Very High", or even "Maximum"

This is the Image Quality dropdown menu.

What this is for is for you to set the quality of your picture once you save it.

 

-

Low

means quicker to show up on the Internet, smaller file size, but the picture will appear lousy. You can even see it live on the Preview window on the right of that screen as compared to the left when you begin changing this option

 

- Vice-versa,

High

, or even

Maximum

makes your pictures sparkling perfect, but your viewers will have to wait a looooong time for your picture to load or download if you place this on the Internet and will most probably carry a huge file size

 

So you see, web developers usually play around with this, balancing image quality with reasonable file sizes and loading times

[redbeacon]

How to shrink down your pictures (Part 2)

 

The freebie way

 

Ok, so what about the rest of us without Photoshop? Thankfully, there are freebies on the Internet that lets us do the same kind of resizing magic:

 

While I don't endorse or support these websites in any way, I still find them useful in my day-to-day imaging tasks.

 

Resize2Mail

An online tool that can shrink your photos. Yep, you do the resizing on their website, not on your desktop.

But it doesn't store your photos though, you gotta save the resultant shrunk image, and then find your own online photo album to store your photo.

 

EasyPic

A desktop Image resizing tool. Even lets you overlay text onto the image such as (copyright John Doe)

 

Paint.NET

 

A totally free image manipulation program that offers much more than the standard Microsoft Paint program. Has some features just like Photoshop too. Comparable to GIMP.