Help : Creating a website... : Images for your website
It’s been said (by us) that laying out a website is like designing a newspaper without being told its size or orientation.
Choosing the right image for the layout
Take, for example, this ballerina picture. She works very well as a tall, portrait orientation image. If we put her in a carousel (a typical landing page feature of most websites) she looks like this.
To fill the carousel shape, the website zooms in the image, causing the top and bottom to get cropped. The image didn’t have high resolution left to right so it looks very blocked (pixelated) when stretched.
Here’s the same image laid out in a Tile Grid. Tile Grids are another typical website element; the images tend to be roughly square. Our ballerina is still too vertical to work well in this way. So make sure that your image is the right aspect ratio (width to height ratio) for your layout;
- Images used in a Carousel should be around twice as wide as they are high (and at least 1000 pixels wide)
- Tile Grid images should be roughly square (and at least 500 pixels in width and height)
- Single Tile images should be roughly square and work in a portrait view (1.5 times higher than they are wide, and at least 500 pixels wide, ideally at least 1000)
Creating safe zones
Here’s an image that works well in most layouts. We’ve highlighted the area of interest; the rest of the image can be safely cropped dynamically by the website without losing the spirit of the picture.
- When taking images, zoom out so that at least a quarter of your image in height and width can be safely removed.
- Don’t take pictures based on rule-of-thirds; these won’t work well on a website where the image will likely get cropped. Compose your image so the main part is in the centre.
Composing ‘mood’ images
Instead of a large safe zone, try images that are already cropped, and are more about shape and colour. This image does both; the target area is central, and the image can safely be heavily cropped.
