When looking at how to format pictures for your website, a general rule of thumb is to save an image at 72 dpi (dots per inch) and upload to your site. Most computer monitors render graphics at 72 dpi so this is adequate. Any larger than this makes the image size larger resulting in a slower display of the image. If users are on a fairly robust internet connection, this is irrelevant, but for a user on slow connection or even dial-up (yes there are still some users out there) this can be a disaster!
Most general users who upload graphics to their site, do so straight from their digital camera. These images are usually set somewhere around 300 dpi. This is by design as 300 dpi is ideal for printing an image on a printer. But for the web, this is a bit of overkill and can really slow the site down if you have a number of images being loaded.
I do want to note as we are potentially entering into a post-pc era (per the late Steve Jobs) that graphics and websites will need to be responsive in their design to adjust for different screen resolutions. For instance there are now some devices which CAN render 300 dpi images. I’ll discuss responsive design in a later post but did want to at least mention this if you are serving a site that needs to display high resolution images. For instance an art gallery or a photo studio might want to adjust for this.
Lastly, you may be asking HOW to compress an image for the web. I personally use a professional solution called Adobe Photoshop, but there are many free or nearly free solutions out there depending on your skill level. One solution built right into a Windows PC with Office, is the Microsoft Office Picture Manager. Once you have loaded your images into Picture Manager, you can right click on an image and choose ‘Edit Pictures…’ Under the ‘Change picture size’ heading is a tool for compressing the image. Choose to compress for ‘Web pages,’ save the image and your all set!