What Pixel Dimensions do Photos need to be on the Web?

The question of what pixel dimensions do photos need to be on the Web? often leads to confusion. It used to confuse me.

Pixel Dimensions are especially relevant for photographers when it comes to your gallery or slider pages. There is not a lot of help online and some of it is misleading.

Hopefully, you will come away from this article better armed to understand what pixel dimensions are required for a photo that will be viewed by many different devices – from the smallest mobile phone to the largest 4K television.

What am I using in 2020 for my Photos?

• Gallery Lightboxes – 1600 pixels longest edge.
• Front Page hero images – 1920 pixels longest edge.

When I mean size, I Do Not mean pixel dimensions.

The term “Image Size” is often used when referring to pixel dimensions.

Image Size is really reserved for the size of an image in bytes.

Unfortunately, we get lazy and instead of using the words ‘pixel dimensions’, we use the word ‘size’.

“Size” can used to describe either pixel dimensions or file size in bytes.

I just wanted to clear up what I mean by ‘size’ in this article. If I use the word ‘size’ I mean size in bytes.

If I use the word ‘dimensions’ I mean pixel dimensions.

I’m not going to be woolly though.

I will use the term “pixel dimensions”. And I will always say “file size in bytes”. Rather than just file size.

There is a direct relationship between the size in bytes and pixel dimensions.

Normally the larger an image’s pixel dimensions are, the larger the file size in bytes will be — all other things being equal.

A JPG exported at Sixty percent quality, at 1000 x 1000 px, is going to be larger in file size (bytes) than a JPG exported at Sixty percent quality, at 500 x 500 px.

File size in bytes is especially important

File size in bytes matters a lot as it affects download times but here, we are talking about pixel dimensions only. You should always be uploading images of the smallest possible file size in bytes. I covered image optimisation in a YouTube video

PPI (Pixels Per Inch) and Screens

The PPI of an image is meaningless to a screen

To cover the subject of PPI and screens. We need to disavow ourselves of the 72 PPI for screens nonsense.

You’ve exported from Lightroom or Photoshop at 72 PPI many times. Have you ever asked yourself why we use 72 PPI for images destined for the screen?

It dates to the 1980s and Apple Mac monitors having seventy-two pixels in one linear inch of screen.

Apple printers printed as 144 DPI (72 x 2) back then. This made life simple for designers as they could scale the screen to match the actual size of the image when printed.

Only the PPI of a Screen Matters

I’m currently typing on a 5K Mac with a screen PPI of 109. The Apple iPhone XS Max has a screen PPI of 456. There’s a wide range of screen pixel densities as of 2020.

All Screens have a pixel grid. It helps to visualise this grid when thinking about PPI and screens.

One pixel of an image sits on the one-pixel cell of the screen pixel grid.

We can change the pixel grid of a screen easily on a desktop or laptop computer. That’s called changing the screen resolution.

As you change the screen resolution on a Desktop or laptop computer you are increasing or decreasing the number of pixels in one linear inch of screen.

On screens, a raster image like a JPG, PNG, or GIF file have fixed pixel dimensions.

As you increase the screen resolution a raster image of a given size will appear to get smaller on a screen. You are effectively making the size of cells (pixels) smaller. Which in turn will make the image look smaller on screen.

As you decrease the screen resolution a raster image of a given size will appear to get larger on a screen. You are effectively making the size of cells (pixels) larger. Which in turn will make the image look larger on screen.

We cannot change the pixel dimensions of an image without resizing the image inside, let’s say Photoshop, or even by a web browser.

Let’s keep this simple.

If you are looking at a jpg image on your screen its size is relative to the resolution of your screen.

Understanding this concept is vital to understanding the whole subject of PPI and screens.

The fundamental concept of Screen PPI

A raster image of 100 x 100 pixels will appear to get smaller or larger as the resolution of the screen changes. Of course, it isn’t changing size at all — It’s still a 100 x 100-pixel image.

The image below is a simplified version of what takes place as the screen resolution or the pixel grid changes.

Don’t forget the image will always be what it is — a 100 x 100-pixel image.

Why Vector Objects Need Anti-Aliasing

Though things like Type (fonts) are vector which is resolution independent. They still need be shown on a screen which has square pixel grids.

These square pixel grids cause problems especially if you need to describe a circle with a vector object.

Anti-Aliasing (semi-transparent pixels) must be used to stop the appearance of jagged edges.

Here’s a screenshot of the top half of a letter ‘S’ from a font zoomed in to 3200% in Photoshop.

You can see the semi-transparent anti-aliasing pixels on the curved edge, and you can even see the pixel grid if you look carefully.

Why doesn’t Adobe Make PPI Clear?

So why do we need to enter a PPI measurement in the resolution box when exporting from Lightroom for instance. Especially when we are using pixels as a measurement. Well, I’m guessing Adobe does not want to confuse people who have gotten used to 72 PPI.

One more time

When exporting a raster image from Photoshop or Lightroom the PPI or resolution measurement is there for printers not for exporting to a screen.

Web Browsers and Web Servers can resize images

Web browsers and Web servers can dynamically resize the pixel dimensions of an image (whilst keeping the aspect ratio) to make it fit in to a container on the page.

This dynamic web resizing is in fact the same in principle as Photoshop resizing the image – and it can lead to a loss of quality. Resampling, or interpolation must take place.

The resampling in most web browsers is very crude and is not an ideal way to serve quality images.

When web resampling takes place, a new image is created. That image might end being stored in your web browser cache. But its creation was dynamic to deal with a scenario where the original image did not fit the container on the web page it was destined for.

With the different permutations of web browsers, devices, and viewports (the size of a web browser window) having just one image to serve up to every device is not efficient.

Web browser resizing is very inefficient. For instance, having one exceptionally large image in pixels dimensions to cope with every permutation will lead to unnecessary use of network bandwidth

If a small pixel dimension image is required, then then the web browser will still have to download the huge original image and down sample the image to make it fit its intended container.

Why not serve a smaller image in the first instance?

There are diverse ways of overcoming the challenges of serving the right image. Web browser resampling is the least efficient method.

On the other hand, dynamic web server resizing (resampling) is efficient.

I don’t want to get too technical here, but I want you to understand that resizing (resampling) takes place on the web.

There are several ways of serving the right pixel dimensions to web browsers and this is covered by something called Responsive Design, though this term is now considered old hat.

In a Content Management System (CMS) like WordPress several clones of your original image are created at different pixel dimensions (same aspect ratio though) to serve the right size image to a web browser.

What are the ideal Pixel Dimensions for Photos?

My choices for pixel dimensions for photos in 2020

As of 2020 — 1600 pixels longest edge is a sound approach for gallery lightboxes. Hero Images as of 2020 – I’ve gone for 1920 pixels longest edge.

Content Management Systems (CMS) and Pixel Dimensions

As this article is aimed at Photographers, I’m making the cheeky assumption you will want to show off your photos in a gallery which is linked to a lightbox that will fill most of the available browser window (viewport).

I’m also going to assume you are not hand-coding your site. But relying on a website builder.

Now for most of us that use web site builders like Wix, Squarespace, or WordPress. It’s the pixel dimensions of the image we upload that matters. Of course, file size matters — a lot, you should always be uploading the smallest possible file size.

For every image uploaded there are several clones created at different pixel dimensions. The aspect ratio is never changed though.

In WordPress, only pixel dimensions smaller than your original uploaded photo are created.

For every image I upload to this WordPress site, about another seventeen images are created by WordPress, my plugins, and my theme.

I say ‘about’ because if I import at lower pixel dimensions than the WordPress ‘Large’ size WordPress will not create pixel dimensions larger the original ‘Full’ size image.

My Default Media Settings on WordPress

All MY Image Sizes on WordPress

Squarespace image sizes

On Squarespace the extra pixel dimensions of the same image are created at the following sizes:

• 100 pixels
• 300 pixels
• 500 pixels
• 750 pixels
• 1000 pixels
• 1500 pixels
• 2500 pixels

Whether Squarespace upscale the pixel dimensions to meet every size listed I don’t know, If Squarespace does upscale the original image, I would be slightly concerned that larger images Squarespace creates would not be of superior quality.

For example, if I uploaded 1500 pixels, and Squarespace creates an image 2500 pixels from the original that would require up sampling and some form of interpolation which could lead to a degradation in quality.

Don’t Worry About Every Screen Scenario

Getting the image size right for your uploaded image is vitally important. But you can’t worry about every device that’s likely to download your photo.

I’m on a 5K iMac. My screen resolution is 2560 x 1440 pixels and that is a PPI of 109. That means for everyone linear inch of screen there’s 109 pixels.

With Google Chrome on Full Screen with the toolbar showing, I have a viewport (browser window size) of 2560 x 1329 pixels.

How many people in the world are going to be looking at a website with a 5k iMac? It’s a fraction of one per cent worldwide.

So do you need have a 2560 pixel plus longest edge image (assuming landscape mode) to serve up to a rare visitor to your site that has a 5K Mac with a browser window on full screen?

Let’s take this 2560-pixel longest edge image as an example.

You could argue that given most website building platforms create images that are smaller in pixel dimensions that the original upload. What’s the harm of uploading a 2560-pixel longest edge image as this image will only get served to the device that needs it?

True, but is there any harm having an image slightly smaller than the browser viewport which will load quicker.

Don’t worry about the screen size outliers too much. If the world starts to browse the web on 4K televisions, there’s a good argument to start serving up images with large pixel dimensions. Till then think download speed over pixel dimensions.

Upscaling (Up sampling) is not Always Bad

If your image is too small for the container that holds the image, then the web browser, or web server will upscale the image.

Though upscaling (up sampling) is more destructive then down-scaling (down sampling). A small amount of web browser or web server upscaling is not the end of the world providing the upscaling is not in the region of double the original pixel dimensions — which will lead to blurry images.

Accept some browser resizing for an increase in page loading speed. It’s worth it from a user point of view.

My Preferred Pixel Dimensions

The other option is you don’t create let’s say a 2560-pixel longest edge image and go for 1500 pixels longest edge as your largest size.

Is it the end of the world your image doesn’t fill a browser window at full screen on a 5K iMac without being upscaled by the web browser?

In my opinion with around 1500 pixels longest edge you are covering most devices. I’ve gone for 1600 pixels longest edge for my gallery pages. But, for my front-page slider I’m using two thousand pixels longest edge.

I test a lot by simulating assorted screen sizes in Browser Developer Mode and I’ve yet to see any problems with 1600 pixels longest edge for my gallery lightboxes and two thousand pixels longest edge for my full-page sliders.

Here are a few links you might find useful.

• What’s my Viewport?
• Stat Counter
• dpiLove

I’ve also covered this subject in a YouTube Video.

High Pixel Density Screens

By the way, ‘Retina’ is a proprietary name for Apple’s high pixel density screens. It causes confusion as the word ‘retina’ has become synonymous with high pixel density screens.

With the advent of the Retina (high pixel density screens) screens around 2014, it threw the web development world into a panic.

The problem Apple was trying to overcome was everything on a phone screen being of inferior quality and low resolution. In fact, you could even see individual pixels on some pre-Retina phones.

How did Apple solve this problem of poor resolution on phones? They made the pixel grid denser. It’s so simple its genius really.

So, Apple, who waits for no one, let alone the World Wide Web Consortium (W3C) introduced Retina screens to make text and images crisper for small screens.

Most webpages in 2014 the design was for screens whose pixel density varied little like desktop computers.

And we even had a separate domain for mobile websites prefixed with an “m” for instance: m.facebook.com. These mobile domains still exist but they are becoming rarer with time.

Everything in the web world pre-high pixel density screens had absolute measurements. You served up one image and declared the pixel dimensions in the code of the web page.

To cut a long story short Apple started to double the size of some raster images in the Safari browser on its Retina screen phones. That led to very blurry raster images.

We knew the answer, we had to serve the same image but with larger pixel dimensions to high pixel density screens.

So now, not only did we need to use relative measurements instead of absolute. We needed to serve different pixel dimensions of one image driven by the PPI of the screen.

There were many suggestions put forward using both CSS and JavaScript. We’ve got there now.

This new type of web design has a name: Responsive Design.

Fast forward to 2020 we still need to serve up these different pixel dimensions of the same image.

We now have a lot of code on a web page ensuring the right image is served to the right device. On top of this, there’s also server resizing as well.

Plus, the browser will do some re-sizing if it must. Browser re-sizing is not ideal, but it shouldn’t be doubling the size of your images if you’ve designed ‘responsively’.

A Quick Word About PPI & Printers

When exporting from Lightroom or Photoshop for printing an image, PPI (Pixels per Inch) matters as you are effectively saying that you want to represent in one linear inch of paper, three hundred pixels, let’s say.

So, depending on the print size and PPI (resolution) you want, the pixel dimensions might have to change.

If you want to find out what you will get in inches (without resizing) for a print at 300 (PPI) — divide the pixel dimensions by three hundred. for example:

Your image is 2000 x 3000 px.

2000px divided by 300 equals 6.66 inches.

3000px divided by 300 equals 10 inches.

If you want an image larger, or smaller than 10 x 66.66 inches at 300 PPI you will need to resize the image.

The re-sizing is called Interpolation, or resampling.

If you are making the image larger it is called Up sampling.

If you are making the image smaller that is called Down sampling.

In Photoshop you can choose the Resampling method.:

• Automatic
• Preserve Details (enlargement) 
• Bicubic Smoother (enlargement) 
• Bicubic Sharper (reduction) 
• Bicubic (smoother gradients) 
• Nearest Neighbour (hard edges) 
• Bilinear 

In Lightroom the choice is made for you. Presumably Lightroom picks the best option depending on whether you are upscaling or downscaling.

If you are printing at a high PPI like three hundred you are going to have a smooth continuous tone which takes remarkably close inspection well and is ideal for photographs.

Never forget that PPI has no effect on the quality of the pixels. The pixel quality is affected by many things like the physical size of the sensor. The bit-depth of the camera. The lens used. The skill of the photographer. The amount of light in the scene. The post-processing skills. The list goes on.

But to a screen or printer, the pixel dimensions of the image are the only thing that matters — end of the story.

Page Loading Speed Is Important

Here are a few points I need to bring to your attention about slow page load times and the effect it has on mobile device user behaviour.

Mobile Device in this context means a portable device that is on a cell-phone network like 4G.

Google has a thing about page loading time as of 2020. Google is focused on educating webmasters about the impact of slow loading web pages. This is particularly true for the mobile web.

If page load time goes from 1 second to 5 seconds – 90% of users will bounce.

Daniel An
Google Global Product Lead, Mobile Web

‘Bounce’ in the web analytics world means to leave a site after viewing just one page. Or trying to view just one page.

Not only will the choice of pixel dimensions affect how your webpage looks aesthetically. It will have an impact on page load times which in turn affects your ranking in the SERP (Search Engine Result Pages).

Google does not like a blank page, and neither does the end-user.

All other things being equal, the faster page is ranked higher in the Search Engine Result Page (SERP).

Finally

Everything about the size of prints or the size of an image on the screen is dictated by the pixel dimensions of the image.