Question

I’m looking for good articles around image resolutions, size and quality for web pages, especially around how this affects web sites currently.

I’m working on a web site for a client, and as an honour graduate in arts and design, the client is persistent that her 7mb – 10mb images are sufficient for her web site, totalling in at almost 400mb. I’ve tried arguing bandwidth limitations and performance but these are not holding ground.

The standard for images are at 72dpi, no larger than your standard screen resolution (1024×768) and above 1mb in size (which is already too large in my opinion). my argument is that loading 7mb+ files into a gallery on page load will seriously hinder the users experience if they have to wait a long period of time for 7 – 10 images to first get streamed into cache before the page is loaded, and even testing this with lazy loading plug-ins (we don’t want to go flash) and late-loading has performance penalties.

Does anyone on here have any recommendation around image size, resolution and quality? We don’t want to loose the HD quality of the images when users navigate the gallery (obviously we’ll have to thumbnail them first)?

Answer 1

i have read guidelines before (when we still used 1Mbps connections or less) and have been following these until now:

• high resolution images should not be bigger than 1.5 – 2MB. making it this big is like bigger than the webpage contents itself. try checking http://deviantart.com on how they place big photos in their site and check the image properties using the EXIF if any
• dimensions should be enough to be viewable in the browser (and avoid scrolling)
• compression is to be tested. it’s a case to case basis, no setting is the same for everyone. high quality, high compression without visible quality loss is a practice in web design.
• JPEG is best for images, PNG for the layout and GIF for icons.
• try loading images in the background when the browser is idle using javascript. that way, they are in the cache before the user knows it.
• more on the webpage design, avoid using heavy graphics on the site itself, making the site fast so we only wait for the image.