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.
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.
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:
- 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.
- I don't know for sure what resampling method is being used. Anybody who knows, please comment.
- 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:
- 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.
- 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!