A common daily question we receive is about full screen image sizes. The following article aims to cover some details on “full screen” image sizing, why full screen is not correct for the web, and how using standard ratio images won’t work for Full Size slideshows. Before we get started, this is general guidelines, we can’t cover every option on the web, as devices are not consistent, therefore we are aiming to provide you with options to cover as many users as possible. This way you can display your images as best as possible on the web. This post may be slightly technical, for a quick overview, and details on image sizes, skip to the conclusion.

DISCLAIMER: Images will be hurt in this tutorial, if cropping makes you uneasy, look away now.

Full Screen Vs Full Browser

There is a common problem when users are uploading images for full screen slideshows on the web. That is, they are using Full Screen size images, that is a ratio of the screen, for example 1920 x 1080px. This format is incorrect, why? The reason that this will not work, and will leave your images with a crop is due to the browser window being smaller than the full size of your computer screen. Browser windows will have an area for tabs, the website address, and often favorites. This usually takes up between 60-120px depending on the browser your using. (Chrome is about 120px with favorites enabled.) What other factors play a part in the sizing. The menu bar and or icons bar (depending on what operating system you use, Windows or iOS) this again will probably take up between 30-70px, the average being 50px. With that taken into account, your image sizing will need to be adjusted, which we will cover later.

There are other reasons why images may have a slight crop and will look different on other devices. Whilst we aim to resize the images responsively, there are so many screen formats, that your images are never going to be perfect on every device. Hypothetically speaking lets say you upload your image in the ratio 16:9 (as mentioned the ratio in reality will need to be adjusted due to the difference between screen and browser sizes), on a screen that offers a 16:9 ratio, the images will look exactly as you’ve uploaded, however when you load on a screen with a ratio of 9:5 or 8:5 for example, the image may have some small but subtle cropping. With that in mind, the end user will not know the difference, so that shouldn’t be a big concern, rather something to note about responsive design and the web.

Most Common Screen Sizes

60% of computers are 16:9 ratio. Others fall in less conventional ratios for the web, such as 16:10, 4:3. The most common screen resolution is 1366 x 768 (~16:9 not truely 16:9 but very close), with screen sizes 14/15.6″ for laptops and 18″ for desktop computers. Again being in the creative industry many of us will be using Macs (with ratios of 8:5, scale that up and its 16:10), however lets not discount the fact that the end user is most likely to use a screen somewhere in the region of 16:9. There is an increasing number of users moving to 1920 x 1080 px and this is a more realistic sizing option for us to consider when adding images to the web, as we want to get the largest catchment area for your user base.

Most Common browser

The most common browser across all devices (including mobile) is Google Chrome, long gone are the days of IE, and I can’t say that i’m sad about it. Desktop is dominated by chrome, andfor mobile Chrome and Safari are the most popular options. Again take this into consideration when deciding on the size that you’re going to upload on the web. Your end user is most likely to be using a chrome or safari browser, so we will make some decisions based on this.

Other Considerations

Unfortunately the web isn’t the friendliest place for your digital images. If shooting on digital, your most likely going to be using the ratio 3:2 for your images, for example 1920 x 1280px, and if using film, 4:3 with a 35mm lens for example 1920 x 1440px. When uploading to the web, there is no way to show your image in full screen this way, as the ratios just don’t work. Image preparation is going to be key. Thankfully this is only going to be a small number of images from your portfolio, as you’ll likely only have one full screen slider on your homepage with around 10 images tops.

Are you using a menu over the image? If yes, is it the bottom or top? Generally the menu over the image is going to take 100px, again depending on your logo size. If this is the case, make sure to leave 100px for the area that the menu is going to cover, it should be considered dead space, and you should not have any items you want in the image here, for example the feet of the bride and groom. Most sliders will offer a transparency, or completely transparent menu option however.

What to consider when selecting your full size images

A common issue and error users have when selecting their full size images, is selecting images where the focal point is to the left, right, bottom or top of the image. This leaves more opportunities for cropping of the main focus of your image when on the web. Image selection is just as important as sizing. Try not to choose an image with the focus in the lower or top third, as this can mean that on different devices there may be a crop. As a rule of thumb, if the focus is in the center, its going to provide the most impact and give you the most impact on all devices.

Conclusion What Image Size to Upload

We’ve tested various image sizes, based on our research, a 16:9 screen is going to be the most common therefore the screen will be 1920 x 1080px. The image should be 1920px width, as it does take the full width of the site, the height is where it gets tricky.

By my calculations, the average browser and menu bar is going to take around 100-150px so my suggestion would be an image upload of 2880 x 1500px (the theme will resize, the larger size is for retina screens).

The following example slideshow shows 3 images sizes, the first at 1920×1280, second 1920×1100 and finally 1920x980px:

Cropped Image Example

The last image has no crop and you can see that the feet are fully shown in the image. This is a good example of what you lose with the image.