How To Size Images
Before Adding To A Webpage

Learning how to size images is something that every webmaster must do. If images are not sized correctly, they will be distorted and grainy making your blog or website look amateurish and unprofessional.

The best way to ensure that you size graphics properly is to do it in a photo editor before uploading them to your webpages. You can use html image size code to do minor adjustments after they have been added to a page, however it is very difficult to keep the image proportions accurate and quite often you will end up with distorted images if you are not careful.

We will teach 3 ways to size images:

• Adobe Photoshop for those who have the software



• Picnik, a free web-based service for sizing images



• HTML image size code, for minor adjustments

Tutorials/Photoshop and Picnik--Read or Watch Video

You can learn how to size images in Photoshop and Picnik either by:

• Reading the instructions below OR by
• Watching our image size video tutorial where we briefly take you through the image sizing process in each application.

Written Instructions--How To Size Images

I am lucky enough to have Adobe Photoshop on my computer. It is an expensive piece of software but for what I do it was worth the investment. You may have Photoshop too or another photo editor that you use to size images.

In Photoshop, the process could not be easier. All you have to do is open your image and from the menu bar choose Image-Image Size. The screen shot below shows the Image Size dialog box.

I use the pixel dimensions at the top but you can also size the document in inches, percent and more. It is very important to have the "Constrain Proportions" box check (bottom of screen). This will keep your image from getting distorted. I usually input the width that I need and let the height adjust proportionately.

Once you get it sized the way you want it, write down the image size in pixels. This screen shot shows exactly where you need to input the Height and Width values (in yellow) within the image tag.

HTML Document

The next step is to upload the image to your server and place the image tag in your HTML document. If you need help with HTML src image code and properly aligning images, visit our position images webpage.

There you can copy and paste the exact code you see above plus several other image positioning options like lining them up next to Google ads.

I am new to Picnik but could not be more impressed with the application. It is easy to use, has just enough functionality and is very user friendly.

You don't even have to open an account unless you want Picnik to keep copies of your images for you. It is very self explanatory and when I tested it out, it took me a total of 2 minutes from start to finish.

I uploaded a photo from my computer, sized it and then saved it back to my computer. Quick, easy and no problems at all.

After clicking on this link to Picnik, you will:

• Click the "Get Started" button
• Then click "Upload a Photo" and find the image on your computer
• Choose from options which include rotate, crop, fix red eye and resize

Choosing resize will take you to this screen. At the top of the screen you will be able to input your new image dimensions. Make sure the "Keep Proportions" box is checked so that your image does not get distorted. Write down the image height and width.

Picnik Resize Image Screen

Next you need to save the image back to your computer. You will have the option at this time to have Picnik store a copy for you as well.

The last step is to input the image tag into your HTML document (see screen shot above for help).

That's it. Done!

Video Tutorial--How To Size Images

Are you a visual learner? Watch this six minute video and see me adjust image sizes in both Adobe Photoshop and Picnik.

HTML Image Size Code--For Minor Adjustments Only

As I mentioned above, adjusting image size after you upload to your webpage is not a very good idea, unless you are making minor adjustments only. By minor I mean less then 25 pixels.

Even if you do a good job of proportionately adjusting both height and width in your HTML document (ex. add 40 px to height and 40 pixels to width), your image was not uploaded at those new values so results will be sketchy. I have found that if I only adjust less than 25 pixels, my image will usually retain its quality, depending on the size of the image to begin with.

If you have gone to all the trouble of fixing and sizing an image before you uploaded it then decide to alter image size slightly, my recommendation is to go ahead but make sure you do it proportionately.

If you have to alter the image by more than 25 pixels, I recommend making the changes in your photo editor and then re-uploading to ensure a visually pleasing image.

Visit Our Other Image Webpages

	How To Position Images Learn all about positioning images so you can get them exactly where you want them on your webpages. Find the exact code for all of your image positioning challenges including wrapping text and objects around images and lining them up in a row or column.
	Creating Image Links If you are going to go to the trouble of placing web site images on your site, you might as well make them into image links whenever possible. Learning how to make image links and using them often will greatly improve site navigation for your visitors and help your monetization efforts.
	Why Tag Images? If a webmaster has used the html image alt tag properly, you will see a small box of text appear when you hover your mouse over an image. A huge number of visitors find my site because I purposely add a keyword-rich alt tag to every single web site image that I place on my sites. Learn how here.
	Shopping Images Not all website graphic sources are created equal. Read my recommendations on where to find free web site images, on buying images inexpensively and on where to find a great selection of clipart. Also, watch a video tutorial on scanning images.
	Photoshop Drop Shadow Tutorial Look at the web site images in the header above. When I created them, I added a gray shadow, aka a drop shadow, around each image. Learn how to add a professional touch to your webpage graphics by watching a drop shadow tutorial video.