What are the current recommendations for maximum file-sizes of inline img in websites?
Is there an upper limit that the entire page shouldn't exceed if it is image-heavy? You often hear 0.5 MB floating around, as well as 1.5 MB.
But what is optimal for UX in cases where the user understands that the images on the page may load a little longer than usual? What filesizes (i.e. load times) may they get anxious with?
There's no right answer to this. The heavier your page the longer it takes to load. The load time varies depending on users' connections. Smaller screens (e.g. older phones) don't need larger dimensioned images, with newer high-res phones an enlarged small image may seem shoddy. There are so many factors.
One thing I can tell you is that different images can withstand different amounts of compression - some images will look OK with high compression and some won't. Optimizing each image's compression level individually is necessary for a good balance of load time and aesthetics.
Another load optimization technique is to simply design for smaller images. Don't expect to cover a complete background (which may be 2k+ pixels wide these days) with an image. If possible, design with modern CSS styles and graphic fonts instead of images.
img photos that display beautiful products? They need to be big and even support retina displays.
– Baumr
Nov 28 '12 at 2:38
