I’m making my images responsive, as per this article:
I have a lot of images, at 3240px wide. They are heavily compressed jpg and png bitmap files.
My images have a CSS max-width of 2112 px.
If images are displayed on a large display with a Device Pixel Ratio (DPR) of 2, then the original images should be a massive 4224px wide? Or else my 3240px wide images will get up-scaled, and not look good?
I presume the rule of thumb is to double the CSS pixel size of the original image, and then compress it loads. Then when the image is displayed at ‘half the size’ – the CSS pixel dimensions – even though it has been compressed loads, it still looks good?
I can’t find information on what the Device Pixel Ratio is for large displays, such as iMac and 4K displays etc. Do large 24", 27" etc displays have a Device Pixel Ratio of 3? In which case my original images would need to have a gigantic width of 3 x 2112 = 6,336px?
Honestly, it all comes down to what your target audience is. And also how important those images are. Serving 6k images to me feels such a colossal waste of bandwidth for very little gain.
I run a 4k, 32" monitor which is a sub 200 ppi panel. The Pro XDR Display from Apple is a 218ppi panel, 6k resolution.
Should you care about the maybe 3 people that will ever visit your site from a display like that? I say no.
Also, in my experience, very few people with huge monitors and high resolution browse the web fullscreen. I’m typing this reply and the browser window on my screen is ~2000px wide.
Do large 24", 27" etc displays have a Device Pixel Ratio of 3?
As for this, the answer is no. PPI is a funciton of resolution and panel size. The only screens with high PPI count are phones becuase you can have a lot of pixels in a very small form factors.
You’re in 300ppi territory if someone runs a 14" laptop with a 4k panel but even the new 14 MBP stops at around 250.
I’d personally put more thoughts into serving small, optimised images on small devices rather than the other way around.
I presume the original images we upload to Kirby should be as large as they will ever be used? And then they are downsized from there.
In my case 2.5 (DPR of 2.5 for MacBookPro 16" for example) x CSS pixel width of 2112 = 5280.
Otherwise, smaller images will get scaled up by Kirby and look rubbish?
UPDATE
I’ve just done an experiment. I’ve taken two of my 3240px images and scaled them up in Photoshop to 5280px. I’m looking at them on my MacBook Pro 16" with 254 pixels per inch. And I can’t tell the difference. I had assumed scaling up would make them look rubbish.
Okay, so it looks like I can continue to use the current images with a width of 3240px. For users with massive screens, massive resolution and massive browser windows, these images will get scaled up – but that doesn’t seem to equate to a loss of quality.
I’ve just realised that my experiment - see above - isn’t going to work. The max-width images of 2112px are going to be scaled down on my MacBook Pro with a display width of 1728px.
Anyway…
I presume the original images we upload to Kirby should be as large as they will ever be used? And then they are downsized from there. Otherwise, smaller images will get scaled up by the Kirby responsive image code and look not look at their optimum?
In my case images should be 2 (DPR of 2 for an iMac for example) x CSS pixel width of 2112 = 4224px.
Again, I’m not sure what you’re coding here but unless you have a very specific audience or a very specific client and visual quality is absolutely a “must have”, serving 4000+ px images is just a waste of server space and resources.
Otherwise, smaller images will get scaled up by the Kirby responsive image code and look not look at their optimum?
There’s no optimum here. It’s about making sensible choices. DELL sells an 8k (7680 x 4320) montior. Now what? Are you going to upload 7000+ px wide images? Images on the web are always going to be a matter of compromise no matter what you do.
If you want maximum visual fidelity you will have to sacrifice on image weight because a huge, non optimised image will be a couple of MBs at least.
If you want speed you will have to compromise on visual quality because you’ll either have to crop the image or compress it a lot.
There’s just no way around it. From my experience, as someone who codes site for a living and also browses quite a lot, I hate when sites have HUGE images. It’s such a waste of bandwidth and in 99% of the cases it adds nothing to the overall experience.
from experience, i find 2,000px wide jpegs or pngs work best, along with WebP and AVIF where you can. That gives you enough wiggle room for most screen sizes.
And employ tricks like lazy loading on top. Steer clear of javascript based image carousels, as these load all the images up front (alhough some of the lazy load / preload). You can get clever with page transitions and turning the images into virtual pages Virtual pages from image gallery | Kirby CMS
that will feel like a javascript carousel without loading all the images into the page at once. I do exactly that in my Hepburn theme if you want see how it works in practice: Home
The images will be responsive, so they will be served at the appropriate size.
I’m just trying to get a handle on what size the original images should be, that I upload to Kirby. From which, in most cases, they are then scaled down.
Even though some users will have large screens and high DPR (iMac’s for example) demanding, in this example, 4,000px wide images – you don’t think we should be uploading 4,000px wide original images. In which case there will be a drop off in quality for those with large retina screens.
(the images are currently 3,000px wide with a lot of compression. Most are around 50–250kb.)