Consistent image sizing

Checking out some of my favorite blogs and web-design sites I picked up a subtle, but attractive trend: the use of regularly shaped images. Branded07 and BrightCreative are two well-done examples. By keeping thumbnails and other images consistently sized, the well-ordered look of the site is maintained. This is particularly obvious on sites displaying multiple articles, such as Branded07’s article list where the consistent size and shape of the preview images maintains the vertical line of the site.

Keeping all the images on a site a consistent size or scale also speeds web-site template creation using CSS frameworks/templates, such as the 960 system, where the the template employs elements of pre-defined widths (for columns, etc.).

By example, Skinyourscreen.com has a sizeable amount of theme screenshots of consistent dimensions. To undertake a consistent pattern of screenshot presentation I ran the calculations to determine the dimensions for various scales of the average screen-shot. An example would be determining multiple thumbnail sizes for the average 1024×768 monitor resolution. Here, I picked maximum thumbnail widths of 800px, 480px, 400px, 320px, 300px, 256px, 160px, 150px, and 100px and calculated the corresponding height to maintain the scale:

Width	Height
1024	768
800	600
480	360
400	300
320	240
300	225
256	192
160	120
150	113
100	75

By repeating this for several popular wallpaper dimensions, the following table of conversions is obtained. To use it, look up the original image resolution on the top, and pick your preferred thumbnail WIDTH on the left: the intersection is the height:

Width and Height define the original dimensions of the image. Then look up the width at the top of the adjacent column to find the adjusted height of the scaled image.

Width	Height	800	480	400	320	300	256	160	150	100
1024	600	469	281	234	188	176	150	94	88	59
1024	768	600	360	300	240	225	192	120	113	75
1152	864	600	360	300	240	225	192	120	113	75
1280	768	480	288	240	192	180	154	96	90	60
1280	800	500	300	250	200	188	160	100	94	63
1280	854	534	320	267	214	200	171	107	100	67
1280	960	600	360	300	240	225	192	120	113	75
1400	900	514	309	257	206	193	165	103	96	64
1440	900	500	300	250	200	188	160	100	94	63
1600	1200	600	360	300	240	225	192	120	113	75
1650	1050	509	305	255	204	191	163	102	95	64
1920	1080	450	270	225	180	169	144	90	84	56

Here is the Excel file I used to calculate these, just in case someone has a custom resolution they wish to calculate for:

• Download Screen Resolution Calculator Here.

Tools for consistent image sizing

Here are two Adobe Air applications that will work under both Mac OS X and Windows systems that permit batch processing with a good degree of control:

• ImageSizer by Mark Starling and James Ford.
• JustResizeIt! by Perspectives Software Solutions GmbH