Size, resolution and quality guidelines for images

Question

I am looking for good articles about the resolution, size, and image quality of web pages, especially about how this affects websites today.

I am working on a website for a client, and as a certified art and design specialist, the client insists that her 7mb-10mb images are enough for her website, only 400 mb. I tried to assert bandwidth limitations and performance, but they do not hold the ground.

The standard for images is 72dpi, not more than your standard screen resolution (1024x768) and above 1 MB (which is already too large, in my opinion). my argument is that uploading 7mb + files to the gallery when loading the page will seriously hinder users if they have to wait 7-10 images for a long time to get a cache stream before the page loads and even check it with lazy loading plugins (we don’t want to blink), and late loading has penalties.

Does anyone have any recommendations regarding size, resolution and image quality? We don’t want to lose the HD-quality of images when users move around the gallery (obviously, we need to make a thumbnail first)?

Answer 1

I have read instructions before (when we were still using connections of 1 Mbps or less) and have followed them so far:

• high-resolution images should not exceed 1.5 - 2 MB. making it as large as larger than the contents of the web page. try checking http://deviantart.com about how they post large photos on their website and check image properties using EXIF, if any
• The dimensions should be sufficient for viewing in a browser (and avoid scrolling).
• need to test compression. it depends on the case, no installation will be the same for everyone. high quality, high compression without visible loss of quality - this is a practice in web design.
• JPEG is best for images, PNG for layout, and GIF for icons.
• try downloading images in the background when the browser is idle using javascript. Thus, they are in the cache before the user finds out about it.
• more about web page design, avoid using heavy graphics on the site itself, making the site fast, so we are only waiting for the image.

Answer 2

If you really boil it, you have no choice.

You are talking about large file sizes that are not realistic.

You need to download a smaller version. After that, you can subsequently download higher quality versions or offer a full image using onmouseover or click.

Answer 3

Some general recommendations:

• Sketches (of course)

• Offer several image sizes (small, medium, large). Although I understand the implications of giant UX images, some do people have quick connections and large displays and / or will be willing to wait for the high-resolution version. But this should not be the only option.

• Try different compression levels to see what works best for different sizes. Using one level of compression across the board does not always work. Again (depending on the starting material), lossless compression without loss at the upper end may be required. For example, images for printing, CAD drawings with exact details, etc.

• Use serial boot methods, if applicable. For example, if you have ten images to upload (optimized or not), make sure that the first visible first one is requested on the server.

Answer 4

When it comes to this, your client gets the impression that the request to compress her image is a “compromise” that only leads to damage to the image quality that the user receives.

True, of course, that an 8-10 MB image is so large that most users will need to download in a few seconds to create a terrible user interface that will increase the failure rate.

Show your client a side-by-side demo of your website that downloads several web-optimized images, and show her a website that downloads 8-10 MB images, and then let them decide. Ultimately, your professional job is to help her make the right choice, but she can make bad ones if she insists on it (this is her brand, money and law).

Something else you can potentially do is determine the size of the window and upload large images if the user is on an ultra-high resolution monitor or if the window looks particularly large.

Good luck