Website Images and Design

1. Specs: Most screens are a maximum of 1920 pixels wide and 1080 high. Most digital cameras/phones take pictures that are 4000px wide. An image that is to used for a background or slider should be 1920 wide, but most other images you will get away with being around 1000px wide. Image size corresponds to file size. So a smaller image is always going to load faster. At the opposite end of the spectrum, if your images are copied from Facebook or an old website they are often quite small. Making an image larger very very seldom gives good results. I would much prefer to resize down. Most modern designs use large images as well.

2. File size: Images are the key factor in slow loading websites. I try to keep images under 500kb for busy fullscreen backgrounds, but large images should be under 250-300kb.

3. File format: JPEG is the preferred format for photographs on the internet. This results in the smallest file size and the highest quality. PNG is good for graphics and images requiring transparency, but file sizes won’t go as low as JPEG.

4. Image orientation: Where possible images on the web should follow a uniform orientation. There is nothing harder than trying to lay out a series of images and finding that one of your images is portrait and the rest are landscape. This is most important for dynamically created layouts like product images or galleries or blog listing pages. If you are manually laying out your images (for example inside a blog post) mix it up however you want, but try to make sure your main product image or your featured image for your blog is the same orientation as the rest of the main images. This mostly applies to grid based layouts, if you are using a pinterest/masonry style layout you will have a little more freedom.

5. White space: If you are intending to use an image as a background, talk to your designer/developer/photographer about where you want things like logos or content. Content will get lost on a busy background and you don’t want to cover the important subject/s of your image. It always helps to have more background in an image than you think you will need. I can crop an image with too much background down, but if the background isn’t plain it going to be a lot harder to make an image bigger to fit the space better.

6. Communication: If you are having new photos taken to use for your website talk to your designer/developer/photographer so they all know what is going on and can work together to get the best result for you. There is nothing worse than the client showing up having spent $500+ on photos that aren’t going to work well for the project.

7. Image cropping: Please don’t crop an image out of proportion. If I have a gallery of images to work with and they are all in a 6:4 ratio and then I come across one that has been cropped more on one side than the other changing the images proportions I am going to have to do complicated stuff to make the cropped image fit the layout. This is going to cost me time, which is going to cost you money.

8. Remember:  Bad images ruin a great design. A great design with a pixelated or noisy iphone photo that is stretched out of proportion will never look good. If you are paying for a great design, make sure your images match the quality of your design. If you don’t have great images, get some taken, or buy stock images.