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
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 Location | Recommended Width | Minimum Width |
| 1 Col | 1200px | 320px |
| 1-1 Col | 600 px | 600 px |
| 1-1-1 | 400px | 400px |
| 1-1-1-1 | 600px | 320px |
1-2 / 1-G | 400px | 400px |
| 1-2 / 1-G | 800px | 800px |
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–
