Recommended Sizes and Resolution

Full size images for most website blogs posts should be no larger than about 800 pixels in the largest direction (either 800 pixels wide for landscape OR 800 pixels tall for portrait) and 72 dpi (dots per inch). Larger images slow down page load times. Image resolution for all web application never needs to be larger than 72dpi. Resolution for print in much larger- 300dpi. If you’ve ever printed an image from the internet and noticed how blurry it is, that is the difference in resolution between web and print.

Color Modes

There are two main color modes for images- RGB- Red, Green and Blue (video colors) and CMYK– Cyan, Magenta, Yellow and Black (ink colors). Images for the web MUST be in RGB color mode, otherwise they will not display. Images for Print should be in CMYK mode. RGB color mode has a wider gamut with a larger color range. This is why screen colors are so much more vivid than printed color. CMYK has a lower color gamut (less color range) so if you use an RBG color file for printing, you WILL see a duller color result, especially in certain colors such as reds and greens.

Wikipedia has a great article on Color Theory that explains this in great depth for all you color geeks.

Steps for correctly sizing images for your website:

These directions are for resizing an image in Photoshop, however the technical aspects for image editing are the same in most image editing software. See Image editing apps for alternatives to Photoshop.

Open image in Photoshop. Choose Image>Image Size. Uncheck the “Resample Image” checkbox.

imageeditingPS1 imageeditngPS2

Change the Resolution from 300 pixels/inch to 72 pixels/inch (make sure to choose pixels and not inches).

If your image is less than desired, it can be sized now, before you click OK.

Remember that you should only resize larger if you have the resolution to do so, and only enlarge by less that 4X (300 divided by 72 equals 4.166).

Click the Resample Image link back on to activate the Pixel Dimensions and enter your preferred size in the either width or height. Let the the other dimension automatically fill. ALWAYS have the Constrain Proportions check box checked on.

Click OK.

Save as .jpg or .png file.

File Formats

The best file formats for web images are JPG, PNG. and GIF. JPG files are compressible for smaller file sizes. If your images are properly sized as directed above, no compression is needed and will result in better image quality. PNG files are great for images that need a transparent background. GIF files are really only best used for flat graphics with limited color usage.

Best file naming practices

Save files with no spaces or punctuation. Use Underscores _ to simulate spaces, or I like to use CamelCaps for file readability.  File suffixes should always end in your file name– .jpg,  .png. These tell applications what kind of file the are using.