Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.
Sign up to join this community
I have images that are rendered via color map system. The larger images have a smaller file size then that of the thumb image which is re-sized.
Which images should I display for the end user? Would it be more convenient to show the smaller file size image with thumb dimensions or the small dimension image with larger file size?
Multiple images would show on a page and I ask because I understand scaling larger file dimensions down can cause performance issues.
scaling larger file dimensions down can cause performance issues
The "performance issue" is because the larger image is usually a much larger file size and downloading the much larger file over HTTP is the significant bottleneck.
But you're saying the larger image is the smaller file size?! How does that work? If that really is the case, and this larger (but smaller file size) image is compatible with all the browsers you are concerned about then you only need the single larger image (smaller file size). Browsers/computers are speedy beasts these days; scaling a larger image down to thumbnail size is not an issue and is infinitely quicker than downloading another image over HTTP.
In the past, browsers did not do a very good job of scaling images - the quality was not very good (simple pixel resize for the sake of performance). However, all remotely modern browsers use better algorithms and the quality is good.
To answer your question: it would be more convenient to show the smaller file size image with thumb dimensions provided the images are clear enough. What some do is post the thumbnails to show and then also have the full size available if the visitor clicks on it.
There are basically 3 image file types in common use on websites, namely jpg, png, and gif. If the image has any text written on it gif is the recommended format to use. It preserves clarity with textual content. If you need transparency in the image such in the case of a logo with no background, png is the better choice. Finally, if the image is a photograph, jpg is the best choice as it can compress in file size without losing resolution and clarity.
Regardless of which scenario you are in and regardless of which file type you pic I recommend you format the file to the correct size before posting it to the website so that the browser does not need to modify the size to make it fit. The closer you can make it to the correct size (dimensions) and the smaller you can make it in file size, the better and faster it will be for the visitor.
