Screen Aspect Ratios Illustrated

Why things look stretched or squished on your computer

By John Potter

If you haven't read "Why Does My Website Look Different On My Other Computer?" you probably want to start there, since this article builds upon information supplied there.

Below you will find an illustration of 4:3, 16:9 and Wide XGA screen resolutions. You will notice that a diagonal line from corner to corner will intersect the corners of all the boxes which indicate resolutions if they are consistant. This is why images wont appear stretched or squished when you remain within these families of screen resolutions.

This brings me to my next topic...Wide XGA or WXGA.

WXGA is a screen resolution that LCD manufacturers apparently came up with. It is commonly used in laptops and LCD TV sets. It is meant to display wide format graphics like movies, but it isn't the same aspect ratio. It also varies in aspect ratio without any apparent pattern as you can see in the graphic below.

If you are using WXGA screen resolutions you are not seeing anything the way it is intended to be seen...not movies, not websites, not Word documents. If you are using WXGA screen resolutions change them to one of the 4:3 aspect ratios for computer and internet stuff and one of the 16:9 for wide screen movies.

ADENDUM 10/28/09

There's a handy new tool out where you can see how your website displays at different screen resolutions at http://viewlike.us/