New website!

Hello inter-tubes! I just finished my new website, check it out!

charlesmcnally.info.

How To Resize a Photo for the Web

It’s happened to all of us, at least once before. Perhaps you’re reading a blog, or looking at someone’s social networking profile. An image which you are interested in starts to load, but something is wrong! The image is taking forever to load, line by achingly slow line, and it’s twice as wide as your computer monitor. Three minutes later it finally finishes loading, and you discover that it isn’t the image you wanted to see anyway. Would you go back to this web page? Would this source seem very professional? Today I’ll show you how to avoid this mistake and properly resize your photos for the web. This will keep your visitors moving quickly through your website, and make sure your images and your design show up correctly.

How big should this image be, anyway? By now you should be somewhat familiar with pixels, at least enough to know that Jakob Nielsen recommends designing for a 1024x768 screen resolution - but ensuring that it scales down to at least 800x600. Take a few more pixels away for the edges of your design and the edges of the browser and whatnot, and we reach my rule-of-thumb bottom line. With the exception of select applications which require more image resolution and clarity, I try not to ever let the pixel size of my web-bound photos exceed 600 pixels in length. This usually keeps the file size of your image under 100Kb, which is a good thing. You can manipulate your image quality a little bit when saving and reduce the file size even more, but that’s a subject for many tutorials unto itself.

So now we know how big it should be, how do we get it there? If you have Adobe Photoshop, the answer is very easy:

1) Select File > Open from the menu. (Or double-click on the blank grey background in Photoshop.)

2) When your image loads, select Image > Image Size. (Or press Alt+Ctrl+I.)

3) Under “Pixel Dimensions” put the length you need. I used a vertically cropped image, so I put 600 under height, which automatically changed the width to 429. Obviously, results will vary depending on your image’s ratio of width to length.



Note: if your image resize box doesn’t show the little chain link graphic (which I have circled in red) make sure the “constrain proportions” check box is checked (it’s toward the bottom of the Image Size dialog box.)

4) You’re good to go! Save that puppy for the web using the menu command File > Save for Web. When you get the Save for Web dialog box, all you have to do is select the preset named JPG High and click save.

The Save for Web dialog box is actually quite powerful, and I’ll go into that in a later article. For now though, you know how to use photoshop to resize an image. Good job!

I like this quote:

"One of the ongoing projects of modern art, and probably its most serious, is to tell what it's really like to be living here now - not what it's like on television or in advertisements, not what it's like to be a cohort, but what it's like to be a man or a woman in that unique body that's always living an odd life. Against the forces of false persuasion the artist offers an undeniable sort of truth, stated in simple human terms, minus the jargon and the emblems of expertise and false authority. It's always a voice and the voice always says: this is how it is for me, and I hope you understand."

- John Rosenthal

One year later...

I'm adding a few silver gelatin prints (like the one above) to the Realscapes show and hanging it at Obento Sushi in Oldtown Eureka this April for Arts Alive. I'll be making flyers soon and hyping it on Myspace. If you're in the area, stop by for some wine.

Cheezburger Kitteh

If anyone out there would like to help suggest a caption for this, I would be very much obliged. When I have selected an appropriate (and funny) caption, I will post it to the voting section of I Can Has Cheezburger...