I’m building a portfolio website, so the images have to look great.
The images have a max-width of 2500 pixels. I presume for large screens with a high pixel density - like an iMac or Apple displays - the images should be
2500 (max-width) x 2 (pixel density) = 5000 pixels wide.
Trouble is, these are massive kb files.
What do other people do? Alway provide original source images that are twice the size of the max-width?
Webflow image uploads are capped at 4MB. Most users are not on 2500px width displays. Both of mine are 5120-by-2880 resolution at 218 pixels per inch so there is no way to accommodate everyone. So you just need to understand your audience and the typical display resolutions used to strike a balance. Statcounter is a helpful research tool to make a decision.
I’ll be using Webflow’s built in responsive image feature, to serve appropriate sized images depending on the browser window width / Device Pixel Ratio (DPR).
So my question is, should the original files I upload to Webflow and that get served to visitors using a large monitor with a high DPR (such as an iMac, or 27" 5k monitor) be double my max-width, even though these will be massive kb files.
Or, to put it another way, is there a rule of thumb about what the maximum image size, or page size should be (for visitors using a large desktop monitor)?
In real world use, I was told (many years ago) that an individual image, displayed on a site, shouldn’t be more than 200kb. Does this still sound about right?
(I understand that Webflow has a cap of 4mb, on uploaded images. Webflow will then take that image, resize it and compress it. So the displayed imaged will be less than 4Mb.)