Graphics, Pictures and Images

Graphic image files can come in many types. The file extensions typically designate the graphic type. Here are some of the more common file extensions you might encounter on the Internet:

There are others too, but these are the most common.
 
For Internet web page use you will want to save your files as one of the .gif, .jpg, or .png file types. Generally, only .gif, .jpg or .png file types are suppored for image files being displayed on the Internet on normal web pages. You can, of course, store any file type on the Interent for download if it is not to be displayed in a browser.
 
The .gif file format can provide animation and/or transparancy, but is limited to 256 colors. This is not as bad as you might think for several reasons. Many browsers can only display a limited number of colours, no matter what your system is capable of, and the human eye can only distinquish about 248 unique colors at any one time anyway. In some cases, even when you don't want animation or transparency, .gif format files are the best choice as they can often be smaller file sizes for the same image display size. Files of type .png also support transparancy. Files of type .jpg provide the best compression making better for fast loading requirements.
 
The three images below are shown against a grid background so you can see the variations between no transparansy, transparance, and transparancy with animation.
 

Examples of no transparancy, transparancy and animation.

 
All graphics are rectangles. Here are the same three graphics but with red borders drawn around them to show their edges. The background grid has been replaced with a mottled parchment-like image so the outlines will show better. The images remain exactly the same.
 

No transparancy, transparancy and animation with borders.

 
Choosing whether or not to use solid or transparent backgrounds on your images, whether to have static or animated images, whether to use borders or no borders and which background to use can make considerable differences in how your web page, blog post, or sales listing will look. Only one color, usually the background, can be set as transparent in a .gif or .png format file. I like to see a single line border neatly outlining non-transparent graphics. It's just my personal taste, but I think it defines the graphic and makes it stand out better. Wider borders to represent old fashioned photos, corneer curls, and shadows, are also fine but should be used tastefully.
 
With transparent backgrounds you probably don't want the outline, shadow, etc., as it generally defeats the purpose of making the background transparent in the first place. A border around the image below would be counter productive.
 

 
The .jpg format does not support animation or transparency, but can have 16 million colors and provide significant reduction in size via file compression. Some visual clarity may be lost with compression, but the reduction in actual file size may more than compensate for this, especially if you want larger display sizes or more pictures in your auction.
 
Remember, you don't actually view a website by going to it. The text and images that make up the website are downloaded to your computer by your browser and then configured into the page view you see. Each image has to be downloaded and the time it takes, the time to display the page, is a factor of the total image size and all other content being sent.
 
Consider these two images:

 
The two pictures above each display as the same 'size'. Nothing has been done to fiddle with their width and height attributes. Both have real dimensons of 250 x 328 pixels, and yet the actual file sizes are different. The one on the left is 67 KB and the one on the right is 11 KB. That is a significant difference which can dramatically affect transfer time -- the one on the left takes six times longer to load! -- and therefor the speed with which your web page, blog post, or sales listing builds. It will use less space on your file hosting site, too. On some sites this is a consideration and will make a difference in how many files you can host simultaneously.
 
Both files are .jpg format but the size difference is achieved by saving the image on the left with 50% compression. There is so little loss in clarity that it is almost not noticable, and yet there is the noted significant reduction in actual file size. This produces faster transfer speeds and takes less storage space on your host server.
 
In a pinch, image display size can be
 
A good file size for graphics on web pages, blog posts, or sales listings, is not more than 65kb and the smaller the better.
 
File display size can also matter. Most people start with files that are much too large for the display and often resort to resizing on the fly with HTML width and height attributes. This is okay in a pinch, but not good in general practice as it does nothing to resize the image that is transferred to the viewers computer. HTML resizing is done after the file is transferred. You should always work with images actually resized to (or close to) their final display size. WordPress actually helps with this.
 
You can resize files by reducing pixel dimension (about 350 and 600 pixels wide or so depending on need) by cropping and resizing in your graphics program, sometimes by decreasing color count, and often by increasing compression as shown above. Lowering "dots per inch" values does nothing in this regard unless your graphics program interprets this (incorrectly) as compression. Experiment with all of these features in your graphics program and see which work for you. With some colors, especially reds, there is a bleed effect if you use too much (or sometimes even any) compression. You may need to save as .png files to prevent this.
 
You will get best results if you photograph or scan with settings that produce images close to the final size you want. Photographing images at 800x600 or even 1024x768 when the final image is going to be 600x450 is far better than shooting at 2048x1536. Larger resolutions do capture more detail but this is lost, and then some, by resizing. Start with the right size, or close to it, and your results will be better!
 
Crop as little as possible. Composing in the viewfinder is better. Always crop first and then resize for best results.

1. Start with original. 2. Crop first. 3. Resize.

1. When sizing graphics, try to work with originals, before compression and with the highest color count possible.
    
2. Always crop first, then resize the image. To make a small square out of a rectangle, crop the square first then resize smaller.
    
3. Keep your aspect ratio correct to prevent graphics from becoming skewed when re-sized.
    
4. On web pages, don't use the WIDTH or HEIGHT attributes to resize graphics. Best results are obtained when they are used for the purpose of providing the actual pixel size of the image to the browser.
    

Most good graphics programs have settings for changing things like pixel dimensions, file type and, in JPG files, the compression ratio. These will be in different places and perhaps called different things, in each different program. Get to know your program and use the features correctly. If you don't already have a good program there are excellent choices. Ask in our forum before spending too much.