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.

When I mean size, I Don’t 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’.

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 use the word ‘dimensions’ I mean pixel dimensions.

I’m not going to be woolly.

I will use the term “pixel dimensions”.

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 60% quality, at 1000 x 1000 px, is going to be larger in size (bytes) than a JPG exported at 60% quality, at 500 x 500 px.

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 often referred to as 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 get smaller on 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 get larger on-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.

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

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

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.

Even 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 had 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 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 This Subject 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.

What are the ideal Pixel Dimensions for Photos?

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.

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 is not Always Bad

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

Though upscaling is more destructive then down-scaling. A small amount of browser 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 Upsampling.

If you are making the image smaller that is called Downsampling.

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 make 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.

‘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.