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

The question of what pixel dimensions need to be on the Web? often leads to confusion.

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 word ‘dimensions’, we use the word ‘size’.

I just wanted to clear up now 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 in reality. I will use the term “pixel dimensions”, and I will always say “file size in bytes”. Rather than just file size.

There is though 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.

Page Loading Speed Is Important

Before we get into the detail about pixel dimensions there 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).

PPI 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 probably 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 back to the 1980s and Apple Mac monitors having 72 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 2019.

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 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. You can even do it quickly on a tablet or phone by changing the mode from landscape to portrait or vice versa by tilting your device.

As you change the screen resolution on a Desktop or laptop computer you are effectively 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.

As you decrease the screen resolution the raster image of a given size will get larger on-screen.

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

The image below is a simplified version of what actually 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.

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

Even Vector objects that are scaleable like Fonts sit on this pixel grid. Yes, you can scale them without loss of quality. But vector objects need anti-aliasing to stop jagged edges caused by having square pixels.

Square pixels cause problems especially if you need to describe a circle with a vector object. Anti Aliasing (semi-transparent pixels) have to 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 screen.

A Quick Word About PPI & Printers

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

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

Pixel (Picture Element) is the smallest addressable element unit on a screen. Never use the word ‘dot’ when referring to a screen.

It’s difficult not to say the word ‘pixel’ when referring to a printer. Just be aware with let’s say with 300 PPI you are asking the printer to represent 300 pixels in one inch.

How the printer represents the pixel on to a surface is a very technical subject. I’ve seen a book recently called the ‘Fundamentals of Inkjet Printing’ which has a whopping 474 pages.

If you are printing at a high PPI like 300 you are going to have a smooth continuous tone which takes very 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 story.

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.

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 poor 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 kind of got there now.

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

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

If you use Wix, Squarespace, or WordPress, and many other website building platforms for every one image you upload there are several other versions of the same image made at differing pixel dimensions.

If you upload an image to WordPress it will create three other images automatically: thumbnail, medium and large. Plus your theme and plugins will definitely create even more.

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 has to. Browser re-sizing is not ideal but it shouldn’t be doubling the size of your images if you’ve designed ‘responsively’.

Alright then, what pixel dimensions should you be using?

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 one image, I upload to this WordPress site, about another 10 images are created.

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.

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 good quality.

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

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 I have a PPI of 109.

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

How many people in the world are going to be looking at a website with my settings? 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? No, you don’t, or rather what’s the point?

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 at the moment. If the world starts to browse the web mainly 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.

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?

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 2000 pixels longest edge.

I test a lot by simulating different sizes in Browser Developer Mode and I’ve yet to see any problems with 1600 pixels longest edge for my gallery lightboxes and 2000 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.