I get asked all the time how to resize a photo or image... well thanks Photoshop Tech Notes... here is how it is done. ;) enjoy!

-------------------------------------------

What's covered

Image sizes on the screen and in print
Resizing and resampling images
Resizing images without resampling
Using the Crop tool to resize images
Image size formulas

You can resize your images in several ways using Adobe Photoshop and Adobe Photoshop Elements. Each way to resize an image has advantages and drawbacks. To get the best result when you resize images, you should understand the concepts behind and the results of each method of resizing. These concepts affect how the crop tool options operate as well. If you resize and crop images without being aware of the concepts involved, then you may see unexpected results.

Image sizes on the screen and in print

The size of an image when you view it on the screen is different from the size of an image when you print it. If you understand these differences, then you can develop a better understanding of which settings to change when you resize an image.

Screen size

The screen resolution of your monitor is the number of pixels that your monitor can display. For example, a monitor with a screen resolution of 640x480 pixels will display 640 pixels for the width and 480 pixels for the height. There are several different screen resolutions you can use, and the physical size of the monitor screen usually determines the resolutions available. For example, large monitors typically display higher resolutions than small monitors because they have more pixels.

To find out what your screen resolution is, choose Start > Control Panel > Display > Settings and look at the screen resolution (Windows) or System Preferences > Displays and look in the resolution section (Mac OS).

Image size on the screen

Images are of a fixed pixel size when they appear on your monitor. Your screen resolution determines how large the image appears to be. A monitor set to 640x480 pixels displays fewer pixels than a monitor displaying 1024x768 pixels, so each of the pixels on the 640x480 pixel monitor will be larger than each of the pixels displayed on the 1024x768 pixel monitor.

An image of 100x100 pixels will take up approximately 1/6 of the screen at 640x480, but it will only take up approximately 1/10 of the screen at 1024x768, so the image will look smaller at 1024x768 pixels than at 640x480 pixels.

Image size in print

The other values used in resizing images, the physical size of the image when printed, and the resolution (the number of pixels per inch), aren't used in calculations until the image is printed. When you go to print, the physical size of the image, the resolution, and the pixel dimensions interact to determine the amount of data in the image and its print quality. In general, higher resolution images print at a higher quality. See the sections that follow for more information on resolution and physical size in the below sections.

Image Size dialog box

When you use the Image Size dialog box to resize your images, or when you use the Crop tool options bar to crop, and consequently resize, your images, four aspects of your image can change:

-- the pixel dimensions, which is the width and height of the image in pixels - in the Pixel Dimension section

-- the file size of the image when it's open in Photoshop - in the Pixel Dimension section

-- the physical size of the image when printed, in width and height - in the Document Size section

-- the resolution of the image when printed (the amount of data in the image for printing), which is the number of pixels per inch or per centimeter - in the Document Size section. The resolution is the amount of detail in the image.

Note: See the Image size formulas section of this document for some simple formulas you can use to understand how Photoshop and Photoshop Elements determine the size of an image.

The Image Size dialog box allows you to resize your images in two ways: by increasing or decreasing the amount of data in the image (resampling) or by maintaining the same amount of data in the image (referred to in this document as resizing without resampling). When you resample, the image quality may degrade to some extent and you may have to do some extra work afterward to compensate for the results, such as using the Unsharp Mask filter to sharpen your image.

To reset the Image Size dialog box to its original state, the Cancel button can be changed to a Reset button by holding down the Alt (Windows) or the Option (Mac OS) key.

Resizing and resampling images

When you resize an image and resample it, you change the amount of data in that image.To resample your image, ensure Resample Image is checked at the bottom of the Image Size dialog box. Resample is on by default.

Resampling changes the total number of pixels in the image, which are displayed as Width and Height in pixels in the Image Size dialog box in the Pixel Dimensions section. When you increase the number of pixels in this section of the dialog box (upsampling), the application adds data to the image, and when you decrease the number of pixels (downsampling), the application removes data. Whenever data is removed from or added to the image, the image quality degrades to some extent. Removal of data from an image is usually preferable to the addition of data, because upsamping requires that Photoshop or Photoshop Elements guess which pixels to add; this is a more complex procedure than guessing which pixels to remove, when you downsample. You will get the best results working with images that you bring into Photoshop in the proper resolution for the output you want. You may get the results you need by resizing your image without resampling. However, if you need to resample your images, you'll want to do so only once.

When you check, or turn on, Resample, you can change any or all of the three values in the Image Size dialog box: pixel dimensions, physical size, or resolution. If you change one value, then you will effect the others; the pixel dimensions are always affected.

-- If you change the pixel dimensions, then you will affect the physical size, but not the resolution.

-- If you change the resolution, then you will affect the pixel dimensions, but not the physical size.

-- If you change the physical size, then you will change the pixel dimensions, but not the resolution.

You cannot set the file size; it changes when you change the total amount of data in the image (the pixel dimensions). If you note the file size value before you change the other values in the dialog box, then you can use the file size information to understand how much data will be removed or added to your image when you resample the image. For example, if the file size changes from 250 KB to 500 KB, you'll be adding twice as much data to the image, which may seriously degrade the image. Degraded images may look blurry, or jagged or blocky.

Resizing images without resampling

When you resize an image and do not resample it, you change the size of the image without changing the amount of data in that image. Resizing without resampling changes the physical size of the image without changing the pixel dimensions in the image; no data is added to or removed from the image. When you uncheck, or turn off, Resample, the pixel dimension fields are not available, and the only two values you can change are the physical size (Width and Height in Document Size) or the resolution (pixels/inch). When you resize without resampling, you can set either the physical size, or the resolution of the image. To keep the total amount of pixels in the image the same, Photoshop compensates for the value you set by increasing or decreasing the other value. For example, if you set the physical size, Photoshop changes the resolution.

When the pixel dimensions are constant and you decrease the physical size of an image, the resolution increases correspondingly. If you decrease the physical size of an image by half, the resolution doubles, because twice as many pixels can fit into the same space. If you double the size of an image, the resolution decreases by half, because the pixels need to be twice as far apart to fit the physical size.

For example, you have an image that has a width and height of 400 x 400 pixels, has a physical size of 4x4 inches, and has a resolution of 100 pixels/inch. If you want to reduce the physical size of the image by half without resampling, you set the physical size to 2x2 inches, and Photoshop increases the resolution to 200 pixels/inch. Resizing the image this way keeps the total number of pixels constant (200 ppi x 2x2 inches = 400x400 pixels). If you double the physical size (to 8x8 inches), then the resolution will decrease to 50 pixels/inch, because adding more inches to the image's size means there can only be half as many pixels in each inch. If you want to change the image resolution, the physical size will change in response.

Important: The amount of data in an image is controlled by the pixel dimensions, and the resolution and the physical size are used only for printing.

Note: PPI (pixels per inch) is different from DPI (dots per inch). PPI is the number of pixels in each inch of the image (as described in this section), and DPI relates only to printers, and varies from printer to printer. Generally there are 2.5-3 dots of ink per pixel. For example, a 600 DPI printer only requires a 150-300 PPI image for best quality printing.

For information about the other options in the Image Size dialog box, see Choosing an Interpolation Method and Changing the Print Dimensions and Resolution of an Image in Photoshop Help, or To change the print dimensions and resolution of an image and To resample an image in Photoshop Elements Help.

Using the Crop tool to resize images

Using the term resamping when you use the Crop tool to resize images is unclear because there is no Resample option to select when you use the Crop tool. When you use the Crop tool to resize an image, the pixel dimensions (and consequently, the file size) can change, even though the image is not being resampled. In these cases, the pixel dimensions and resolution change to incorporate more pixels into each inch of the image based on the number of pixels you select in the crop region, though Photoshop is not specifically adding or removing data from the image. Because of the way the Crop tool handles pixel dimensions, indicating that the amount of data in the image has changed is more useful than indicating whether or not the image has been resampled.

When you crop an image, you are removing data from or adding data to the original image's size to create a new image. Because you are removing or adding data relative to the original image, the concept of resampling loses much of its meaning because the number of pixels per inch can vary based on the number of pixels in the crop selection. When the number of pixels in the crop selection allows, Photoshop will try to keep the same resolution of the original image; this is traditionally considered cropping without resampling. However, when you are not exact about the number of pixels you select, the pixel dimensions and file size changes in the new image.

Crop tool options

The options in the crop tool options bar are different before and after you draw the crop selection. When you first select the crop tool, you can set values to crop to a specific width and height, and resolution. The units of measurement available for the crop size width and height are inches, centimeters, millimeters, points, and picas. To make sure you are using the right unit, type the unit or the unit abbreviation after the number in the value field, for example: 100px, 1 in or 1 inch, 10cm, 200 mm, 100 pt,, or 100 pica . When you specify values for height and width, the crop selection contains only the four corner change points of the 8 change points available when no height and width values are specified.

Note: If you do not specify a unit of measure in the Width and Height fields in the Crop tool bar, the default unit of measure is inches.

You can also set a value for the resolution of the cropped image in the Resolution field, and then choose pixels/inch or pixels/cm from the pop-up menu.

To review the options available after you draw the crop selection, see Using the Crop tool in Photoshop Help, or To crop an image and Crop tool options in Photoshop Elements Help.

To clear the values from a previous crop, click Clear before you draw your crop selection. After you draw the crop selection, you can clear the crop selection by clicking the Cancel button in the options bar or pressing the Escape key, or you can accept the crop by clicking on the Commit button in the options bar or pressing the Enter key.

Changing inch size only

When you set the physical size of the image in inches in the Crop tool options, and you don't change the resolution, the pixel dimensions change based on the ratio of the number of pixels you drew in the crop selection to the original pixel dimensions of the original image. The resolution then changes to fit the extra pixels into each inch of the image, based on the image's original size.

Note: The original image used in the examples below is 4x4 inches, 100 ppi, 400x400 pixels at 468.8 KB.

In this example, the image is reduced by half of the physical size (from 4 inches square to 2 inches). The pixel dimensions are reduced by half as well. The original resolution (100 ppi) is maintained, except it's increased to compensate for the extra pixels (8 pixels/inch) added to the crop rectangle.

Changing inch size and resolution

When you set the physical size of the image in inches in the Crop tool options, and you also change the number of pixels per inch (the resolution), the pixel dimensions change to accommodate your request for more or fewer pixels in the document as a whole. You set the inches and the number of pixels in each of those inches. Photoshop removes or adds data to fit the number of pixels in each of the inches you specified.

Note: The original image used in the examples below is 4x4 inches, 100 ppi, 400x400 pixels at 468.8 KB.

In the first example, you reduced the physical size by half, but balanced that by doubling the resolution, so the pixel dimensions and file size were able to remain the same.

In the second example, you reduced the physical size by half, and increased the resolution, so the pixel dimensions had to increase to hold the extra number of pixels per inch. The file size also increased.

In the third example, you reduced the physical size by half, and reduced the resolution (the number of pixels per inch), so the pixel dimensions decreased because there are fewer pixels now in the image. The file size also decreased.

Changing the pixel dimension only

When you set the pixel dimensions, but you do not set the resolution, the resolution stabilizes at the same resolution as the original image, and the a new physical size is produced to hold the number of pixels specified in the image and per inch.The file size changes because you are changing the pixel dimensions while letting Photoshop stabilize the number of pixels per inch.

Note: The original image used in the examples below is 4x4 inches, 100 ppi, 400x400 pixels at 468.8 KB.

In these examples, when you set the pixel dimensions and the resolution is unchanged from the original image, the physical size must change to fit the number of pixels you specified (pixel dimensions) that you want held in each inch of the image.

Changing the pixel dimension and the resolution

When you set the pixel dimensions and you set the resolution, Photoshop creates a new physical size to hold the number of pixels in the image and number of pixels per inch that you specified. The files size changes because you are changing the total number of pixels in the image as well as setting the number of pixels you want in each inch.

Note: The original image used in the examples below is 4x4 inches, 100 ppi, 400x400 pixels at 468.8 KB.

In these examples, when you set the pixel dimensions and change the resolution, the physical size must change to fit the total number of pixels and the number of pixels in each inch that you specified (pixel dimensions and resolution).

Changing the resolution only

When you change only the resolution in Crop tools options, the size of the new image depends on the number of pixels you includ in your crop selection

Note: You can open the Info palette to find out how many pixels you are including in your crop selection.

Note: The original image used in the examples below is 4x4 inches, 100 ppi, 400x400 pixels at 468.8 KB.

In these examples, Photoshop uses the size of your crop selection, and the number of pixels per inch you specify (the resolution) to resize the image. The new image's physical size and pixel dimensions will fit the number of pixels in the crop selection you drew and the new resolution you set.

Image size formulas

The following formulas provide information about how Photoshop and Photoshop Elements calculate the physical size, resolution, and pixel dimensions of an image:

-- Physical size = Resolution x Pixel Dimensions

-- Resolution = Physical Size / Pixel Dimensions

-- Pixel Dimensions = Physical Size / Resolution

A wealth of information is available on how to stream Real Audio^TM files. However, if you’ve ever tried to find out how to stream MP3s like the big boys at MP3.com, you’ve no doubt discovered that real^TM knowledge is virtually impossible to find. Why is that? Didn’t this technology change the face of music on the web? The format is so popular, why isn't the supply of knowledge on this subject at least equal to the demand? The answer to these questions might simply be, "follow the money."

Web hosting companies reportedly pay as much $50,000* or more for a Real Audio^TM Server license. Tally up the total number of Real Audio^TM Servers on the net and that adds up to BIG money. So, clearly, Real Audio^TM has a lot to gain by indoctrinating the public through the company’s high powered advertising, software give-aways, and tie-ins, et cetera, all of which have built the Real^TM brand into a towering monolith of e-commerce.

On the other hand, MP3 technology is virtually free. For instance:

1. Anyone can encode MP3s without paying a dime to the creators (to me this was a noble gesture on the order of George Washington deciding not to be King of America). Some will say, "Hey, I can encode Real Audio^TM files free of charge too". Ok, that’s true, but you’ll most likely wind up paying your web host to stream them from your site at the rate of about five bucks per stream – minimum five streams. Not free!!


2. There are plenty of great, free MP3 players out there (bless you Winamp and Macamp). Some will say, "Hey, Real Player^TM is free too!". Ok, that’s true, but there’s no freedom of choice when it comes to what will play a Real Audio^TM file, so basically you’re stuck with their player. Real Audio^TM is a jealous god and wants no other players before it!!


3. Most important, no one has exclusive rights to an MP3 server-side delivery system. Licensing these rights, and the technology to go with them, is where Real Audio^TM makes it dough.

The bottom line is that there’s just not enough money in MP3 for the big guys because they can’t own it or control it. Worse than that, if the rest of us ever found out how easy it is to stream MP3s, a company like Real^TM Audio would take it like a pooch. After all, who would pay to stream audio when you could do it for free? In the world of Internet audio, MP3 is true independence.

Now, I wouldn’t go so far as to say that there’s some kind of conspiracy going on here, and to give the devil his due, Real Audio^TM blazed the trails in streaming technology, but personally, among all the major publications, I’ve only seen one article on how to actually stream MP3s, and the writers had me convinced that the only way to do it was to download either the Icecast or Shoutcast server software, and then they spent about 8 jillion words walking me through a minefield of software configuration "gotcha’s". By the time I finished reading this, I felt my chances of actually succeeding were about as good as making it across Texas on foot with a ‘Gore Got More’ banner. Happily, the truth was out there – and it was quite simple. Now I’ll pass it on to you. You ready?

The m3u, or playlist file, is the key. This extension, along with a single short line of text in the m3u file itself, instructs your player to "buffer" a certain amount of the song, start playing it when the buffer limit is reached, and then keep buffering and playing over and over until the song is finished.

Beyond the m3u file, you only need to consider three other factors: the MP3 file itself, your webpage hyperlink, and your web server—which needs to have certain mime types enabled. (Chances are your server already has these in place, but you should give your hosting company a call just to be sure. See the final section of the article for a list of mime types and related instructions.)

Just in case the above hasn’t quite soaked in yet, I’ll go ahead and break it down for you step-by-step with the help of a hypothetical scenario.

First of all, let say the domain name of your website is "www.zircontweezers.com", (Of course, as you follow this example, you'll substitute your actual domain name for zircontweezers!!) and you have a song called "Zirconia" that you want to stream. Here are the steps I recommend following:

1. Encode your song to MP3 format. I suggest encoding at 16kbps, 11khz, mono. Now, I’ve read some advice that recommends a 24kbps to 32kbps file, but most of your listeners are using dial-up modems with less than ideal connection speeds, so why take the chance of taxing their connection and causing that most annoying of streaming phenomena; "buffer- bog". It won’t matter how cool your song is, if your listeners encounter buffer-bog they’ll just roll their eyes and move on. Stick with 16kbps and, even if they’re getting no more than a 28k connection, your files will still stream like butter. (Note: Most encoders aren't capable of encoding at this low bitrate, so at the end of this article are links to tools that can, such as CDex and MPegger, as well as other software of interest.)
   

   To top it off, there’s not a world of sonic difference between 16kbps and the higher rates. Try this: Listen to this entire 16kbps file (11khz, mono). Now do the same with this 24kbps file (16khz, mono). Now likewise with this 32kbps file (11khz, stereo). You probably noticed that even though the 32kbps file is stereo, its sounds more like the 16kbps file than the 24kbps file - but it's twice the load on your player!! And if your connection speed was less than 56k you probable got bogged at some point, no? A more comprehensive analysis of bitrate vs. sample rate vs. mono/stereo is the subject of another article, but for now these samples illustrate the point. For a wider range of material in this 16kbps format check out my company website at Global Graffiti. One more thing: You should at least normalize your audio before encoding. Normalizing is another way of saying "raise the volume as high as it can be without distorting." Both you and your encoder will be happier with the result.

   
   


2. Rename the song you just encoded to "zirconia.mp3" (minus the quotes, of course).


3. Connect via ftp to your web server. Now create two folders in your website’s root directory. One called "music" and another called "playlist".


4. Upload "zirconia.mp3" to the music folder.


5. Create the m3u file. Open a new document in a plain text editor (such as Notepad or Simple Text—don’t use a fancy word processor) and type the following:




http://www.zircontweezers.com/music/zirconia.mp3





(Important: at the end of the above line press "enter" for a hard carriage return. Otherwise, some MP3 players - particularly Winamp - will get confused. Also, whether you use uppercase or lowercase letters in your filename or extension is not important, but being consistent about it is! My rule of thumb is to simply make everything, including folder names, lowercase. That way it's easy to remember.)




6. Select "save as" and name the file "zirconia.m3u". Click the "OK", or "Save", button to save it. (remember where you saved it!)


7. Upload the m3u file to the "playlist" folder.


8. Open your favorite html editor and open (or create) the webpage that you want to contain the link to the song. Create or modify your hypertext link so it looks something like this:




<A HREF="playlist/zirconia.m3u">Zirconia </A>


Note: I’m assuming that you already know enough about html to get through all this.





9. Upload this page to the root directory of your website. The structure of our hypothetical website assumes that your webpages are in the root directory of your website, and that the mp3 and m3u files are in the folders we made in the root. However, you can build your site-tree anyway you’d like: Just make sure your paths points to the right destinations!


10. Open your internet browser and try the link.

If you’ve done everything properly the song should buffer and stream like a champ. If it didn’t, check the following:

1. Are the paths to all the files correct? In other words, make sure that the files are all there, that everything is spelled correctly and consistently, that the intended files are in their intended folders, and that the links that point to those files are actually looking down a path where they can be found.


2. Did you enter a hard carriage return after the text line in the m3u file?


3. Check everything again. Aha! You found the problem. (Dyslexia strikes again!)


4. If everything else seems to be in order, but it’s still not streaming, check the "mime type" issue with your web host. Most hosting companies have an online utility that will allow you to add these mime types yourself. However, I recommend that you ask them to do it for you, or ask a tech-support person to talk you through it. Here’s a list of the ones you should add:

Skip Adams is an audiologist, Web-o-phile, and an Emmy nominated sound editor in Hollywood. His credits include The X-files, Dawson's Creek and more (look him up on the Internet Movie Database at www.imdb.com). He's also written several top ten records, songs for Dave Mason, and more. His company, Global Graffiti Music, specializes in custom music placement for film and TV (www.globalgraffiti.com). He is currently supervising the

Reference:

• MP3 streaming info: http://www.iocon.com/das/das.shtmlMP3 origins: http://www.mpeg.org/MPEG/MP3 licensing: http://www.mp3licensing.com/royalty/emd.html


• Real Audio^TM prices:http://www.realnetworks.com/products/server/index.html

*Updates: nearly two years have passed since this article was posted. While the main content hasn't changed some minor stuff has. Like the costs of a Real Audio server. It's a fifth as costly, but still 100 times more than the average Joe can afford. Other changes are more subtle, like the odd link that is a dead end. Sorry, I can't keep track of every moving target!

This article and all its contents are copyright © 2001 by S.J. Adams and Global Graffiti Publishing.

Song clip "To Die For" written by Steven Frank, courtesy of Global Graffiti Publishing, copyright 2001 - Global Graffiti Publishing