How to Resize your Photos for your Website

As a web designer and an amateur photographer, I am approached often for advice on photographs. There are many who do not understand  how to prepare their photograph(s) for upload to a website – the physical size of the photo file (DPI) and the measurements of the photo (pixels). This is what I’m going to cover today.

Photographs are an important part of any website. A photograph can lend information to the story on the particular page while adding a visually appealing focal point. It’s important that they not take up more space than necessary on your web host and that it look nice on the given page.

DPI (Dots per Inch)

This photo was edited in www.thirdlight.com converted from 300dpi to 72dpi and reduced to 350 pixels wide.

Most digital cameras have the ability to set the quality of the photos you take. I always encourage friends, family, and clients to set their cameras to take photos at the maximum setting, or DPI. The highest might be anywhere from 200dpi to 600dpi or higher – each camera is different. I know that the lower you set this, the more photos you can fit on your camera’s memory card and some may like this feature. But, in the case of digital photography, more isn’t better. I strongly encourage you set your camera to shoot at the highest quality possible ALWAYS. If you find you are filling up your memory card too quickly, which it certainly will – buy a larger memory card. I encourage this because, you just never know when you might get that absolutely PERFECT shot that you will want to print as large as you can to frame and hang on your wall with pride. The lower the quality of the photo (i.e. the lower the DPI) you’ve taken, the fewer print options you’ll have. That is, the photo will look best printed on 4×6 photo paper but will look “pixelated” (i.e. boxy and jagged) printed at 8×10. The better quality the DPI is set to, the more choices you’ll have to print.

Think about the term – DPI. Dots per inch. If you take a moment to imagine a 1 inch square, in your mind fill it with 72 dots per inch. Now fill that same square (again, in your mind) with 300 dots per inch. Which one do you think will look better? (I’m hoping you answered the 300 dots per inch image!) Again, more is better.

On the web, however, the quality doesn’t need to be high. In fact, 72dpi is the industry norm. And any photo converted to 72 dpi from say a 300 dpi digital photo, will look just fine on any computer monitor.

So, how do you go about converting your 300dpi digital photo to a 72dpi internet-ready photo? It’s easy. Now, obviously if you have Photoshop or some other graphics program installed on your computer, you may use that to convert your photo. But if you don’t, there are many online photo resizer programs. For the purposes of this blog column, I did a quick Google search for “image dpi converter online” and I simply chose the first option that presented itself in my search engine results page (or SERP) – http://www.thirdlight.com. My first step is to upload a photograph I’d like to convert. It was originally a 300dpi photograph measuring 2304 pixels wide by 1728 pixels high. With this online tool, I can add a caption, keywords or copyright information and I can resize, crop or convert my photo, however, you may not use both options at the same time during 1 session. If you are using this tool, you’ll have to click on “Show Advanced Options” in order to set the DPI. Once you click that, you’ll be able to select 72 DPI from the drop down menu.

Pixels / Dimensions

Along with changing the DPI of an image, you’ll want to reduce the actual width and height of your image so that it fits in the allotted space on your web page. This is where it may get a bit tricky.

Websites are typically designed at 1000 pixels wide these days. This 1000 pixels usually includes a menu bar on the left, the right or a menu bar on both sides with the remaining space allotted to the main body. Each website template will differ. As an example, let’s say that you have a 3-column web design with 2 menu columns each measuring 250 pixels leaving 500 pixels for the main body. If you are intending that your image should go in one of the 250 pixel menu bars, as in this example, you’ll want your image to be no larger than 250 pixels wide. If you intend your photo to go into the main body, however, your image should be no larger than 500 pixels if it’s to fill the main body left to right with main body text falling above and/or below. If you want your image to be “nested” within the text either aligned to the left or right, you’ll want your image to be smaller than 500 pixels to allow text to actually fall to the left or right of your photo, as the photo does within this article. You may need to play with this for a bit to get the exact look that you are after. But, after doing this a couple of times, it’ll get easier.

Do you use a different online tool in order to resize your photos or images? If you do, please share them in the comments below.

Post By Heather Murray (9 Posts)

Heather Murray is a Professional Web Designer for small and home-based businesses, working primarily in content management systems Joomla and WordPress. In this blog, I provide helpful tips about web design, optimizing for search engines, linking to social media accounts (Twitter, Facebook, LinkedIn, YouTube, StumbleUpon, etc.) and how to best use images. She can be reached at heather@clusterwebdesign.com.

Website: →

Connect