JustResizeIt! Adobe Air Application

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:

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:

...and now

  • Be considerate
  • Be constructive
  • Be clean
  • Be kind

If, like me, you are inexcusably lazy you might like to grab a copy of Fast Image Resizer ( http://adionsoft.net/fastimageresize/ ), a neat little freeware app that will take the monotony out of the job of making thumbnail batches.
:-)

 

Likes

Yup, that's my tumblog.

You can make your own at Tumblr.

Whatcha been doin', mrbiotech?

RSS / Atom