Many people wonder how to make images on their website load quickly or display "properly"... and often think that these two options are mutually exclusive.
e.g. they can either be fast or good looking but not both. (This is an incorrect assumption.)

This usually results in people selecting the largest resolution image that they can, in the highest quality, because naturally the photo/picture needs to look right.

However, just by following the guidelines below you can actually have the best of both worlds... a quick loading image that displays "properly".

As a quick reference, for producing the best image to upload to your website:

1. Always keep a separate copy of your original images & photos, so that you've always got an unmodified copy of the image handy.
   
   After all... if you want to send these images to a professional printer (e.g. for brochures, etc.) at a later date, then you'll need these original images.
   ;)
   
   
2. Resize any images/photos to the exact size that you wish to display them as.
   
   
3. Set the image's print resolution to 72 dpi.
   Any higher won't actually increase the quality of the image when it's displayed on your webpage.
   
   Higher print resolutions are great when sending the image to a professional printer to be printed, but not when just displaying it on a website.
   
   
4. Re-save all photos as .jpg files, with a quality of 86%.
   This is generally higher then the human eye can visually interpret, when the image is displayed via the web browser.
   
   Using a higher "quality" percentage (on a website) is unnecessary and will just increase the image's filesize... with no visual improvement in quality.