0

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?

3

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.

  • Thanks! You may be right that there's no right answer per se for everyone, but there must be some general (loose) guidelines that hold some merit? I agree with you about background images, but what about inline img photos that display beautiful products? They need to be big and even support retina displays. – Baumr Nov 28 '12 at 2:38
  • Very good point about optimizing each image separately to find the optimal compression without noticeable quality loss – Baumr Nov 28 '12 at 2:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.