Step by Step: Getting Digital Photos Ready for the Web

By
Real Estate Agent with United Country Countryside Realty

As a real estate professional, I've been taking photos and  manipulating and loading images onto the web for a few years now.  But I never really knew what was going on when I got photos ready for the web.

The thousands of internet pages on the subject of photo resolution and web optimization made my eyes cross, and left me questioning whether I had left a bunch of IQ points back at an open house somewhere.  I read dozens of blogs about different aspects of web photos, but I was still left confused.  So I kept on researching and reading.

Well, I finally found one web page that made the the final concept click for me, and everything else sort of fell into place.  It is specific to Photoshop, but he does a great job explaining the concept of resampling, which was the final thing that was really throwing me for a loop.  I've linked it here for those of you who have access to Photoshop. 

Suddenly, I have seen the light!  I'm going to try to use the use this blog entry to shine that light for all the rest of you out there in the Rain.  This is not about Photoshop, these concepts apply to all photo editing for the web.

We'll start right at the beginning.

What is a MegaPixel?

When your pictures come out of your camera and are saved on your computer, they will have a certain number of "pixels" of information.  Each pixel is a piece of data that represents a little square dot of a certain color.  Let's say you have a 5 megapixel digital camera, and you take a picture.  That picture will be 2592 pixels wide by 1944 pixels high.  Multiply the pixel numbers together and you will see that it contains 5,038,848 pixels, or 5 "mega" pixels.

By the way, in case you are confused, this is not the same as megabytes of storage on your computer.  Yes, a photo with more megapixels occupies more disk space, but 5 megapixels has no direct relationship to 5 megabytes.

This is NEVER Going to Fit on My Screen!

A typical computer monitor may show only 1024 pixels across x 768 down.  That's  786,432 pixels, a far cry from 5 million.  Clearly, we have to remove a lot of pixels from our photograph before it will even fit on the screen, let alone be a reasonable display size.

To find out how many pixels your monitor is displaying, go to Control Panel, Display, Settings.  You'll see your pixel display numbers.   Then get out a ruler and measure across the screen.  If your monitor displays 1024 x 768 pixels and measures 14.2" across, it displays 72 (1024 /14) pixels per inch (PPI).  That's a pretty typical number.  Some monitors may have a bit more, up to about 96 PPI. 

Why is this important?  Because you need to decide how many inches of screen space you want your photo to occupy, and then make sure the photo has the correct number of pixels to fill up that space.

Remember, the number of pixels in your images is the ONLY important size measurement when you are putting photos on the web.  Changing the "resolution" to 300 PPI or 10 PPI or the "image size" to 4" x 3" without changing the number of pixels in the image will not help you.  If your photo editing software won't let you see numbers of pixels or won't tell you what resampling method is being used, you may want to get new software.

Some websites will resize your images automatically or behind the scenes (such as your local MLS).  It's best to find out from them what they want.  The information I'm providing here pertains to putting images directly onto your own web pages. 

Why Shouldn't I Just Take a Photo With Fewer Pixels?

Thinking about getting rid of all these pixels may have you considering setting your camera to take a lower-quality original photo with fewer pixels.  Please don't do this.  It is much better to start out with the maximum quality photo your camera will produce, so that you will have originals that can be edited for print purposes if you need them.  Plus, the better the original quality, the better the "resampling" you're about to learn will go.

Anyone Want to Buy Some Pixels?

Let's say you want your 5 megapixel picture to be 4" wide x 3" high on a 72 pixel per inch screen.  To make it appear this size, you must have 288 (72*4) pixels along the horizontal axis, and 216 (72 * 3) along the vertical axis.  That's a total of only 62,208 pixels. 

So, we have almost 4.75 million pixels to get rid of from the original photo. 

Note, a 288 x 216 pixel picture will appear as 4" x 3" on a 72 PPI screen and 3" x 2.25" on a 96 PPI screen.  They're 3.375 inches wide on my 85.33 PPI screen.  That's just fine.  Don't obsess too much over the difference.

Use the Right Format For Editing

If your original photo is a JPG type, open it and immediately do a "Save As" to a TIF format (or PSD if you have Photoshop). Unlike JPG, these formats do not  compress and lose pixels each time they are edited, saved and closed.  They do create much larger files though, so you will want to do your final save, after all editing sessions, as a JPG.  For why this is important, see below.

If you have a really cool camera, you should be able to set it to save the original images as TIF or even RAW, so you don't lose anything when the camera first saves the image.  My Powershot A95 won't do that, though.

Save your originals somewhere that you can easily find and identify them.  They are like negatives and should never be changed.  You will need them for other things, like editing for print images, or returning to if you really mess up editing your image.

Easy Stuff First:  Get Rid of Some Pixels By Cropping

Using the new file you made, crop out the irrelevant edges of the picture.  This is a great way to get rid of pixels without decreasing the quality of the main part of the photo.  It also makes your pictures look better by getting rid of distracting details.  Most photo editing software has a simple crop tool where you drag a rectangle outline over the parts you want.

Edit before Resampling

Now is the time to do any other editing, such as brightening, darkening, removing spots, etc.  Your editing software will have various tools to play with.  Try them all, but remember, don't touch your original.  That way you can always go back to it and start over.

Please do this editing before you go on to the next step, resampling.  You want your editing to apply to the original pixels that came out of the camera, not to the new, less accurate pixels that your software is going to have to create in the next step.

Save your edited image (still in a TIF, PSD or other uncompressed format).

Resampling for Best Quality

This is the first part where a loss of image quality comes in.  Your editing program is now going to use a bunch of complex math to merge your millions of colored dots into a much smaller number of dots.  This process is called resampling. 

Resampling methods vary widely.  In my own experience, Microsoft Photo Editor produces poor resampling results.  Microsoft Paint produces OK results, but doesn't tell you what it's doing or let you choose a JPG compression level.  Photoshop produces good results.  Irfanview also produces good results.  This is because Photoshop and Irfanview use more sophisticated resampling methods (Bicubic and Lanczos filter, respectively) than the Photo Editor and Paint use.  I've included four different versions of the same photo below so you can see the difference.

I would love to hear any comments about other software, the quality of their resampling methods, and the specific steps for resampling in that software.  Please note, Irfanview is a free download but they do request a "donation" for commercial use.  Please ante up the $12 or so that they're requesting, this guy has done a ton of great work on the package.  It is a full-on editing software, not just a resampler.  Nice batch processing for when you want to do the same stuff to a bunch of photos at once.

Resharpening

You will have the option to "resharpen" in many photo editors.  Resharpening tries to make up for the fact that digital photos are made up of a bunch of tiny squares (pixels) instead of smooth color lines like film photos would have.  Essentially, a resharpener goes looking for places where high-contrast areas of pixels meet up, and tries to smooth the edge between the different colors.  Experiment with this.  It can definitely improve your quality after resampling.  For consistency, I did not resharpen any of the photos below.  For our purposes here, you would do the resharpening as the final step.

Terminology:  Resampling vs. Resizing

People throw around these two words all the time as if they mean the same thing.  However, they do not.  If you change the number of pixels in an image through some kind of algorithm, like Bicubic, or Lanczos filter, that's resampling.  If you change the size of the image without changing the number of pixels, that's resizing.  Think of it as making the dots bigger or smaller. This confusing use of words is one of the reasons it took so long for the light bulb to turn on in my head.  I'll talk about resizing, which is very important for printing, in another blog entry. 

Save Your Final Image

Does everything look good?  Take a look at your image at 100% magnification so it appears about the same size that it will be on people's screens when they look at your web page.  Make one final save in the uncompressed format once you're happy. 

Here's the second place that you're going to lose quality. Go to "Save As"  and choose JPG as the file type.  You'll generally get a dialog box or a button to click that will allow you to choose how much JPG compression you want.  The more compression, the worse the image quality, but the smaller your file will be and the faster it will load on the web. 

When you save this file, note somehow in the name or in your folder system that this is a file for web use.  It will definitely not be a good file for printing.  You'll need to edit another file from your original for that. 

So What Photo Editing Software Should I Use?

I have loaded 4 images here.  I used the same original, resampled to the same number of pixels, and saved at whatever JPG compression would give me closest to a file of 18K.  18K is just a reasonably small file size that I picked out of the air for comparison purposes.

Our aims here are to end up with a file that

    • Takes up a certain amount of space on the screen
    • Uses the minimum disk space and thus load time
    • Gives the most beautiful results possible within your screen space and load time constraints. 

There's a clear difference in quality between the four programs I used. 

    • Irfanview (top left), resampled to 288x216, saved as JPG at a level 8 compression out of 10, 10 being the best quality.  Not bad. Takes 18K of disk space. 
    • Microsoft Photo Editor (top right), resampled to 288x216, saved as JPG at a level 72 compression out of 100, 100 being the best quality.  Bad, look at the messy roof edges.  Still takes up 18K of disk space.
    • Photoshop (bottom left), resampled to 288x216, saved as JPG at compression level 49 out of 100, with 100 being the best quality. Not bad.  Takes up 19K of disk space (I was too lazy to do it again for that last 1K).
    • Microsoft Paint (bottom right), resampled to 11% of original size or 286x214, saved as JPG.
      • Note, if your original photo exceeds the screen size and you try to edit the pixel count directly (through the Attributes menu), it only keeps the part of the photo that originally fit on the screen, the top left corner.  Very weird. 
      • Therefore, you have to do your resampling of a big photo through the "Image/Stretch/Skew" menu, which has percentages only, thus the 11%. 
      • You can't choose which JPG compression level to use in this software.  This file takes 35K of space, twice as much as the others. I can't make the file any smaller for a photo with this number of pixels.  It's not bad, but it takes up too much disk space for what you get.

Irfanview 288x216 JPG 80

Microsoft Photo Editor 288x216 JPG 72Photoshop 288x216 jpg 49Phelps MSPaint 11% + jpg

So which one has given you the best quality at the screen size you want your photo to be, with the smallest possible file size in bytes and the lowest cost? In my sampling above, it looks like Irfanview won.  It looks about as good as Paint, but takes up only half the file space.  Photoshop looks good, but it better, I paid $700 for it.  It's a little "soft-focus" looking and could have used a resharpen.  Photo Editor is pretty horrid, jagged lines everywhere.  Paint would do in a pinch if you don't need to make every file in the minimum possible size.

What About Active Rain?

If you're blogging in Active Rain, you can resample your photos by choosing the number of pixels as you're adding them to your blog.  This is an awesome feature if you absolutely can't stand the idea of fooling around with any editing software.  However, three things keep me from resampling this way:

  1. If I start with a 5 megapixel JPG highest quality file from my camera,which has a file size of about 3.5 megabytes, I can't get it to upload.  I think the size of the file chokes the uploader, which makes sense.  There's no point in me resampling my photo partway down so it will upload and then down some more in AR.  If I'm going to resample, I may as well go all the way in one software.
  2. I don't know for sure what resampling method is being used.  Anybody who knows, please comment.
  3. The file sizes you end up with when using AR seem high.  I experimented with this as follows:
    • Took my original 2592x1944 TIF file, saved it immediately as a JPG, no resampling at all.  I used a JPG quality of 1 out of 10 (very low quality). 
    • This still left a big file of 256K, but at least it uploaded.  Then I brought it into this blog, gave it a 288x216 pixel size, and posted it.  It didn't look too bad, really. Similar to the Paint file above. 
    • I did a "Save Picture As" by right-clicking on it, and saved it back to my hard drive to find out how big it actually was.  It took up 100K of space!  This is not good for your load speed if you're going to have a lot of images.

So, I prefer to do my own resampling so that the photos are the exact file size and pixel dimensions I want.  I just upload them after I do my edit and resample process and load them right into the blog without changing  anything.

How Much JPG Compression Should I Use?

Well, it depends (you hate hearing that, don't you?).  One photo is probably only a small part of your web page.  You'll have to test it by the individual photo and page.  This page has 89K of graphics, the total of the 4 photos above.  It loads very fast for me.  But I don't have anything else in here.  No little dancing Flash player stuff, no other graphics, no music, no background pattern, etc.

You want the whole page to load quickly.  Otherwise, people will get irritated, and they will leave your website and go buy a house from someone else.  You're going to have to experiment on this one and relate it to all the other things on your web page.  Here are a couple of places to start on considering how to make your website efficient to load and pleasant to view: 

Entheos:  Fast Loading Websites  This site has ideas for streamlining your pages.

Net Mechanic  This site will evaluate your pages for loading efficiency.

Browser News tells us that you will start losing people after about six seconds of load time, and then they start to run away in droves if your page takes more than 10 seconds to load.  Basically, the faster, the better. 

How Does JPG Work?

JPG is the file extension related to the JPEG (Joint Photographic Experts Group) data compression method.  Data is irretrievably lost every time you open, edit and resave a JPG (it's called a "lossy" format).  So, you want to bring your photo to the exact number of pixels you need by taking it through a high-quality crop, edit and resample process in a TIF or other "non-lossy" format.  Then and only then should you take those pixels and run them through a JPG compression.

The algorithm that does this is something that will make my eyes cross again, but essentially JPG does two things: 

  1. It looks at groups of pixels 8 wide by 8 high, and replaces closely related colors within the group with one color, saving space by lowering the total number of colors in the picture.
  2. Instead of storing information about each pixel, it stores data about how many of each color pixel is needed.  In other words, it takes a lot less space to store the idea:  "Pixel 15 and the next 50 pixels to the right are pink" rather than "Pixel 15 is pink, pixel 16 is pink, pixel 17 is pink, pixel 18 is pink, pixel 19 is pink", etc, etc.

That's why it's better not to take your original photo and slap it down into JPG at a very compressed setting.  The thing JPG does with the 8x8 groups of pixels gives bad results compared to sophisticated forms of resampling, leading to nasty jagged edges and poor color quality. 

It's also the reason why you don't want to make multiple editing changes and keep resaving each session as a JPG.  Each time you do it, JPG will run these procedures and the pixels and colors you lose will never be returned.  The photo just keeps getting worse.

I hope the deities at JPEG do not strike me down for this over-simplified version of their very cool math that lets us all make photos into reasonable file sizes for the web.

Also, just to make your head hurt more, different programs do slightly different types of JPG encoding, again with different quality results.  That's the other reason, besides resampling method, that the four programs above give different image results.

Considering Different Web Browsers

Those of you who are website sophisticates know that different web browsers render websites differently, that you can write code to dynamically fit websites to the user's chosen screen and browser, that Mac screens show photos with slightly different coloration than PC screens, etc.  People build careers and companies on their ability to build websites for others that take into account of all these ever-changing differences.

As a real estate professional, I am not even going to try to go there.  I can only recommend that you either experiment with your site using different computers, browsers and connection speeds, get a pro to write your site, or make your site look the best you can on your own for the equipment and browser that you think most of your customers will use.  If you follow the concepts above, you are not going to go wrong with the photo part.

So, Do You Get It?

I hope so.  I've been working on this blog in spare moments for almost two weeks now.  I wanted to try to put the answers to all the nagging questions that used to bother me in one place. 

Besides, think of all the space in my brain I just freed up.  I could probably store a 5 megapixel photo there.  Resampled and compressed, of course.  Happy photo loading, everyone!

Comments (13)

Gene Allen
Fathom Realty - Cary, NC
Realty Consultant for Cary Real Estate
Nice blog but I think you probably had overkill for this forum and got some information not quite right.  There are some programs out there that allow you to resize your photos on the fly.  For instance, I can go write this comment, go find a picture, right click and resized to whatever pixel size I want.  Pixel size will determine how big the picture is on the screen.  When I find the name of the program I will give it to you.  This is a 240 by 180 I did while I was inserting into the comment.
Nov 13, 2007 11:55 PM
Judith Reppert
United Country Countryside Realty - Mount Vernon, MO

Hi Gene,

Thanks for your response, I was beginning to think no one would ever read it!

We're in agreement...the number of pixels determines the size of the photo on your screen (within the limits of the pixels per inch that the particular screen displays). 

But the ways different programs work to resample your photo into a certain number of pixels are definitely not created equal. The JPG compression done by different programs is also not created equal.  Your photo is fine...it might look better if resampled & compressed from the original in a certain program, or worse if done in another.   That's the point I'm making that I think many people are confused about.

Overkill?  Who, me?!!!  Can you tell it really bugs me when I don't know how things work...former accountant, can't help it.  I'm just glad it's out of my brain and onto "paper" where I can refer to it.

You had mentioned that you think some things were wrong.  I will be glad to edit if you could point out whatever I may have screwed up.

Thanks again for reading!

 

Nov 14, 2007 06:23 AM
Rita Bradley
Laguna Hills, CA
Valuation Consultant in Orange County California 949-916-3263
I picked up a couple of good tips from your article.  I'd also like to hear about the program than Gene mentioned.  Thanks Judith for breaking it down for us. 
Nov 16, 2007 02:52 PM
Meg Zoller
Keller Williams - Houston, TX
Houston Fine Homes
Judith - Thank you, thank you, thank you.  This is very helpful to me.  I appreciate the time it took for you to put this together.
Nov 16, 2007 04:42 PM
Judith Reppert
United Country Countryside Realty - Mount Vernon, MO

Rita and Meg, thanks so much for your comments.  I really appreciate it as I was hoping this would help some people!

Rita, I never did hear back from Gene, still hoping he'll drop by.  If you google for "free digital photo  resampling software", you get just tons of stuff to choose from.  You might also try "tucows.com".  If you haven't been there, the site does reviews of all kinds of shareware and has downloads available.

Meg, I'm so glad this helped you, thanks for coming by!

 

Nov 17, 2007 01:06 AM
Gene Allen
Fathom Realty - Cary, NC
Realty Consultant for Cary Real Estate

I borrowed this from Mike Stankewicz blog.  This is the coolest way to resize pictures on the fly.

Simple Way to Resize Pictures to Post to the MLS or to Send to Clients

How often have you had to reduce the size of a picture in order to email it to a client or post it on the MLS?  If you have an 8 metapixel camera like me the images have a lot of detail but are usually too large to email, post to internet sites such as Localism, or to upload to the MLS.

I usually have to go to a photo processing program like Photoshop Elements a resize them one by one. 

The Image Resizer enables you to resize image files with a simple right click of the mouse. The instructions below will guide you through downloading this free software from Microsoft onto your computer and applying it to your image files. (Image Resizer is for XP users only)


1 - Click ImageResizer.exe to start the download.

2 - Install software by clicking Run

3 - Click Run again

4 - Once Image Resizer is installed, all you need do is right-click on any
image file, there will be a "Resize Pictures" entry in the context menu.

5 - Click "Resize Pictures", and you'll have various quick-resizing options.
Select one and a resized duplicate of the image file will be created.
You can also resize multiple image files at once

Once installed it is easy to right click in the image and select the size you want.  It makes a resized copy so you do not alter the origional.  Doing multiple images all at once is a great feature.

I hope the ActiveRain community finds this free Microsoft add-on for Windows XP useful.

Here are other articles and tutorials that may be of interest to you:

Nov 17, 2007 02:49 AM
Denise Allen
Resh Realty Group - Chesapeake, VA
Realtor@ Chesapeake, Hampton Roads

THIS IS NEVER GOING TO FIT ON MY SCREEN

Never change your picture size if you are doing it as a jpeg.  Once you do you can't go back.  Pictures are not meant to open on your computer without being in some type of program, same if you are sending pictures to someone elses computer.  If you want to display the picture, here you will need to change the size but you will need to keep the original in case you want to print it out or send it somewhere else. 

JPEG is a format that is widely used but it causes information in your picture to be lost each time you save it and play with it.  How much?  Not enough to worry about most of the time.

TIFF is a lossless format and you can reduce the picture size and go back to a larger size later if you want.  The problem is a lot of programs and computers don't readily recognize the format so you have to convert the pictures back to JPEG to send to someone.

Nov 19, 2007 01:15 AM
Judith Reppert
United Country Countryside Realty - Mount Vernon, MO

Hi Gene, thanks for coming back.  I haven't tried the Image Resizer, that may be another good free alternative.  I thought it was very interesting how one Microsoft product, Paint, did an OK job with the picture I used, and the other, Microsoft Photo Editor, did poorly.  I'll check out the Image Resizer and see how it does.  If it offers good quality for the file size, I think more people might be inclined to this rather than loading something unfamiliar to them like Irfanview. 

Hi Denise, thanks for your comment.  Absolutely right, use the JPG just for final compression.  Even though you may not lose much quality each time, you can never get it back, just as you say.  For a lot of purposes people may not really mind or even notice the drop in quality if they use JPG while editing for the screen, and then it comes back to bite them if they want the photo for something else like printing later.  For a long time I really didn't understand why I couldn't just downsize with JPG and then size back up and use the file for whatever I wanted.

Both of you have a good Thanksgiving!

Nov 19, 2007 04:52 AM
Pat Haddad, ABR, CRS, ePRO, GRI
Keller Williams Indianapolis Metro NE - Carmel, IN
Carmel, Fishers, Westfield IN Real Estate Expert

Guess I am a little late in posting....like about eight months (!), but I just started taking advantage of AR a few short weeks ago.  I cannot believe all of the time you took putting all of this information together Judith!  I too am trying to post only helpful or at least entertaining information.

I must admit, your post is a little over my head and more than I need at this point.  I found your post by searching for 'pictures for use on Active Rain'.  I am wondering where everyone gets the photos they use (as in no copyright infringement) and how to post pictures I have taken---if there is an easier way than to post to my website so the picture will have a URL.  As you can see, my skills are very limited and primitive. I am sure I will find the answer somewhere here on AR!!  Thanks again!!

 

 

Jul 11, 2008 05:35 AM
Gene Allen
Fathom Realty - Cary, NC
Realty Consultant for Cary Real Estate

Pat there are lots of good articles on the subject.  I would try the search field again and also go the newbies blog.

Jul 11, 2008 01:03 PM
Judith Reppert
United Country Countryside Realty - Mount Vernon, MO

Hi Pat,  yeah, it's a pretty complicated post...I tend to get that way and I was learning as I went so it really helped me to write it all down!

Here's a helpful post on copyright-free images:

http://activerain.com/blogsview/222528/A-List-of-FREE

And here's another on a more efficient way to search the blogs in AR to find what you need quickly:

http://activerain.com/blogsview/252141/Active-Rain-Blogs-Finding

Welcome to the Rain, by the way!

Thank you also for your comments Gene and Denise.  I have been kind of out of the Rain for quite a while, but tryign to get back on track now.

Jul 14, 2008 10:56 AM
Rick Turner
Key Realty - Toledo, OH
Puts People In Their Places!!

Judith,

Long post but very insightful!  I'll never edit in JPEG again!  I recently upgraded and purchased a new laptop with Photoshop Elements and have been confused on how it works... I mean I sell houses and am technically challenged as a photographer, but people look at our photos to make decisions on what to look at and potentially buy or list with us based on what the see.  This article will help me in the future.

Thanks!

 

Aug 19, 2008 03:37 AM
Judith Reppert
United Country Countryside Realty - Mount Vernon, MO

Thanks for coming by Rick, and glad I was able to help.  Have fun with your photos!

Aug 20, 2008 01:14 AM