OREGON STATE UNIVERSITY

How can I optimize my images for web use?

The web's requirements for images are vastly different than those for print media.  When using images on the web, there are quite a few things to consider.  Most importantly, the properties to consider are: resolution, dimensions, and format.

Resolution

Today's digital cameras, even the less expensive ones, are capable of creating exceptionally high resolution images.  This is great for print media, but it can actually be detrimental for web publications.

For clear printing, print media typically requires a resolution of 300 dots per inch (dpi).  This is what provides nice, clear, sharp images on a photo or in a printed page layout.

On the web, though, images must be rendered.  What this means is that the server holding the image has to pipe out the image bit by bit to your client machine and your browser has to put it all together.  The higher the resolution is - the more pieces of the picture that have to be put together - the more time it takes for the page to load. 

You may have encountered this at some point when you've visited a website and watched the pictures slowly appear, line by line, on the screen.  This is typically because the resolution is too high and all the pieces of the picture are being assembled, bit by bit.

For optimal performance, web images should be between 72 dpi and 150 dpi - the lower the better.

Dimensions

The dimensions of an image are not the same as the resolution - but the dimensions can affect the resolution.  An image with the dimensions of 150 pixels wide by 150 pixels tall with a 72 dpi resolution will look quite clear on the web.  This same image stretched to the dimensions of 300 pixels wide by 300 pixels tall with the same 72 dpi resolution will start to degrade and look fuzzy.

Dimensions are like a container.  If you have 2 inch by 2 inch pan with a cup of sugar in it, you will probably not see the bottom of the pan.  If you then dump that sugar into 9 inch by 9 inch pan, you will start to see the bottom of the pan showing through.  It's the same amount of sugar, but now it has to cover a larger size.

File Format

The three most commonly used image file formats on the web are: jpg/jpeg, png, and gif.  Each one of these formats actually has different properties that are suitable for different image types.

There are many available options for resizing and optimizing images - more than can be covered within this document.

Instead, following are some links to a few of these different options:

Video!

Please note that videos which are provided from a source outside of OSU may not completely reflect OSU systems. Instead, use the provided video as a general guide to working with this particular subject.

  • See video
  • See video
  • See video