Finding out what pixel dimensions you should use for your photography website is a difficult decision. Especially when it comes to your gallery or slider pages. And, there is not a lot of help online.
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.
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 2019. 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.
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 turns affects your ranking in the SERP (Search Engine Result Pages).
Google does not like a blank page, and neither does the end-user.
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 screen 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 one pixel of the grid.
We can change the pixel grid of a screen easily on a desktop 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 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 file has 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.
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 pixel grid changes.
Even Vector objects like Fonts sit on this pixel grid as well. Yes, you can scale them without loss of quality. But vector objects need anti-aliasing to stop jagged edges caused by having square pixels.
On screens, the pixel is square. This causes problems especially if you need to describe a circle with a vector object. Anti Aliasing has 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 on the curved edge and even the pixel grid if you look carefully.
The PPI or resolution measurement in Photoshop & Lightroom is there for printers not for exporting to screen.
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.
When exporting to print an image, PPI matters as you are effectively saying that I want to represent in one linear inch of paper, 300 pixels, let’s say. So depending on the print size you want, the pixel dimensions might have to change.
In fact, everything about the size of prints or the size of an image on the screen is dictated by the pixel dimensions of the image.
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.
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 were designed for screens whose pixel density varied little like desktops.
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.
Many methods were suggested 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.
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.
I’ve also covered this subject in a YouTube Video.
You might also like
Leave a reply