Browser sizes and images

If you like to display a large image or a photo slideshow on a web page you might consider two things:

Download speed and computer screen size.

Large photo means always downloads slower. If it is only one photo, you might be ok to display large size image. If this is a slideshow of several images, it will take time longer to show these images on the web. If you want image to cover entire screen then you have to decide what size of image and what is the resolution you can use.

As you can see the data below most people use Screen Resolution 1024 x 768. If you want your photo shows nicely in that screen I would
recommend that use an image/photo width of at least 770 by height 960 pixels. And keep the photo resolution not higher than 72 for faster download speed. However you need to pay attention the orientation of the photo. If the image is in portrait mode, it will still look OK in the iPad, (since the user can use iPad Portrait and landscape mode) but not in less than 1600 x 1200px Screen Resolution devices (PC or Mac monitors).

screen sizes

Comparing Web Safe Areas:

Screen Resolution 800 x 600

Mac OS X: Safari 685 x 351
Mac OS X: Firefox 685 x 339
Windows Vista: IE 625 x 453
Windows Vista: Firefox 625 x 440
Windows XP: IE 774 x 447
Windows XP: Firefox 774 x 454
Safe area for all browsers: 625 x 339

Screen Resolution 1024 x 768

Mac OS X: Safari 909 x 519
Mac OS X: Firefox 909 x 507
Windows Vista: IE 849 x 621
Windows Vista: Firefox 849 x 608
Windows XP: IE 998 x 615
Windows XP: Firefox 998 x 622
Safe area for all browsers: 849 x 507

Screen Resolution 1600 x 1200

Mac OS X: Safari 1485 x 951
Mac OS X: Firefox 1485 x 939
Windows Vista: IE 1425 x 1053
Windows Vista: Firefox 1425 x 1040
Windows XP: IE 1574 x 1047
Windows XP: Firefox 1574 x 1054
Safe area for all browsers: 1425 x 939


Please share it
Email this to someoneShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedInShare on Facebook