Snoack Studios

»  The Blog

How to Handle Images Online

web design by Shannon Noack on June 9, 2010 | 2 Comments

webimagesThere are many differences in the way you should handle images based on their desired output, will they be used in print or online? Different file types, sizes, and resolutions are best used online in order to maximize the quality but minimize the size. Do you know all the tricks in getting your images set up correctly?

Online vs. Print

In print, you want to make sure your images are sharp and ready to be viewed up close (unless we’re talking billboards, large displays, etc.). This usually means a high resolution of 300 dpi (dots per inch) with no pixellation and close attention to detail. Online images need to be treated differently. Online you have to worry about space, hosts usually don’t allow you to store an unlimited amount of stuff so you you need to try to get the most bang for your buck by downsizing images without losing too much quality.

Use the Best File Format

Several file formats work online but some are better than others for different things. The best file formats to use are jpg and png. Jpgs are best used with photos or images with a lot of colors. Pngs work best for images that have transparent areas and/or few colors. It’s best to play around with each image┬áto find the file format that compresses the best but still maintains the quality you’re looking for. Each image will be different.

Compress and Correctly Size Your Image

As mentioned above, compressed images are key online. Don’t upload an image straight from your digital camera, I can almost guarantee it’s too big! Photoshop (or free alternative Gimp) allow for easy image compression. In Photoshop, choose Save for web, choose the file format you want, and downsize the quality until it’s as low as it can be to maintain a nice look with no pixellation. With Gimp, save as and choose the file format you want. You may need to play around a bit to find the best file format.

Also make sure your images are the correct size for their designated area. Many people assume images will be resized online accordingly but usually you need to crop and size your image to the exact size yourself. This will ensure your image display exactly as you planned.

Get the Right Screen Resolution

Screen resolution is 72 ppi (pixels per inch), so 72 ppi is the highest resolution you need for images. Uploading an image that is 300 ppi will not increase it’s quality, only the amount of space it takes up.

Getting the right specs for your online images will help your website look more polished and professional. Remember, your website displays who you are as a company and what you do. You don’t want your amazing content tarnished by poorly sized, pixellated photos.


  1. creative entrepreneur
    June 24, 2010 @ 12:40 am

    Nice read. Thanks.

  2. snoackstudios
    June 24, 2010 @ 10:13 am

    thanks! glad you enjoyed it.

RSS feed for comments on this post. TrackBack URI

Leave a comment