Creating an e-commerce website with high-resolution, top-quality images

Hi Experts,

I'm trying to help a friend improve his e-commerce website. He hired consultants to build it, which they did with Drupal. The issue is that his business is extremely dependent on his customers being able to view high-resolution photos of his (very expensive!) products. The images from his camera are RAW and in the 12-13MB range. When converted by Photoshop, they become 42-44MB PSD files. Subsequent conversion of the PSDs (outside of Photoshop) to high-quality JPGs creates 7-8MB files.

The goal is to have a page of thumbnails (even they must be good quality) with many products on it, each with a one-line title. Clicking on a thumbnail should bring up a full page (in a new tab or window) with information about that particular product, including a high-quality image that is larger than the one on the thumbnail page. Then clicking on that image should bring up a page (in a new tab or window) devoted to a very large, high-resolution, top-quality image (ideally, as good as the RAW image from his camera).

My website dev skills are modest, so I'm looking to tap the experience of Experts here who have been around the block on this. I'm guessing that there are some dev tools which are superior for building sites where high-resolution, top-quality photos are crucial. It's possible that Drupal is such a tool, but I'd like to hear it from the EE Experts, as well as suggestions for other dev tools.

Most valuable would be the actual experiences of Experts who have built this type of website, rather than just links to products and/or reviews (links are fine if they're to products and/or reviews that you've used and strongly recommend). Thanks much, Joe
LVL 61
Joe Winograd, Fellow&MVEDeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
No, it isn't going to happen.  You (and all the rest of us) are stuck with the resolution of the monitors that we use to view the web.  If you have a "hi-resolution" image that is 3072x2048 pixels, it will have to be scaled to be shown on all common monitors which cause the fine details to be lost.  The most common single monitor size on the web right now is 1366x768 which is about 1/3 the size of that image.  Typical thumbnails around 200x200 pixels do not have 'high resolution' because they don't have enough pixels to preserve the detail.
0
GaryCommented:
That is the basis of how most e-commerce sites work period.
What exactly have these consultants done?
I assume all they've done is take http://www.drupalcommerce.org/ and skinned it
What is it that is not working as 'it should'
0
Joe Winograd, Fellow&MVEDeveloperAuthor Commented:
Dave,
All of that makes perfect sense!

Gary,
What's not working as it should (or as he would like) is that the photos at the site look "faded/washed out" (his language). It does not show his products in the favorable way that he wants.

Regards, Joe
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Paul SauvéRetiredCommented:
I think this module may be of help to you: Hi-Res Images
CSS px are not intended to be mapped 1:1 with screen pixels. They are actually defined as an angular measurement: http://inamidst.com/stuff/notes/csspx

Web browsers running on modern hi-res screens need to be calibrated by "zooming in". This happens automatically with Apple Retina Display. For images to fully utilize hi-res screens, image dimensions need to be twice the CSS dimensions.
0
Joe Winograd, Fellow&MVEDeveloperAuthor Commented:
Paul,
That's an interesting module for Drupal! The comparison of the "Without Hi-Res" and "With Hi-Res" photos reminded me of an experience I had in a tech forum a few years ago where a member offered a PDF with disassembly instructions for a laptop. But the JPG photos embedded in the PDF were low-res and in some cases it was difficult to see crucial steps. So he also offered high-res photos, which made a big difference. I just dug them up and here's an example that shows the difference:
motherboard low-resmotherboard hi-resThanks for bringing that module to my attention. Regards, Joe
0
Dave BaldwinFixer of ProblemsCommented:
And you just made my point.  Those two photos, when squished to be the same size, are essentially the same.  And when you click on the 'hi-res' photo, most browsers will show it at about half size unless you click it to go full size.  At which time it no longer fits on the screen.
0
Joe Winograd, Fellow&MVEDeveloperAuthor Commented:
Hmmm, when I click on them, the high-res one is a bit larger in the new browser tab (Firefox 24.0), but not much...certainly nowhere near as large as the file size difference, which is a factor of 7 (2.2MB vs. 310KB). The high-res one looks much better and I don't think it's just because of the physical size difference on the screen (which, as I said before, isn't much). And then I downloaded the photos to look at them off the web in an image viewer (which I suspect some of his customers will do). I made them the same physical size, side-by-side on the screen, and the high-res one looks significantly better. It could be because of my 1920x1200 monitor...maybe there wouldn't be much visual difference on a 1366x768 one, which you said is the most common these days. Regards, Joe
0
Dave BaldwinFixer of ProblemsCommented:
The point is that when you reduce them to fit on this page (at the same size), quality differences disappear because the detail is lost in reducing the image to fit.  When I open the 'hi-res' image in my 1280x1024 screen, it is reduced to 42% to fit on the screen.  If I click on it to go to 'full resolution', it no longer fits on the screen but what I see has much better detail.  On a 1366x768 screen, it would be reduced to something like 30% with the corresponding loss of detail.

This pretty well demonstrates the problem with trying to get 'high quality' images on a web page.  Most photographers hate their web sites for these reasons.  A web page can never show the detail that their pictures have.
0
Joe Winograd, Fellow&MVEDeveloperAuthor Commented:
Once again, Dave, makes perfect sense!

This thread reminded me of Wayne Fulton's excellent site, A few scanning tips. It's been a while since I visited it, so I went back for a refresher course on pixels, digital images, and video monitors. I clicked on the Survey button at the latter page and the results are attached. Based on this survey, Dave is right about 1366x768 being very popular, although this survey shows it as #2 at 11%, behind 1920x1080 at 13% – seems that the "true HD" resolution has become the market leader. Regards, Joe
scantips-monitor-resolution-surv.pdf
0
Dave BaldwinFixer of ProblemsCommented:
I use this page http://www.netmarketshare.com/ for that info and it says that 1366x768 has risen to 16%.  I believe the reason for that is the low cost laptops that have those screens.
Screen Resolutions
0
oliverpoldenCommented:
Isn't this post about how to set up Drupal to organize and display high resolution images? Not the limitations of monitors. However you view an image, whether it's on a website or in photo album software you will have exactly the same monitor constraints so that is irrelevant!

Here is how you set up Drupal to organize and display high resolution images:
First take a look at a site I built that takes us 95% of the way there: http://www.aboutcatbreeds.com
This is a Drupal site with thumbnails linked to description pages and a slideshow for each breed. Clicking on the image brings up a larger image, albeit still not that high.
However, this can easily be tweaked. First off it sounds like you may have a single image per page so we just set this gallery to display the image size you need and again link it to a popup with a higher resolution. This could be the original image however I would recommend a large resolution appropriate for a monitor, something like 1200x600 so that the image will fill most monitors without being scaled. This gives a good balance between site speed and image detail. Next, you can place a link in the popup to the original image so that users are free to view it how they wish. Alternatively you could link directly to the original from the thumbnail instead of a popup.

Let me know if you need help setting this up and I will be glad to help.

Kind regards,
Oliver
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
Of course you can always open any size image in the browser, you are not limited by the screen size itself. This gives you the opportunity to at least give an image with lots of detail.
The user would just have to scroll around
0
Dave BaldwinFixer of ProblemsCommented:
Oliver, there was a desire in the question to get 'better' than normal display resolution somehow.  As you know, that won't happen.  The example image above is 2560x1920 pixels and photographers have frequently sent me 3072x2048 images.  Monitors that size are very rare.  99.9% of the users have a smaller monitor so they won't be getting that 'hi-res' experience that the original web site owner wants.

Other than that, you have some good suggestions about making the web site perform as well as it can.
0
Joe Winograd, Fellow&MVEDeveloperAuthor Commented:
Oliver,
> Isn't this post about how to set up Drupal to organize and display high resolution images?

I didn't intend this to be just about setting up Drupal. I'm certainly happy to receive ideas about getting the most out of Drupal when dealing with high-res images, but I'm also looking for suggestions of other web dev tools that are good for dealing with high-res images. My Drupal knowledge is minimal, and when posting the question, I didn't know if web dev experts would recommend Drupal as a good tool for creating a web site where high-res images are crucial. Based on the feedback so far, it seems that Drupal is a fine tool for this purpose.

I appreciate the link to your site and the advice on how to set up Drupal, as well as your offer to help. Very kind, indeed!


Dave,
Quite a big difference in the surveys!

NetMarketShare vs Scantips:
16.6% vs 11% for 1366x768
5.6% vs 13% for 1920x1080
1.3% vs 6% for 1920x1200

May say something about the visitors to the two sites...or not. Hard to figure.


Gary,
> This gives you the opportunity to at least give an image with lots of detail. The user would just have to scroll around

Good point!


Regards, Joe
0
Dave BaldwinFixer of ProblemsCommented:
May say something about the visitors to the two sites...or not. Hard to figure.
No, that's exactly what it is.  Here's another version: http://www.w3schools.com/browsers/browsers_resolution_higher.asp
0
Joe Winograd, Fellow&MVEDeveloperAuthor Commented:
Dave,
Interesting to see the rise of 1366x768 in recent years:

3.6% > 10.1% > 18.7% > 25.4%

Must be all those laptops heading off to school. :)  Btw, cool site!
0
GaryCommented:
w3schools.com is not a cool site. Do not rely on it for anything other than the basics of knowledge
Also realise all those figures are based on the visitors to their site - visitors to their site are developers and do not represent the real world
If you want more realistic statistics then try statcounter.com
0
Dave BaldwinFixer of ProblemsCommented:
But statcounter.com will only give you info on the visitors to you site.  Or did I miss something.

And w3schools.com is a fine site with a lot of good info.  I see a lot more mistakes here than I do there.  And the old complaint that they don't fix things is out of date also, they've been frequently updating their site in the last couple of years.
0
GaryCommented:
Statcounters stats are not based on visitors to their site but on visitors to the sites they track which gives a more real world breakdown - this is not the case for w3schools.
Yes w3schools has a lot of good info, but they also had a lot of bad info. For someone starting out it is a great learning tool. Glad to know they are finally updating to best practices.
0
Joe Winograd, Fellow&MVEDeveloperAuthor Commented:
My thanks to all of the Experts who have participated so far. I'm going to leave it open for a few more days to see if any other ideas come rolling in. Then I will close it out and award points. Regards, Joe
0
Joe Winograd, Fellow&MVEDeveloperAuthor Commented:
Thanks again to all of the experts who participated. This thread was very helpful for me. Regards, Joe

P.S. to Oliver: I may be back to take you up on your kind offer. Great photos at your site!
0
Joe Winograd, Fellow&MVEDeveloperAuthor Commented:
Note for Oliver: I went to the website in your EE profile on Monday and sent you a message via the Contact form. Haven't heard back from you, so decided to ping you via a comment here. Please get in touch with me about moving forward. Thanks, Joe
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Graphics Software

From novice to tech pro — start learning today.