Preparing Pictures for eBay

This page addresses a few issues that are often discussed on the Photos/HTML Board. I will try to cover some questions about appropriate picture size, image file size, simple editing functions, and thumbnails. I won't cover photographic techniques, complicated editing, image hosting, or HTML, because those are covered quite well on other Help sites.

Browser Settings

Even though the number of viewers using high resolution settings grows daily, most published statistics (as of mid 2007) show that over 50% of internet users have their computers set at 1024 x 768. And there are even some viewers still using settings of 800 x 600. So if you want your audience to see your page without having to scroll to see your entire picture, then it would be a good idea to size your pictures accordingly. Regardless of the setting you normally use, you might want to reset your computer to 1024 x 768 temporarily just to see how your pictures look.

Maximum Picture Dimensions

It will vary some (depending upon a viewer’s browser setup for toolbars) but on average (for an 800 x 600 resolution) a picture should be no taller than 460 pixels and no wider than 760 pixels. And do keep in mind that dimensions in inches are pretty meaningless when it comes to web pictures. It's sort of like seeing a picture on your TV - the size in inches depends on the size of your screen. And on computer screens, this difference is compounded by different screen resolution settings too. Also, references to DPI (dots per inch) pertain to printed pictures, not the pictures displayed on your screen.

Pleasing Picture Dimensions

Even though a picture may fit in your browser window, it will not necessarily be pleasing to view at that size. In fact, completely filling the window with a large picture is not pleasing at all. Pictures look much better with some empty space and/or text around them. A good example of this is your daily newspaper or favorite magazine.

Using one large picture on a page (e.g., perhaps filling ¾ of a browser window) can look quite nice as long as the other pictures are not the same size. Stringing a vertical row of large pictures down the page isn’t particularly attractive nor does it look very professional.

The picture on the left is 250 wide x 329 high. Pictures of this size work well when you want to wrap text around them, or when displaying two pictures side by side. When sizing your pictures it is best to have a plan in mind of how you want to lay out your page. Otherwise, you may wind up with a hodge-podge of pictures that won't fit together.

Height vs. Width

Most cameras produce images with a width to height ratio of 4 to 3 (landscape mode) and 3 to 4 (portrait mode). Ebay Picture Services uses the same ratios. This is a good starting point for cropping pictures but isn’t a hard-fast rule. In fact, a very wide “panoramic view” picture (e.g., 700 pixels) could look fine if it were only 200 pixels high.

Attempting to make all pictures the same dimensions can be helpful when creating a click-to-enlarge gallery but is not necessarily desirable when arranging several medium to large pictures on a page. In fact, varying the size and dimensions of pictures can sometimes produce a more interesting page. Below is an example of a picture that is 640 wide x 192 high.



It fits very well on this page, but if it were 640 wide by 400 pixels high I would be backing away from my computer.

Image File Size

The size of image files (in bytes) is determined by the height and width of the picture, the subject of the picture (color variation, etc.), and the compression/quality at which the image was saved. A 200 x 150 picture saved at 95% quality can actually have a larger file size than a 500 x 350 picture saved at 80% quality. A picture of your cat standing in front of a white wall will likely have a much smaller file size than one taken of your cat standing in a field of flowers.

Why is image file size important? It is estimated that approximately 50% of internet viewers are still using dialup connections. These viewers do not want to wait 5, 10, or 15 minutes for your page to load. Your page may load immediately with your broadband connection so it would be a good idea to ask a friend on dialup to view it on their computer.

Not only do you want to limit the size of each image file, but you also want to limit the number of images on your page. One 75K image on a page may not take overly long to load, while twelve 30K pictures will.

Cropping Pictures

Most photo editing programs will allow you to crop pictures in several ways. I use irfanview for most of my editing. I can crop visually by drawing a rectangle around the area I want to keep, and then Crop Selection. Or I can Create Custom Selection with my desired width and height and a rectangle will appear over my picture. I can move the rectangle around to where I want it and then Crop Selection. The second method works best if I want several pictures with exactly the same width to height ratio.

Many of us have literally hundreds of snapshot prints of family, friends, vacations, and just memories. Or you might have pictures of yourself making items that you sell on eBay. So you want to include a few on your Me Page...but your pictures are not really "studio quality", right? Maybe there are people or things in the background that you want to omit, or you just want to bring your main subject closer. Because we don't always have the luxury of a studio setup, cropping is a great tool for photo repair.


Here is an example of a digital image (originally 480 x 640) taken in very poor light. I simply resized the first version to 200 x 266. The second version was cropped to 300 x 400 and then resized to 200 x 266. Not perfect but presentable!

One of the most often asked questions on the Photos/HTML Board is "how do I remove the background from my picture?" The short answer is "very carefully and with MUCH effort". There is no editing tool that says punch this button and I will magically erase your "background". More often than not, the background that the user wants to remove is their laundry room or open closet. In such cases, they would have to carefully erase or cut out everything behind their subject, often resulting in a tinkered-with look or cookie-cutter effect. It is much smarter to put your subject in front of a plain (un-busy) background and then crop closely if needed. This method will give you more natural shading and depth than a stark white (erased) background.

Resizing Pictures

After cropping a picture you may want to resize it to a smaller width and height. It is never a good idea to resize to a larger size because your picture will be blurry. Also, maintaining the same aspect ratio (width to height ratio) is necessary or your picture will be distorted. Most editing programs will have the option to set either the resized height OR width, and then the program will automatically determine the other dimension for you.

Please be aware that some photo editing programs will display your pictures in a size that fits your window…which may not be the actual size. There should be something that tells you if your picture is being displayed at 100% of its actual size. It may be useful to view large pictures at a lower percentage when cropping, as long as you are aware that your cropped picture will still need to be resized before it is saved.

Saving and Compressing Pictures

I put these two functions together because in most editing programs you will set the compression/quality rate when you SAVE AS your image. Note that I said SAVE AS, not just SAVE.

When you SAVE AS (in most programs) you will be given the option to name your editing image file, select the folder you want to put it in, and set either the compression or quality rate (usually a percentage displayed on a little slide bar).

You may want to set up separate folders for pictures, possibly organized by subject, edited vs. original pictures, etc. Doing this (in My Computer) before you start editing a group of pictures will make it easier when you get to the saving stage of editing. It’s always a good idea to save edited pictures as new files, rather than updating your originals with the edited version…just in case you want to go back to the original. I have personally used one original picture for several different “views” of an object, simply by zooming in on certain areas and cropping closely for close-up views.

Compressing is not an exact science! You are usually aiming for pictures between 25K and 50K. Not always possible, but a good goal. I usually start saving an image at 85% quality (or about 15% compression in some editing programs). The process described here is only for JPEG (.jpg) files because GIF files do not have variable compression. I'm not going to discuss GIF files here because your photographs are most likely to be in JPEG format.

After I have saved my file (and while my irfanview window is still open) I go to My Computer and find the saved file. I then OPEN WITH my Internet Explorer browser.

My browser is set to resize pictures to fit the window, which can be misleading when I want to view the actual size. I run my mouse over the lower right corner of the picture to see if the little resize icon (shown at left) appears. If it does, I click on it and the picture displays at its true dimensions. Then I right-click on the picture, click on Properties, and the pop-up will tell me the file size in bytes. If I like the way my picture looks, and the file size is acceptable, I’m done! If I am not pleased with the result, I can go back to my irfanview window and SAVE AS again with a higher or lower quality percentage setting.

We see a lot of posts on the Photos/HTML Board where people are afraid that compressing their pictures will reduce the viewable quality. So they are putting pictures in their auctions that are 150K, 350K, and even 1MB! Image files of this size may be great for producing prints, but are totally unnecessary on a web page. The best proof of this is to try it on your own pictures. Compare different versions of your picture (saved at different quality rates) to see if you actually see a noticable difference in the quality on your monitor. I think you will be very surprised.

Click-to-Enlarge Pictures and Galleries

An alternative to putting a lot of full-size pictures on a page is to use click-to-enlarge thumbnails (or just smaller pictures) that link to the large ones. Using small pictures will not only reduce download time for your dialup viewers, but it can also make your page more attractive.

I have several different galleries on my Me Page if you would like to take a look. A gallery can be as simple as a group of thumbnails with links to see full-size pictures in a separate window. Or they can be elaborate collages of thumbnails that enlarge right there on your page. You can do your own HTML coding to create a gallery, or use one of the great tools available at the links below…

Whether you use one of the tools or not, you will need both a large and small version of each of your pictures. Just downsizing the dimensions of a large picture with HTML tags does nothing to reduce the download time. Viewers will download the full size picture and then their browser will resize it to look like a thumbnail. This actually may increase download time. So always create a small version of your picture to display on your page. Note: some photo hosts automatically create thumbnails for you when you upload your full-size images. Using those thumbnails might be another option.

Creating small versions of your pictures is quite simple. After you have sized and saved your larger picture, and before you close your editing program window, just resize your picture again and save it as a different file. But if you use the downloaded version of Clic*Pic to create your gallery code, it will create your thumbnail pictures for you. Either way, after doing a few you may just get hooked on galleries!

March 27, 2005
August 17, 2007