I like to illustrate my blog posts with images and photographs. One of the essential processes I must go through is resizing the photographs or screen shots that I display in my blog.
Why do I resize the image? I have two objectives. One is so that it will neatly fit in the area that my blogging template allows for text and images. That area is 450 pixels wide. The other objective is to reduce the file size of the image. For example, a screen shot may have an image file size 0f 400kb but through image resizing that may be reduced to 30kb for example. It will download much more quickly.>
You wish to display a digital camera image on your blog. Digital cameras allow you to create images of different sizes. The size of the image is also dependent upon the settings you have specified on your camera. In this case, when I refer to dimensions “height” and “width”. For example, the two cameras that I use can produce images in a variety of dimensions. Consider the table below.
I usually “capture” or take my digital photographs at the highest resolution or largest dimension so that, for want of a better expression, I have plenty of “data” to work with when I edit the digital photograph. I find that with a larger image you can create an amended photograph with excellent detail and clarity when you resize it for printing, inclusion in a document or hosting on the Internet.
As an aside, the higher the dimensions an image possesses the greater its file size will be in kilobytes, most of the time. Consider the table below that shows the file size of the “north beach” digital photograph after it has been resized and saved at a “High Quality” setting in the JPG file format at a variety of different dimensions. You will observe that the original image weighs in at 1383kb. If it is simply re-saved it immediately drops in size to 404kb. As one decreases the dimensions of the image its file size drops as well.
All of the images listed above are available from this online directory. This is a screen shot of the directory on my mac.
I like to work with Adobe Photoshop or Photoshop Elements. If I need to resize just a few images I will simply open each image in turn and select Image menu > Resize > Image Resize. The following dialogue box will appear.
In the example above you can see that the original image is 2048 x 1536 pixels. The resolution is set at 72 pixels per inch which is the ideal resolution for display on the web. I prefer to work pixels in terms of units. Other users prefer centimetres or inches. I can visualise pixels better on the screen.
I wish to give the image a width of 400 pixels. I simply type 400 in the width field. Notice that the checkbox “Constrain Proprtions” is selected. That ensures that the resized image is not distorted. Photoshop Elements automatically set the height at 300 pixels. Once I have completed the two fields I click OK.
Adobe Photoshop and Photsoshop Elements have a “Save for Web” menu option from the File menu that gives you a great deal of control over the dimensions, file size and quality of the image. You can alter the quality and numbers of colours and view the impact in real time.
Photoshop and Photoshop Elements also allow you to batch process a folder full of images so that all are resized to the dimensions that you prescribe.
Why would you like to resize an image? Well, there are a number of reasons:
1. Images with large dimensions are also large in file size. The North Beach image before resizing is 1.2 megabytes. After resizing it is 20 kilobytes. An amazing reduction in size. It is easy for you to include this image in a word processing document, PowerPoint presentation or an email.
2. Placement within a document. Do not simply import large images into a Word document and then resize it. The file size of your document will be too large as all the original image data is retained.
3. Importing into PowerPoint. Do not simply import large images into a PowerPoint presentation and then resize it. The file size of your document will be too large as all the original image data is retained.
4. Emailing to a friend. What would your email recipient prefer? A 1mb or a 100k file?
5. Posting to the Internet. Keep the image a reasonable size so that download times are reduced.Creating a desktop image.
You can download a set of instructions in pdf or word format that I created for resizing images in addition to other common image processing operations from my digital photography workshop page.
There are alternatives to Photoshop and Photoshop Elements when it comes to resizing images. On the Mac there is the excellent programme Pixelmator which allows for batch processing of images as well. On the PC there is a dedicated tool called PixResizer that also performs batch operations.
Please share your own techniques below.
January 18th, 2008 at 7:17 am
Hi John,
In some cases (Just a few pics to resize, don’t have any client side software available) Picnik (http://www.picnik.com/) is pretty good.
January 18th, 2008 at 7:26 am
Thanks Nick,
This is a good pointer. Flickr and Picasa (PC) allow editing as well and I hear on the grapevine that Picasa client side software will be made available for the Mac this year.
Cheers
John
January 20th, 2008 at 1:46 am
Great tips and visuals for resizing images.
January 20th, 2008 at 5:07 am
Thank you Mathew,
I appreciate the feedback,
Cheers
John
April 25th, 2008 at 11:53 am
Do you know of any courses in the Illawarra on photoshop?
April 25th, 2008 at 12:22 pm
Thanks for the inquiry Lynne, I shall respond via email. Cheers, John.
May 2nd, 2008 at 8:12 pm
Thank you so much, Sir John!~I really appreciate your’e knowledge.I’m an Artist (+ Poet)in W.Australia,I Engrave pictures into wood,(I don’t carve ducks or anything like that!!)Your’e description of imaging on the Internet,~Is exactly what I needed.I’ve gone too many Sites,~ without clear,and concise interpretation.Because my Images have Depth it’s important 2 portray them in the best possible way.(I’m almost 50)…so Thank you again, because your’e site has clarity. Rod Mckenzie,Fremantle W.A.~Email~rodmck44@yahoo.com.au
May 2nd, 2008 at 10:26 pm
Hi Rod,
Thank you for the vote of thanks! I like to try and make my instructions clear. I should add more! Nearly 50? I am 49. ^_^ Cheers, John.
June 29th, 2008 at 7:05 pm
[...] uploaded to the MacBook with USB 2.0 card reader and processed with Adobe Photoshop Elements 3.0. I resized each image to a width of 400 pixels and a resolution of 72dpi. I adjusted the levels for some of [...]
July 25th, 2008 at 5:56 am
I just found your information. I plan on taking a class in Photoshop Elements this fall but was stuck today. I recently watched a photographer do all sorts of great things with this program that I totally underuse. Thanks and more thanks from just outside of New York City!
July 25th, 2008 at 7:28 am
You are welcome Sandy. I hope the material is useful. Feel free to share some of your creations. Cheers, John.
August 6th, 2008 at 10:56 am
Hi there,
I am trying to figure out how to resize my enormous tiff files of my artwork for this art program I will be participating in. I am hoping to gain an understanding of the relationship of Kilobytes to Megabytes…as they have asked me to put 10 images on a CD for presentation to the group. They have said that they should be at a res of 72 and that the image should not exceed 900 pixels in height and 1200 pixels in width and that each image should not exeed 5MB. When I resize it doesn’t seem that the files are any where near 5MB. Can you suggest some reading material or something for me so that I cam understand this relationship?? thanks for whatever help you might offer!
sincerely,
Jo-Neal
August 6th, 2008 at 7:28 pm
Hi Jo-Neal,
I shall send this via email as well. Now, if you resize your artwork TIFF files to a maximum of 900 pixels in height, a maxiumum of 1200 pixels in width at a resolution of 72dpi they may be about 3mb in file size if saved as uncompressed TIFF files.
If the same files are saved as jpegs or as TIFF files using jpeg compression then they may only be 70k to 100k in file size. As you can see that is a significant variation.
The variation in file size may not be a product of the relationship between file size and resolution in your case but due to the file type and file quality that you are applying.
I hope this helps.
Best wishes
John