UNBRANDED MANCHESTER_

Image Size Training

All you need to know about re-sizing images for your website

Image Preparation

The Process

1. Image Type
2. Decide Height to Width Ratio
3. Decide Size & Layout Location
4. Final Crop

Don’t worry about the following details, the development team will look after it with CSS.

– Rounded corners
– Borders
– Drop Shadows

Image Type

Transparent Background or Jpeg

Resolution : 72 DPI

Height to Width Ratio

Look at the design, and check the shape of the image, ask yourself the following questions:

Is the image portrait, landscape or square?
If it’s portrait or landscape, is it really long and narrow, or short and fat?
If it’s square, how square is it? Very square, or a little bit square

photo editing

Size & Layout Location

These two points are related because you need to think about where the image is going in order to determine maximum and minimum image dimensions.

As a general rule of thumb, we want the image to be as small as possible for increased performance, but we never want it to appear blurry on any device, which is where the location comes into play.

Rules
Minimum width : 320px (Same as smallest iPhone)
Maximum width : 1200px (Same as maximum width of website)

Layout Locations
The image can be present in a number of different layout locations, i.e. in 1 col, 1-1 and so on. For each scenario the minimum and maximum widths may change.

Layout LocationRecommended WidthMinimum Width 
1 Col1200px

320px

1-1 Col

600 px

600 px
1-1-1

400px

400px

1-1-1-1

600px

320px

1-2 / 1-G

400px400px
1-2 / 1-G800px800px

Additional image sizing points to consider

Sometimes, you’ll find that the developers have decided to put a custom class onto an image, for example, with an icon. In such situations you need to consider the following:

Crops
By now, you’ve found your image, its height to width ratio and its ideal dimensions; so you’re ready for the final crop of the image.

Points to Consider

Image Nomenclature
Icon–
Banner–

Back to Digital Guides