Chic Knits Home page Knitting Blog About Free Knitting Patterns Knitting Knitting Tips Knitting Links

 Resizing an Image for the Web

Want to be the star of your families' email INBOXES? Need to learn how to trim your pictures so they will load quickly on your Blog? Want to send me some nice pictures of your completed projects?

You NEED to know how to process your pictures so they don't choke your viewers browsers and crash their computers! You want your web pages to load as quickly as they can, even for the people who don't have high speed connections..

You need to RESIZE your digital pix and make them behave!

Look no further, my digital friends! :)

It's TIME for YOU to start BOSSING Your PICTURES Around!

What this Is...

This tutorial is just simply the way I process most of the pictures from my digital camera. In their raw form, they start out very big (about 9M). If you don't know what that means, it doesn't matter.

SIZE MATTERS and we're going to tame that ginormous camera file and make something you CAN write home about.

Emails folks sent me indicated most were using Photoshop Elements. This is a program that is included with many printers on the market; that's how I got it. If you don't have this program, read this anyway. Most Graphic Design Programs use the SAME COMMANDS. They just might be in a different place in the program interface. For this reason, I'm keeping screen shots to a minimum in hopes you can grab onto the steps easily :)

SO without further ado, let's re-size a file. I am going to use a drop-down Command Menu shorthand you might've seen elsewhere but is really easy and clear if you've never used it. The first word will be the word you look for in the Menu Bar at the top of your main program window. It will be followed by a right-facing arrow; that will be followed by another word. This sequenced approach will be repeated until you arrive at the proper Command.

When you click on the first word in the sequence, a menu will drop down - follow that with your mouse down the menu and click on the last listed option. Here we go...

Open the File  

File > Open

A small window should open that shows folders. Navigate to the folder that has the picture you want to resize and highlight it, then click the OPEN button on the lower right.

Save the File


That's right - right-off-the-bat, I save the file in the Photoshop format. This protects your original from tampering and will save your A** down the road someday, I guarantee..

File > Save As

Choose the folder you want to save the NEW file in from the top drop-down window. Then enter the file name and the file type - Photoshop (*.PSD; *.PDD) in the proper areas on the bottom of window.

A Word about View  

I believe one of the most confusing things about this process is that you need to understand how to use the VIEW Command. Maybe your picture looks really huge! Maybe it looks as little as a thumbnail...

Want to see your picture without the heartache?

View > Fit On Screen

This will always make the picture a manageable view. You can also use the Magnifying Glass tool to shift the view size up or down. This tool is found in the floating window tool box which usually opens on the left part of the screen. I use both these options to tame my views.

About Web Pix  

IMPORTANT FACTOID #1: There a two main formats for the web, JPEG (jay-peg) and GIF (gyff).

You use JPEGs for photos and GIFs for graphics with mainly solid colors.

These file formats squeeze all the information in your picture and compress them so they can be delivered through the phone lines, cables, etc to your browser.

IMPORTANT FACTOID #2: to maximize file download times, I like to make sure my files are not larger than 25 Kilobytes. (The old school rule-of-thumb is the whole page (with all text and graphics) should not be larger than 50K. Try to stay around this range and people will LOVE YOU! Believe me, most people DO NOT have high speed connections.)

Let's continue with the picture that we opened...

Resize the Pix  

Image > Resize > Image Size

Again, a little window opens on top of our picture. Because this is a Handy-Dandy kind of tutorial, we're going to re-size one picture, than you can go back and experiment with other settings and sizes once you've wet your whistle.

Midway in the Image Size window you see an area that says Document Size - this is where all the work takes place. You will now fill in the white boxes to reflect a User Friendly picture size for your blog or family emails. My favorite is roughly the size of a post card. You see the picture above is going to be resized to the dimensions of 4.5" W x 3" H - a nice horizontal size.

MY RECIPE for a Mid-Size Blog Picture:

Width -  not greater than 4.5"
Height - not greater than 6"
Resolution - always 72
Constrain Proportions - checked
Resample Image - checked and Bicubic

Click on OK in the upper right corner. Your picture will appear to jump back and probably shrink onscreen. Use the View > Fit On Screen or the Magnifying Glass tool to adjust.

Save Your File for the Web  

File > Save for Web

Navigate to the right-hand side of the new window that opens and make the following adjustments:

MY RECIPE for a Mid-Size JPEG:

File Type -  JPEG
Size - Medium
Quality - 30

These settings again give you a nice quality, clear, small file size. Look at the right-hand picture presented in the window at the bottom - you see your file sizes and other handy info, including estimated download times. WOOT! My window says 5 seconds...

TEST Your File  

Place this file in a webpage and upload the page. OR, email yourself the new JPEG picture file.

Test it out - I think you're going to LIKE IT!

        ©Bonne Marie Burns
All Rights Reserved

Unauthorized reproduction in any form prohibited.

"ChicKnits" and "Chic Knits" are Trademarks of and are owned by
Bonne Marie Burns of Chicago

MERCHANTS: you are NOT allowed to copy this material and distribute it in any way.