When selecting images for use in a new website, here are general guidelines to use for image sizes:

Image Guidelines

• What you upload depends on where you want to use it on your website.
  
• The proportions of the image are more important than the size (so that it fits where you want to use it and is consistent with other images in the same area on your website).
• Max image size is important so it doesn’t slow down page load, so the upload shouldn’t be much bigger than the largest display size (unless you are shooting for Retina displays then you need to upload twice the final output size…see below more more on targeting Retina displays).

Min width x height / Max width x height / File Type

Logo: 200×150 / 500×300 / PSD or PNG

Header: 960×150 / 1000×400 / JPG or PNG

Normal content image: 300×300 / 600×400 / JPG or PNG

Full width (in content): 900×400 / 1000×600 / JPG or PNG

Image sliders: 960×300 / 1000×500 / JPG or PNG

Icons: 150×150 / 300×300 / PNG

It makes it a lot easier if we have the actual images to work with rather than placeholders. If we don’t then there is double the work to put in images more than once, and then to perhaps have to work around size variances and layout issues at that point.

In addition, we often use provided images to help come up with a good color scheme for elements of the website, so having all of the assets including the images before we design the website helps a lot in the site building process.

It’s usually best to provide images larger than needed for things like sliders; we can crop them as needed. We can always reduce images, but cannot enlarge them without image degradation.

It’s best not to have to purchase (and upload to the media library) a 1000×1000 pixel image if we are pretty sure we are only going to use it as 400×400 (maximum) in the content area, so it is always best to purchase just above what is needed (maybe 500×500 in most cases unless it is a full width header/banner) and then crop any images in advance of uploading if the end size is known. That saves cost when purchasing any stock images, and reduces the load time by not uploading an image larger than will actually be displayed.

Image Format & Resolution

If you’re using Photoshop do ‘Save for web‘ (PNG24 for most, or JPG MEDIUM), and that should cover it. Otherwise a resolution of 96dpi should be fine. The actual pixel dimensions are most critical (widthxlength).

For any images needing a transparent background, such as a logo, use PNG24.

More on image sizes…

Just within this last year (2012), if you want images suitable for high resolution Retina displays you need to upload images at 2x the actual display size so they don’t look fuzzy. But that can also create a lag on load time, especially on mobile. And is currently very hard and clunky to manage the display across browsers and devices.

As with many things, there are pros and cons to every approach, and techniques for handling this are still rapidly evolving and not yet mature enough to implement in our opinion.

It is not a current requirement within scope of most projects, just a consideration to think about. We don’t even have a retina display to test on. So just stick with 100% actual size images for now (for the first phase of your project).

We can use a Retina Display plugin to display any images that are capable of displaying smaller than the original upload (even if we don’t intentionally load them all at 2x size it will theoretically catch the ones that are displayed 2x smaller than the upload), and we can use a mobile plugin for eliminating some of those larger images from displaying on mobile….but non of that is perfect since these plugins handle all images and not image specific (i.e. header or icons vs. content image), and may not work on all browsers & devices. In some future phase you may want to address this after the techniques mature (very tedious and out of scope of current requirements for most projects).

This is very complicated and cutting edge, and in transition, so the bottom line is go with the image sizes suggested earlier.